Do you wanna build a snowman? (pt. 2)

Het Power Platform verbinden met Azure functions

In deel #1 van deze ‘Do you wanna build a snowman’-blogpost hebben we gezien hoe we met behulp van een Application Programming Interface (of API) en een Azure Function een sneeuwpop kunnen genereren. Maar wat als we deze sneeuwpop willen integreren in een gebruiksvriendelijke app? En de gebruikers van deze app zelf in staat willen stellen om eenvoudig een sneeuwpop te bouwen? In deze ‘Do you wanna build a snowman’-blogpost deel #2 zie je hoe we dit voor elkaar krijgen met behulp van een Power Platform custom connector. Maar wat zijn connectors eigenlijk?

Wat zijn connectors?

Er zijn op dit moment meer dan 500 connectoren die het Power Platform verbinden met verschillende apps, services, gegevens of apparaten. Een connector in principe een verzameling van een aantal acties en triggers die het Power Platform in staat stelt de communiceren met de API van een bepaalde service of applicatie. Voorbeelden van veelgebruikte connectoren zijn Office 365, Twitter, Dropbox, Trello en Google Services.

Custom connectors in het Power Platform

Wat als je verbinding wilt maken met een service of applicatie die geen connector aanbiedt? Heel simpel, maak hem zelf! Het Power Platform stelt haar gebruikers in staat om zelf een aangepaste connector te bouwen. En dit is eenvoudiger dan je misschien denkt.

Neem bijvoorbeeld de Sneeuwpop uit onze vorige blogpost. Wat als we de sneeuwpop willen bouwen vanuit een zelfgebouwde Power App? We moeten hiervoor communiceren met de Azure Function die de sneeuwpop genereert. Hoe doen we dat? Met een custom connector. In de Power Automate maker portal kan er met het doorlopen van een 5-tal stappen een custom connector worden opgezet. Hiervoor zijn wat gegevens benodigd, zoals de URL-van de API waarmee gecommuniceerd moet worden.

Makkelijker wordt het wanneer er een Swagger-/OpenAPI-bestand beschikbaar is die de methodes API omschrijft. Deze kan simpelweg geïmporteerd worden en het Power Platform bouwt de connector vervolgens al gedeeltelijk op.

Het enige wat vervolgens resteert is het aanmaken van een verbinding met een subscription-key en de connector kan worden getest.

De connector gebruiken in Power Apps

Maar wat kunnen we nu precies met de gemaakte connector? En hoe krijgen we de sneeuwpop te zien in Power Apps? In de vorige blogpost hebben we gezien dat de sneeuwpop wordt beschreven door het volgende stukje JSON-code:

{
      “snowman”: {
            “bottom”: {
                  “buttons”: false,
                  “feet”: false,
                  “radius”: 30
            },
            “body”: [
                  {
                  “buttons”: false,
                  “arms”: false,
                  “radius”: 20
                  }
            ],
            “head”: {
                  “mouth”: false,
                  “hat”: false,
                  “radius”: 15
            }
      }
}

Het opbouwen van deze code kan worden nagebootst in Power Apps. Door het instellen van de parameters van de sneeuwpop via een aantal knoppen en dropdowns kan de sneeuwpop in de UI van de app worden samengesteld. Zo kan bijvoorbeeld de radius van elke sneeuwbal worden ingesteld en kan het aantal elementen waaruit het lichaam bestaat worden geselecteerd.

Vervolgens wordt door middel van een Power Fx formule in Power Apps de JSON die de sneeuwpop omschrijft opgebouwd. De groene termen verwijzen hier naar de verschillende knoppen en tekst vakken in de app waarmee de sneeuwpop kan worden geconfigureerd.

JSON({snowman:{
    bottom:{
        feet:Toggle1_3.Value;
        radius:Value(TextInput1_1.Text);
        buttons:Toggle1_2.Value
    };
    body:Filter(var_body;Value(No)<=Value(Dropdown1.Selected.No));
    head:{
        radius:Value(TextInput1.Text);
        mouth:Toggle1.Value;
        hat:Toggle1_1.Value
    }
}};IndentFour)

De sneeuwpop weergeven

Tot nu toe is er alleen een JSON gebouwd die de sneeuwpop omschrijft. Om de sneeuwpop daadwerkelijk te kunnen zien moet deze door de Azure Function worden gegenereerd. Dit is waar de eerder gemaakte connector aan bod komt. We gebruiken Power Automate om de in Power Apps opgebouwde JSON via de connector naar de Azure functie te sturen.

Wat er terug komt is een base64-string die in Power Apps met de Image-control kan worden omgezet naar een afbeelding. En voilà! De sneeuwpop is te zien als afbeelding in Power Apps.

Wil jij dit ook? Neem dan contact met ons op!