Search code examples
powerappspowerapps-canvaspowerapps-collection

How do I easily return and API response from my flow to my canvas app in Power Apps?


Looking for some assistance, I have created a flow and a canvas app in power apps that calls an API, I finally got it to work but seems there has to be an easier way to do this.

In my flow I'm taking the body and parsing it to get just what I need then returning the body of that response to the canvas app. I could bypass that step and just return the body of the Api Call step, but my main question is, it seems a little to much to have to write some regex in my function when I click the button to call my flow.

This creates the collection for me with the correct fields, but is there an easier way for the app to know my schema without having to manually define it?

enter image description here

enter image description here


Solution

  • If the only reason you're using Flow is to call the API from Power Apps, then yes, there is an easier way. You can create a Custom Connector and stop using Flow altogether.

    Steps:

    1. From make.powerapps.com, click Dataverse then Custom Connectors
    2. Click + New custom connector
    3. Click Create from blank and name the Custom Connector
    4. Enter the host url (without the https://)
      • Keep the base url to /
      • enter image description here
    5. Click Security -->
    6. Select the correct security type
      • You can also select No authentication on this screen and use a request header on the Definition screen
      • enter image description here
    7. Click Definition -->
    8. Click New action then name the Summary, Description and Operation ID
      • enter image description here
    9. Under Request click + Import from sample
    10. Select the method (GET, POST, etc.), enter the request URL and click Import -You'll want to paste in an example URL that has ALL required parameters.
      - Example: https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&latitude=48.814963&longitude=-122.71135&maxradiuskm=50&orderby=magnitude-asc
      • enter image description here
      • Note: This is where you could put an Authorization header if needed
    11. Under Response click Default then Import from sample
      • Paste any required headers and the anticipated (typically JSON) response
      • I like to use Postman here...
      • enter image description here
    12. Click Import
      • enter image description here
      • It's pretty nice how Power Apps parses the JSON response. Each of these will be returned to your app. You can edit/delete/etc.
      • enter image description here
    13. At this point, click Create connector
    14. Scroll down and click Code preview -->
      • Don't mess with this unless you know what you're doing
    15. Click Test -->
    16. Click + New connection
      • enter image description here
    17. Depending on how you setup Security for this Custom Connector, you will either:
      • Login using your Windows credentials
      • Paste in an API key
      • Or just click "Create" (as in my example which uses a free API)
        • If you used an Auth header in the Request area, this applies too
      • enter image description here
    18. Creating this Connection "kicks you out" of the Custom Connector creation screen. You'll have to click Custom Connectors, select the one you just created, then click alllll the way through to the Test screen.
    19. Once you're there, you should see the Connection has been made.
      • enter image description here
    20. Enter the required parameters and click Test operation
    21. You should see a Status 200 and the response body shown
      • enter image description here
      • Pretty much done with the Custom Connector at this point.
    22. Back in your Canvas PowerApp, click Add data and find the Custom Connector you just created
      • enter image description here
    23. Add a Button control and add this to the OnSelect property:
    ClearCollect(colName, 
        'CustomConnectorName'.OperationID(
            {
                required_param1: "text",
                required_param2: 1234,
                required_paramN: "whatever",
            }
        )
    )
    

    Actual example:

    ClearCollect(colEarthquakes, 
        '2022-11-27_SO_CustomConnector'.GETearthquakes(
            {
                format: "geojson",
                latitude: 48.814963,
                longitude: -122.71135,
                maxradiuskm: 50,
                orderby: "magnitude-asc"
            }
        )
    )
    
    1. Click the Button control and investigate the response the Custom Connector returns. Depending on the shape of the JSON, you may need to "climb into" the nested JSON by using dot-notation in the ClearCollect() function.

    This will get you close. If you want more, check out this video

    Note: Custom Connectors are a premium feature. All users of the app will need either a PowerApps per-user or per-app license.