With custom connectors, we can utilize existing REST API services or create new APIs to expose complex server-side operations that are not available with the out-of-the-box connectors. In this case, we’re dealing with a middle-tier architecture where Power Apps is used as a UI layer. This architecture also offers flexibility. In general, as the complexity of the app increases, you should strongly consider this type of architecture. When multiple data sources are needed to build a single view in that case we can use an API layer to deliver a performant experience, because the data response can be shaped server-side and delivered to the client more efficiently. The use of this middle-tier layer means that you can add a server-side caching layer and implement richer telemetry for the app.

Let’s create a Canvas App with custom REST API connector –

  1. From Power Apps home expand Dataverse
    Capture1 3 Power Apps: Custom REST API Connector
  2. Select Country/Region and Get started
    Capture2 2 Power Apps: Custom REST API Connector
  3. From top right expand new custom connector, From available options we will select ‘Create from blank’ option. But we can import postman collection, swagger json and so on.
    Capture3 3 Power Apps: Custom REST API Connector Capture4 2 Power Apps: Custom REST API Connectorgive a name and continue…
  4. In general section select Schema and provide base URL
    Capture5 1 Power Apps: Custom REST API Connector
  5. From Security section expand authentication options and select authentication type
    Capture6 1 Power Apps: Custom REST API Connector
  6. In defination section provide the required information then click on ‘Import from sample’ then provide the full URL and click on ‘Import’
    Capture7 1 Power Apps: Custom REST API ConnectorNext scrool down and click on ‘Add default response’, provide the example response data then click on import
    Capture8 1 Power Apps: Custom REST API Connector
  7. Skip the Code(Preview) , Keep it as it is. Click on ‘Create connector’ before moving  to ‘Test’ section.
    Capture9 3 Power Apps: Custom REST API Connector
  8. Now select the an operation then clieck on ‘Test operation’
    Capture11 1 Power Apps: Custom REST API ConnectorOur connector is ready, Now we will move to next section, Build a Canvas App
  9. From Home click on ‘Create’ then  Blank App
    Capture1 4 Power Apps: Custom REST API Connector
  10. Now select  Blank Canvas App -> click on ‘Create’ -> Give a name then click on ‘Create’ again
    Capture2 3 Power Apps: Custom REST API Connector Capture3 4 Power Apps: Custom REST API Connector
  11. Click on Data icon then select ‘CustomRestApiConnector’ as data source
    Capture5 2 Power Apps: Custom REST API Connector
  12. Now insert a Button controll inside the container. Then select the button and write following function on OnSelect action:
    Capture5.2 Power Apps: Custom REST API Connector
  13. Now insert a Gallary controll inside the container. Then select datasource
    Capture7.1 Power Apps: Custom REST API Connector
  14. Run the app and click on ‘Load Data’ –
    Capture8 2 Power Apps: Custom REST API ConnectorYes, our app is running and fetching data from the API.

Our Test API is running on localhost, For testing purpose, accessing localhost from outside and HTTPS has been enbled using ngrok
Capture4.1 Power Apps: Custom REST API ConnectorCapture4.2 1 Power Apps: Custom REST API Connector
Thanks….