Edit

How to: interact with Azure Function HTTP trigger using server logic

This tutorial demonstrates how to integrate Azure Function HTTP trigger with Power Pages server logic. You use the Azure Functions JavaScript QuickStart sample as the backend API and learn how to call it from server logic.

Step 1: Create Azure Function

For this tutorial, use the Azure Functions JavaScript QuickStart sample.

  1. Go to the Azure portal and create a Function App with the Node.js runtime.
  2. Add a new HTTP trigger function named server-logic-api.
  3. Use the sample code provided in the Quickstart.
  4. Copy the Function URL including the function key.

Example HTTP trigger code

const { app } = require('@azure/functions');

app.http('httpTrigger1', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {
        context.log(`Http function processed request for url "${request.url}"`);
        const name = request.query.get('name') || (await request.text()) || 'world';
        return { body: `Hello, ${name}!` };
    },
    });

Test the function directly with a browser or API testing tool of your choice:

GET | POST https://yourfuncapp.azurewebsites.net/api/ServerLogicApi?name=Alice&code=XXXX

Expected response

The following JSON data should be returned in the body of the response.

{"message": "Hello Alice! " }

Step 2: Create Power Pages server logic

  1. Sign in to Power Pages.

  2. Select the required site, and then select +Edit.

  3. Go to the Set up workspace, and then select Server logic (preview).

  4. Select +New server logic.

  5. Enter a name for the server logic. This name is used in the API as a resource identifier while you construct the server logic API. For example:

    Property Example Value
    Name call-azure-function
    Display Name Call Azure function from server logic

  6. Select +Add roles to assign the appropriate web role. In this example, select Authenticated User, and then sign in to proceed.

  7. Select Add.

  8. Select the server logic, and then select Edit code.

  9. In the Edit in Microsoft Visual Studio Code for the Web dialog, select Open Visual Studio Code to author the custom logic. You find predefined methods and scripts in the file.

  10. To invoke the Azure function URL, replace the existing code with the following code:

    // Azure Function URL including function key
const functionUrl = '<replace function url copied in previous step>'

async function get() {
const name = Server.Context.QueryParameters["name"] || "World";

const response = await Server.Connector.HttpClient.GetAsync(
   functionUrl
);

return JSON.parse(response).Body;
}

  11. Save the server logic.

    Server logic endpoint URL format:

    https://<your-power-page>/_api/serverlogics/call-azure-function

Step 3: Call server logic from web page

  1. Launch the Power Pages design studio.
  2. In the Pages workspace, select + Page.
  3. In the Add a page dialog, enter Server logic in the Name box, and then select the Start from blank layout.
  4. Select Add.
  5. In the upper-right corner, select Edit Code.
  6. Select Open Visual Studio Code.
  7. Copy the following code snippet, and then paste it between the <div></div> tags of the page section.
<style>
   .sl-card {
      max-width: 360px;
      padding: 16px;
      border: 1px solid #e1e1e1;
      border-radius: 6px;
      background: #fff;
      font-family: Segoe UI, Arial, sans-serif;
   }

   .sl-card h3 {
      margin: 0 0 10px;
      font-size: 16px;
      color: #323130;
   }

   .sl-row {
      display: flex;
      gap: 8px;
   }

   .sl-row input {
      flex: 1;
      padding: 6px 8px;
      border: 1px solid #c8c6c4;
      border-radius: 4px;
      font-size: 14px;
   }

   .sl-row button {
      padding: 6px 12px;
      border: 0;
      border-radius: 4px;
      background: #0078d4;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
   }

   .sl-row button:hover {
      background: #106ebe;
   }

   .sl-result {
      margin-top: 10px;
      font-size: 14px;
      color: #323130;
   }

   .sl-error {
      color: #a80000;
   }
</style>

<div class="sl-card">
   <h3>Test Server Logic</h3>
   <div class="sl-row">
      <input id="nameInput" placeholder="Name" />
      <button id="callBtn">Call</button>
   </div>
   <div id="result" class="sl-result"></div>
</div>

<script>
   document.getElementById('callBtn').onclick = async () => {
      const name = document.getElementById('nameInput').value || 'World';
      const result = document.getElementById('result');
      result.textContent = 'Loading...';

      try {
         const res = await fetch(
            `/_api/serverlogics/call-azure-function?name=${encodeURIComponent(name)}`
         );
         const data = await res.json();
         result.textContent = data?.data || 'No response';
      } catch (e) {
         result.textContent = 'Request failed';
         result.className = 'sl-result sl-error';
      }
   };
</script>

To test the server logic functionality:

  1. Select Preview and then choose Desktop.
  2. Sign in to your site with the user account assigned to the Server logic User role you created earlier.
  3. Go to the Server logic webpage created earlier.
  4. Enter a name, and then verify the response.
  • Last updated on