Integrating Azure Functions with PCF Controls

A PCF control is great at showing UI — but some jobs don’t belong in the browser. Calling a third-party API, running heavy calculations, hiding a secret key, or orchestrating several systems all belong on a server. That’s where Azure Functions come in: a small, serverless backend your PCF control can call to do the heavy lifting safely.

This article — part of our series on hosting PCF controls in modal popups — shows how to integrate Azure Functions with PCF controls, in plain language.

Why Add a Backend?

• Keep secrets safe — API keys and connection strings never touch the browser.
• Call external services — payment, shipping, AI, or partner APIs.
• Heavy work — large computations or data transforms run server-side.
• Orchestration — combine several systems behind one clean endpoint.
• Governance — one place for logging, rate limits, and auditing.

Step 1 – Create the Azure Function

A simple HTTP-triggered function receives a request from your PCF control, does the work, and returns JSON:

// Azure Function (Node.js, HTTP trigger)
module.exports = async function (context, req) {
    const { recordId, action } = req.body;
    // secret key stays here on the server
    const result = await callExternalApi(process.env.API_KEY, recordId, action);
    context.res = { status: 200, body: { ok: true, data: result } };
};

Step 2 – Call It From the PCF Control

Inside the control, use fetch to call the function and use the result to update the UI:

const res = await fetch("https://your-func.azurewebsites.net/api/process", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ recordId, action: "enrich" })
});
const { data } = await res.json();
// render data in the control

Step 3 – Secure the Endpoint (CORS & Auth)

An open endpoint is a risk. Lock it down:

• CORS — allow only your Dynamics 365 origin to call the function.
• Authentication — require a token (Azure AD / Entra ID) so only signed-in users get through.
• Validate input — never trust the request body blindly.
• Least privilege — the function’s own permissions should be minimal.

Step 4 – Write Results Back to Dataverse

You can either return data for the control to save, or have the function write to Dataverse directly using the Web API and a service principal. For user-driven changes, returning data and saving via the control (with the user’s permissions) is usually safest.

Common Pitfalls

• CORS errors: add your Dynamics origin to the Function App’s allowed origins.
• Cold starts: use a Premium plan or keep-warm for latency-sensitive calls.
• Secrets in code: store keys in Application Settings or Key Vault, never in the client.
• No error handling: show the user a friendly message and log the details server-side.

Conclusion

Azure Functions give your PCF controls a secure, scalable backend for anything that shouldn’t run in the browser — external APIs, heavy processing, and secret handling. Keep the UI in PCF, keep the sensitive work in the function, and secure the endpoint properly for a clean, production-ready architecture.

Related: Open a PCF Control in a Modal Popup Using Custom Pages and Create an AI Copilot Panel Using PCF Controls. Need a secure backend for your controls? Talk to the CloudVerve team.