Connecting with external APIs (REST)

Power Pages (formerly Power Apps Portals) is a powerful platform for building secure, external-facing websites with low-code/no-code capabilities. One of its most valuable features is the ability to connect with external REST APIs, enabling dynamic data interactions with third-party systems such as CRMs, payment gateways, social platforms, and custom services.

This guide offers a deep, step-by-step explanation of how to connect with external REST APIs in Power Pages using JavaScript, Power Automate, and Dataverse Custom Connectors.

---

Why Connect with External APIs?

• Fetch or submit data to third-party services (e.g., retrieve weather info, send SMS, process payments).
• Enrich the portal experience with dynamic external content.
• Integrate with internal APIs for organizational workflows and services.

---

Key Concepts

To securely and effectively connect to REST APIs in Power Pages, you must understand the following components:

• JavaScript/Fetch API – For direct browser-based calls (caution: exposes credentials).
• Power Automate (Flows) – For secure backend execution.
• Custom Connectors – For reusable API integrations within Dataverse and Power Platform.
• Web Templates/Web Files – To write and inject JavaScript/HTML into the portal pages.
• Portal Web Roles – To control access to data and features.

---

Approach 1: Using JavaScript and Fetch API (Client-Side)

Best for public APIs (no authentication) or when using token-based calls with CORS support.

Step-by-Step:

1. Create a Web Page or Web Template in Power Pages.
2. Add the following script to call the API:

<div id="apiResult"></div>

<script>
  fetch("https://api.publicapis.org/entries")
    .then(response => response.json())
    .then(data => {
        const display = JSON.stringify(data.entries[0], null, 2);
        document.getElementById("apiResult").innerText = display;
    })
    .catch(error => {
        console.error("API Error:", error);
    });
</script>

3. Save and browse the page to see the output.

Avoid using client-side fetch for sensitive APIs or authentication headers.

---

Approach 2: Using Power Automate (Recommended for Secure APIs)

Power Automate enables you to call APIs from the server side, without exposing tokens or secrets to the browser.

Step-by-Step:

1. Create a Power Automate Flow:
   • Trigger: When an HTTP request is received.
   • Action: HTTP (to call the external REST API).
   • Return: JSON response using “Response” action.

{
  "status": 200,
  "headers": {
    "Content-Type": "application/json"
  },
  "body": {
    "data": "@body('HTTP')"
  }
}

2. Enable CORS (Cross-Origin Resource Sharing):
   • Add Access-Control-Allow-Origin header in the response if needed.
   • Allow Power Pages domain.
3. Call Flow from JavaScript in Power Pages:

<script>
fetch("https://prod-...logic.azure.com:443/workflows/...", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({})
})
.then(response => response.json())
.then(data => {
    console.log("Response from Flow:", data);
})
.catch(error => console.error("Flow Error:", error));
</script>

🛡️ Pros: API keys/tokens are kept secure in the flow. 🔄 Reusability: Use across multiple web pages.

---

Approach 3: Using Custom Connectors (Dataverse)

Ideal for long-term integrations and enterprise use-cases.

Step-by-Step:

1. In Power Apps > Go to Custom Connectors.
2. Click + New Custom Connector.
3. Choose from:
   • Import OpenAPI definition
   • Import Postman Collection
   • Blank Connector
4. Define:
   • Base URL
   • Authentication (API Key, OAuth 2.0, etc.)
   • Actions and request/response formats
5. Save and test the connector.
6. Use the connector in Power Automate flows or directly in Dataverse tables, Entity Forms, or Custom Web APIs exposed to the portal.

---

Displaying API Results in Portal Pages

You can display the response on the Power Pages UI using:

• Web Templates (embed JavaScript with results).
• Liquid (for static content or Dataverse-bound data).
• JavaScript DOM Manipulation (for dynamic insertion).

Example (Fetch response from Flow and show on screen):

<div id="weatherContainer"></div>
<script>
    fetch("https://your-flow-url", {
        method: "POST"
    })
    .then(res => res.json())
    .then(res => {
        document.getElementById("weatherContainer").innerText = res.weather;
    });
</script>

---

Securing API Connections

• Use Power Automate to hide tokens/keys.
• Use Dataverse + Custom Connector for OAuth-secured APIs.
• Implement Web Roles to limit who can access the page.
• Always validate input/output and sanitize responses before rendering.

---

Common Use Cases

• Fetch exchange rates, flight data, stock prices
• Submit contact forms to an external CRM
• Validate identity or OTP via third-party services
• Get weather/location/geo data
• Integrate payment systems or e-commerce APIs

---

Troubleshooting Tips

Issue	Fix
CORS errors	Use Power Automate to bypass browser restrictions
API not returning data	Check API key, endpoint, method
Flow not triggered	Ensure POST request and proper body format
Access denied	Review authentication settings in API/flow

---

Summary

Power Pages enables robust API integrations through multiple secure methods. While simple public APIs can be accessed directly via JavaScript, secure or authenticated APIs should use Power Automate or Custom Connectors to avoid exposing credentials and ensure compliance with security best practices.

Combining these approaches allows you to build modern, dynamic, and interactive websites powered by real-time external data.