Create Custom connectors in Power Apps

While Azure Logic Apps, Microsoft Power Automate, and Microsoft Power Apps offer over 325+ connectors to connect to Microsoft and verified services, you may want to communicate with services that aren’t available as prebuilt connectors. Custom connectors address this scenario by allowing you to create (and even share) a connector with its own triggers and actions.

In today’s blog, we will create a custom connector and consume it in a Canvas app.

Let’s take a business case scenario where we have an API to connect to a source system to fetch records from the system and display it in the canvas app. We will create a Custom Connector which will fetch the records and display them in the canvas app gallery control.

Let’s create a Custom connector with GET method API. I am using an open API here to demonstrate.

Sample API URL -  jsonplaceholder.typicode.com/users
Method - GET

Log in to make.powerapps.com . Please select the appropriate environment in the top right corner. Select a custom connector from the left navigation pane.

Select New connector > Create from Blank.

Give an appropriate name to your connector.

We can upload an icon, choose a background color and provide URL host details here.
I have selected the scheme as HTTP as my sample API URL is secured. Click on the Next tab security.

The security tab allows you to add authentication details for the API. You can use the authentication types based on your API. Here I have an open sample API, so I am selecting no Authentication. Now click on the next tab Definition.

1. On the Definition tab, the left area displays any actions, triggers (for Logic Apps and Power Automate), and references that are defined for the connector. Choose New action.
2. The General area displays information about the action currently selected. Add a summary, description, and operation ID for this action.

Now let’s add the Request details.

Select the method of API from the Verb. I have selected the GET method and added URL details for the API. You can pass the default header as well as the request body in case any. Once done click on Import.

The next step is to add the Response details for the API. Pass the response JSON in the body as shown below.

The validation section will indicate whether the action implemented is validated successfully or not. This helps you identify potential issues with this action.

The next step is to move to the Code section.

• This step is optional. You can complete the codeless experience of creating your connector by ignoring this step.
• Custom code support is available in public preview.

Custom code transforms request and response payloads beyond the scope of existing policy templates. Transformations include sending external requests to fetch additional data. When code is used, it will take precedence over the codeless definition. This means the code will execute, and we will not send the request to the backend.

You can either paste in your code or upload a file with your code. Your code must meet the following requirements:

• Be written in C#.
• Have a maximum execution time of 5 seconds.
• Can’t be more than 1 MB (size of the code file).

For instructions and samples of writing code, go to Write code in custom connectors.

The next step is to move to the TEST operation.

Add a new connection.

A connection will be added to the environment. Navigate to Test and select the connection created.

Test the operation. Click on the Test operation button.

The connector has been successfully created and tested. Now we will use this custom connector in our canvas app.
Create a blank canvas app and Add data inside data section and select the connector we created.

Add a gallery component where the data from API will be populated.

Select the data source to the gallery component.

Once you select the connector source select the power fx query editor and type in the custom connector name with the operationId we created inside the custom connector.

ReydynamicsCustomConnector.Getusers()

From this command, the data source of the gallery is set to the response of the API.
Now edit the formula for the labels on the gallery component as shown in the below picture. Select the label and click select edit in the formula bar.

Use Thisitem keyword to access the API attributes and map them to the label of the gallery component. I am adding the Name and email address.

This is how we can consume an external API in a canvas app using a custom connector.

Hope this helps … Thanks for reading!

Original Post https://msdynamicscrm137374033.wordpress.com/2022/05/30/create-custom-connectors-in-power-apps/