Creating Flow & PowerApps Custom Connectors step by step Tutorial (Part 1)

A reader of my previous post noticed  that I used the HTTP action to connect to the Weather API. His question was “why didn’t you use a custom connector and how can you create such custom connector?”.

The answer is most of the time I use the HTTP action to connect to a system if I’m not supposed to reuse this connection all over again or if don’t need to share it with my colleagues. But the connector framework also provides some added value that goes beyond re usability. I will describe them in the coming post. Also Flow/powerapps connectors are based on Swagger/OpenAPI and this can be quite complex. The good news is the the Flow portal provides an Open API generator that will do the job and will extend the code with some Flow specific extensions. Col !

Now how can we create a custom Flow connector ?

If you remember I wrote the following statement in the previous post:

<<

  • In the HTTP action, select the Get method, and the uri should be:

Http

the output of this HTTP action looks like this

{
  “location”: {
    “name”“Namur”,
    “region”“”,
    “country”“Belgium”,
    “lat”50.47,
    “lon”4.87,
    “tz_id”“Europe/Brussels”,
    “localtime_epoch”1533214214,
    “localtime”“2018-08-02 14:50”
  },
  “current”: {
    “last_updated_epoch”1533213033,
    “last_updated”“2018-08-02 14:30”,
    “temp_c“29,
    “temp_f”84.2,
    “is_day”1,
    “condition”: {
      “text”“Partly cloudy”,
      “icon”“//cdn.apixu.com/weather/64×64/day/116.png”,
      “code”1003
    },
    “wind_mph”5.6,
    “wind_kph”9,
    “wind_degree”340,
    “wind_dir”“NNW”,
    “pressure_mb”1023,
    “pressure_in”30.7,
    “precip_mm”0,
    “precip_in”0,
    “humidity”40,
    “cloud”25,
    “feelslike_c”28.9,
    “feelslike_f”84.1,
    “vis_km”10,
    “vis_miles”6
  }
}

This means that the following querystring should be a good start:

http://api.apixu.com/v1/current.json?key=6f03288047f64795a31151324182778&q=London

  • So first you need to go to apixu.com, create a free account  and you’ll get a key.
  • This key will be associated with the connector, which means that if we define it once in the connector several flow should be able to reuse it.  End users should not see the key, only the Connector created should see it.
  • Go to the Flow portal and click on Custom Connectors:

customconnect

  • Click on Create custom Connector:

newconnect

  •  select Create from blank.
  • Name the connector  Demo Weather and click Continue

democustomconn

 

  • Click continue and in the next window, provide the host (api.apixu.com) and a short
  • description of what you connector does :

 

api.apixu

  • Click Security to move to the next screen :
  • The authentication type should be API key. Since we want the Key parameter to be provided in the query string, create an api key with key as Parameter label and Parameter name; switch the parameter location to Query as illustrated in the following picture :

 

security

  • Click Definition.
  • Click on New action :definition

 

  • We won’t define a trigger here, but just an action (will will define trigger in other posts)
  • Define the Action as follow :

 

generaldefinition

  • In a new browser tab, type a weather request to make sure it works fine and also to generate sample data that we will reuse in our connector definition (don’t forget to pass the key as a parameter, as well as the city :

 

reqest

  • Keep this tab open and go back to the connector definition
  • Down below in Request, click Import from sample
  • Passe your querystring and set the verb to Get  and click import:

 

requestsample

 

2 parameters will be visible in a Query : key and q

Key will be registered in the connector, there is not need to pass the key for each query, so we can delete it.

 

removekey

  • Edit the q parameter and fill in the Description as City Name , Summary as city : name and make the field required :

 

cityname

  • Click on “Back’, scroll to  Response, click on default to import another sample (the scroll bar is in the middle of the screen as illustrated in the picture:

 

responsesample

  • In the next window, click on Import from sample

responseimport

  • …and in the next window, paste the JSON result grabbed from the browser :

responseimport

  • Click Import.
  • Click Create Connector

It takes a while before connector get created and deployed. Indeed, even though you specified the url http://api.apixu.com in order to call the REST, the connector will generate a public azure proxy that must be deployed and this can take several minutes.

So if you test it directly it will fail :

failedproxytest

You can see the Azure proxy by clicking in the (test) Request link :

azureproxy

After a while, Test should be working 🙂

test

 

  • You can now create a new Empty flow started from a button :
  • Add an action and type weather to find all “weather” related connectors

 

connectorlist

  • Select Demo Weather – Get Weather. As you can see the notation is

<connector name> – <action Summary>

  • You will be prompted to create a new connection, that you will be able to reuse afterwards :

connectioncreation

  • Provide a connection name, fill in the key and click Create.
  • Edit the action and hard code it ‘London’ as the city name

 

flow

 

rawresult

  • But this is perfectible : for instance, instead of ‘Temp_C’, I would like ‘Celcius’.To proceed to such change, we need to edit the connector definition.
  • So go to the Custom Connectors flow menu :

 

editconnector

  • … and Edit your custom connector :

editconnector2.png

  • Go to the connector definition, select Response end click default :

 

editconnector3

  • The returned fields will show up; edit temp_c and fill in the Title property  as Celcius :

celcius

  • Click Update Connector. Wait several minutes.
  • Go back to your previous flow, remove the current action and add a new one, followed by a Compose Activity (or a variable) : you will notice that you have a better description of what your temp_c field means.

 

celcius2

  • Your connector is only available to yourself. If you want to share it with someone else, go to the Custom connector menu and select invite other users :

 

shareconnector

You can share your connector with individual users, security groups of Office 365 groups (aka unified groups).

Anyone in the organisation can create a custom connector ; if you are using the Office 365 plan of Flow, each user can only create connector. If a user has already created his (unique) connector and if he wants to create additional ones, he will be requested to sign-up for Flow Plan 2 trial; there is no way to prevent this. This could be an issue in term of support, because users could start using and creating new connectors, but when the trial expires, they will all be gone… so if you live in the real world you know the impact of what this can have in term of support tickets : – )

Custom connectors are always available in their environment, because we cannot create DLP policies that prevents usage of a custom connector. This is like this since the Start of Flow (and PowerApps); the community expects a change.

Now, our custom Flow connector is available in PowerApps too;

  • go to PowerApps.com and create a blank canevas application.
  • Then click View-Data sources…and Add a data source, Add a new Connection, select the connector and pass the key :

 

PowerApps

  • In the caneva, add a button and a label.
  • The code behind the button should be :

 

PowerApps2

  • The code behind the label should be :

PowerApps3

  • Now, let’s say that in Flow we want to restrict the number of cities in the action UI. Allowed cities are only Brussels, Seattle, Tokyo, London.
  • Edit again the flow definition (most specifically edit the q parameter in the Request) :

staticlist1

  • Under the String type select static and type the cities you want separated with a colon.

(the Dynamic options allows to dynamically retrieve the values from a REST endpoint)

 

staticlist2

  • Republish the connect and Test again after several minutes.
  • Update your existing flow and you should get this :

staticlist3

 

You can download the generated swagger/OpenAPI by going to the Custom connector window :

swagger1

swagger2

Most of the time the generator is good enough you don’t have to change the swagger. You can re-import it into other environments (or other tenants) if you need to.

We will explore other custom Connector features in a next post.

 

 

If you are interested, I can train your team in PowerApps and Flow anywhere in the world. My workshops are fully exercises oriented, 0 slide.

Check my web site : https://www.shareql.com

shareqltraining

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s