Viewing external REST API data in Liquid

To view external REST API data in Liquid within Power Pages (formerly Power Apps Portals), you can’t directly call external APIs from Liquid due to the server-side limitations of Liquid. However, you can still retrieve and display data from external APIs using workarounds like Power Automate or JavaScript.

Here’s how to approach this:

---

Method 1: Using Power Automate to Call External APIs and Display Data in Liquid

Step-by-Step Process

1. Create a Dataverse Table
   First, create a custom table in Dataverse to store the external data. For example, create a table called ExternalAPIData with fields such as:
   • Title
   • Description
   • Data
   • DatePulled
2. Set Up a Power Automate Flow
   • Go to Power Automate and create a new flow.
   • Choose a trigger, such as Recurrence for periodic data fetch, or an Instant Flow to call the API on demand.
   • Add an HTTP action to call the external REST API. Make sure the API has the necessary parameters and authentication for access.
   • Parse the JSON response from the external API.
   • Insert or update the data in the Dataverse table you created earlier using the Dataverse – Create a new record or Dataverse – Update a record action.
3. Display Data in Liquid
   • Use Liquid to fetch and display data stored in the Dataverse table. Example:
   {% fetchxml apiData %} <fetch top="5"> <entity name="externalapidata"> <attribute name="title" /> <attribute name="description" /> <attribute name="data" /> <order attribute="datepulled" descending="true" /> </entity> </fetch> {% endfetchxml %} <ul> {% for record in apiData.results.entities %} <li>{{ record.title }}: {{ record.data }}</li> {% endfor %} </ul>

Advantages:

• Secure method for fetching and storing data.
• Liquid can easily render data from Dataverse tables.
• The API data is fetched periodically or on-demand, and it’s stored in Dataverse for future use.

Disadvantages:

• Data is not real-time (unless you set up very frequent API calls).
• Adds complexity due to integration with Power Automate and Dataverse.

---

Method 2: Using JavaScript (Client-Side) for Real-Time API Data

If you need real-time API data on the client-side, you can use JavaScript to make API calls. Here’s how:

Step-by-Step Process

1. Add JavaScript Code to the Web Page
   • Go to the Web Page in Power Pages and edit its Source.
   • Add the following JavaScript to make an API call:
   <div id="external-data"></div> <script> fetch("https://api.example.com/data", { method: "GET", headers: { "Authorization": "Bearer YOUR_API_TOKEN" } }) .then(response => response.json()) .then(data => { let html = '<ul>'; data.items.forEach(item => { html += `<li>${item.title}: ${item.value}</li>`; }); html += '</ul>'; document.getElementById("external-data").innerHTML = html; }) .catch(error => { console.error("API Error:", error); }); </script>
   • Replace https://api.example.com/data with your API’s endpoint and ensure that the necessary Authorization headers are included (if required by the API).
2. Display the Data
   • The data fetched by JavaScript will be dynamically displayed in the div with the id external-data. This allows the page to update without needing to reload or rely on server-side rendering.

Advantages:

• Real-time data fetched directly from the external API.
• No need for Power Automate or Dataverse.
• Flexible for scenarios where live API data is needed.

Disadvantages:

• Security risk: You should never expose API keys or sensitive data directly in the JavaScript.
• The data is client-side, meaning it can be visible to anyone inspecting the page’s source code.

---

Method 3: Embedding External Data Using Iframe (Read-Only)

If the external data is hosted on a website that you can embed in your portal, you can use an iframe to show the external content.

Step-by-Step Process

1. Embed an Iframe in the Portal
   • In the Power Pages content editor, you can embed an iframe as follows:
   <iframe src="https://externaldatasource.com" width="100%" height="500" style="border:none;"> </iframe>
   • Replace https://externaldatasource.com with the URL of the external service you want to embed.
2. Secure the Iframe
   • Make sure the external website allows embedding by setting the correct CORS (Cross-Origin Resource Sharing) headers and X-Frame-Options.
   • It’s also a good practice to use the sandbox attribute in the iframe tag for additional security.

Advantages:

• Quick and easy way to embed external content in the portal.
• No need for API calls or complex logic.

Disadvantages:

• Read-only: You can’t manipulate or interact with the data directly within the portal.
• May have security concerns if the external source is not trusted.

---

Best Practices for Integrating External API Data in Liquid

1. Caching:
   • Store API data in Dataverse or use Power Automate to cache responses to minimize external API load and avoid rate-limiting.
2. Security:
   • Always use OAuth or API tokens securely, never expose sensitive data in client-side JavaScript.
   • If using Power Automate, secure the API endpoint using Azure Active Directory (AAD) or API Management.
3. Error Handling:
   • Implement proper error handling in your JavaScript or Power Automate flow to deal with API failures, such as timeouts or invalid responses.
4. Data Refresh:
   • If real-time data is required, use a frequent Power Automate recurrence trigger or implement client-side polling for real-time updates.