How to use JOSN data in Canvas APP received from a web API response

To use the JSON response of a Custom Connector in a Canvas App in Power Apps, you can access, parse, and display the data directly within the app. Here’s a step-by-step guide to achieve this.

You can watch the video or scroll down to read.

---

Step 1: Add the Custom Connector to Power Apps

1. Go to Power Apps (https://make.powerapps.com/).
2. Select Apps and create or edit a Canvas App.
3. Click Data (left panel) and click Add data.
4. Search for and add your Custom Connector.

💡 Note: If you don’t see the connector, make sure it’s shared with you and available in your environment.

---

Step 2: Call the Custom Connector in Power Apps

1. Add a Button to the Canvas app to trigger the API call.
2. Add the following formula in the OnSelect property of the button:powerappsCopy codeClearCollect(MyData, YourCustomConnector.YourActionName()) Explanation:
   • MyData: A local collection that will store the JSON response.
   • YourCustomConnector: The name of the custom connector.
   • YourActionName: The action name inside the connector that returns the JSON response.
3. Click the button to trigger the API call and store the response in MyData.

---

Step 3: Parse the JSON Data

Once the JSON response is in MyData, you can access its fields using dot notation.

Example JSON Response:

jsonCopy code{
  "status": "success",
  "data": [
    {
      "userId": "12345",
      "userName": "JohnDoe",
      "email": "johndoe@example.com",
      "roles": ["Admin", "Editor"]
    },
    {
      "userId": "67890",
      "userName": "JaneDoe",
      "email": "janedoe@example.com",
      "roles": ["User", "Editor"]
    }
  ]
}

To Parse this Data:

1. Access individual properties from MyData using Power Apps dot notation.
   Example:powerappsCopy codeFirst(MyData).status
2. If data is an array, you can loop through it using a Gallery.
   • Insert a Gallery control.
   • Set the Items property of the gallery to:powerappsCopy codeMyData.data

---

Step 4: Display Data in Power Apps

1. Bind a Gallery to the data array.
   • Set Items property of the gallery to:powerappsCopy codeMyData.data
2. Display Fields in Labels inside the gallery:
   • Add a Label control inside the gallery.
   • Set the Text property to:powerappsCopy codeThisItem.userName
   Repeat for other fields like email, roles, etc.

---

Complete Walkthrough Example

Scenario

You have a Custom Connector called UserAPI with an action GetUsers, which returns the following JSON:

jsonCopy code{
  "status": "success",
  "data": [
    { "userId": "12345", "userName": "JohnDoe", "email": "johndoe@example.com" },
    { "userId": "67890", "userName": "JaneDoe", "email": "janedoe@example.com" }
  ]
}

Steps

1. Add a Button to call the Custom Connector.
   OnSelect property of the button:powerappsCopy codeClearCollect(UserCollection, UserAPI.GetUsers())
2. Add a Gallery to display the response.
   Items property of the gallery:powerappsCopy codeUserCollection.data
3. Inside the Gallery, add Label controls.
   Set Text property for each label:powerappsCopy codeThisItem.userName
4. Preview the app, click the button, and you’ll see a list of usernames displayed.

---

Access Specific Fields from JSON

If you want to access specific parts of the JSON (like nested arrays), you can use Power Apps functions like:

• First(): Get the first record from the collection.
• LookUp(): Look up a specific record.
• ThisItem: Reference current item in a gallery or loop.
• Text(): Extract text from a value.

Example Usage

• To get the email of the first user:powerappsCopy codeFirst(UserCollection.data).email
• To show a role from the roles array, you can use:powerappsCopy codeFirst(UserCollection.data).roles[1] // Shows the first role

---

Best Practices

1. Clear existing data: Use ClearCollect() to avoid appending old data.
2. Error handling: Add a label to show errors from the connector, like:powerappsCopy codeIf(IsEmpty(UserCollection), "No data found", "Data loaded successfully")
3. Use Global Variables: If you want to store the response globally, you can use:powerappsCopy codeSet(UserData, UserAPI.GetUsers())

---

Summary

1. Call Custom Connector: Use ClearCollect(MyData, YourCustomConnector.YourActionName()).
2. Parse JSON: Access the collection with MyData.data and bind it to a Gallery.
3. Access JSON Fields: Use ThisItem.userName, ThisItem.email, etc.

With this approach, you can work with any Custom Connector response in a Power Apps Canvas App.

hope it helps.