Power Pages – Add Advanced Client-Side Functionality

Power Pages – Add Advanced Client-Side Functionality Exercise

Step-by-step lab to enable portals Web API, retrieve Dataverse data, and render it as a chart using an external library.

What Is Sample Data?

Sample data is a set of pre-built records that Microsoft provides to help you understand how data is structured and how features work inside Dataverse and Power Pages. It populates common tables with realistic content so you can quickly test functionality without creating all records manually.

When sample data is installed in a Dataverse database, it adds a variety of records across multiple standard tables which you can use for development, learning, or demos.

What Sample Records Are Included

The sample dataset adds records that help you experiment with core tables like:

  • Accounts - companies with names and revenue data
  • Contacts - people associated with accounts
  • Opportunities and related sales data
  • Products and price lists
  • Cases, activities, and support records

For example, once sample data is installed you can run a Web API query against the Accounts table - with names, number of employees, and revenue values already populated - which can be used to generate meaningful charts in your exercise.

How to Install Sample Data

You can install sample data from the Power Platform Admin Center if your environment has a Dataverse database:

  1. Open the Power Platform Admin Center and select your environment.
  2. Select Settings and Data Management >  Sample data.

  3. If not already installed, choose Install Sample Data and wait for it to finish.

Once installed, you will see sample records across standard tables - providing ready-made data to test Web API calls, charts, forms, lists, and more.

Why Use Sample Data for Your Exercise

Sample data saves time and ensures your exercises produce visible results:

  • Provides realistic account and contact records
  • Helps test Web API GET queries without creating dozens of records
  • Makes charts and lists meaningful rather than empty
  • Lets you explore relationships between tables
  • Useful for learning filters, views, and data-driven components

Step 1 - Enable Portals Web API Access

Before you can pull data using Web API, you must configure site settings and table permissions.

Create Site Settings

  1. Sign in to the Power Pages maker portal.
  2. Select your environment in the top right.
  3. Click the ellipsis (…) and open the Power Pages Management App.

  4. Go to Site Settings and create a new setting:
    • Name: Webapi/account/enabled
    • Website: (select your portal)
    • Value: true
  5. Save the setting.
  6. Create another setting:
    • Name: Webapi/account/fields
    • Website: (select your portal)
    • Value: name, numberofemployees, revenue (logic name of Dataverse table column)
  7. Save & close.

These settings whitelist the Accounts table for Web API read operations and specify which fields are accessible.

Step 2 - Create Table Permissions

Table permissions determine who can use the Web API to read account records.

  1. Return to the Power Pages maker and open Design Studio.
  2. Go to the Security workspace → Table permissions.

  3. Click + New permission and enter:
    • Name: Account
    • Table: Account (account)
    • Access type: Global
    • Permission to: Read
  4. Click Add roles and include:
    • Anonymous Users
    • Authenticated Users

  5. Select Save.

This allows both public and logged-in visitors to query account data via the Web API.

Step 3 - Test the Web API

Open a new browser tab and run the following URL (replace with your portal URL): 

https://yourwebsite.powerappsportals.com/_api/accounts?$select=name,numberofemployees,revenue

You should see a JSON response containing account data with fields you enabled.

Step 4 - Create a Content Page

Now you’ll add a new page where you’ll embed JavaScript to retrieve and transform Web API data.

  1. Open Design Studio → Pages workspace.
  2. Click + Page.
  3. Enter Chart as the page name and include it in main navigation.
  4. Select Start from blank layout and click Add.

  5. Select Edit code for the new page.

  6. Open the generated .customjs.js file in Visual Studio Code.

Step 5 - Add JavaScript to Retrieve Data

Insert the following script logic to fetch data and prepare it for plotting. This code retrieves account records using the Web API, transforms the results, and logs the output. 

function makeChart(rawData) {
  var rData = rawData.value.map(({name,revenue,numberofemployees}) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);
}

$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

Save the file and sync changes so the site can load this script.

Then open the page in preview mode. And open developer tool and check the console. Verify that the console output contains the same data as previously retrieved, except that it's now showing as transformed.

The data structure is now prepared for plotting. Assign the appropriate labels to data points: 
name - Company name 
x - Number of employees 
y - Company revenue in thousands 
z - Revenue for each employee (calculated)

Step 6 - Add External Chart Library

To visualize the transformed data, include Highcharts.js in your portal footer:

  1. Select the page footer and click Edit code.
  2. Open the footer file in Visual Studio Code.
  3. Add the following lines at the end:
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
  4. Save and sync.

This makes the Highcharts library available on all pages so you can plot bubble charts and more.

Step 7 - Plot Chart on the Page

Update your chart script to use Highcharts with the transformed data. Replace the chart logic in the same .customjs.js file: 

function makeChart(data) {
  console.log(data);
  var rData = data.value.map(({
    name,
    revenue,
    numberofemployees
  }) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);

  // new code to plot the data
  Highcharts.chart($('.mychart')[0], {
    title: {
      text: "Customers efficiency"
    },
    legend: {
      enabled: false
    },
    xAxis: {
      title: {
        text: "Number of employees"
      }
    },
    yAxis: {
      title: {
        text: "Turnover ($K)"
      }
    },
    tooltip: {
      pointFormat: '<strong>{point.name}</strong><br/>Employed: {point.x}<br>Turnover ($K): ${point.y}',
      headerFormat: ''
    },
    series: [{
      type: 'bubble',
      data: rData
    }]
  });
}

// retrieve accounts data using portals Web API
$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

In the HTML part of the page (e.g., in .webpage.copy.html), add: 

<figure>
    <div class="mychart"></div>
</figure>
Save and sync.

Step 8 - Preview & Verify

  • Select Preview → Desktop.
  • Open browser developer tools.
  • Check that your console logs the transformed data.
  • Ensure the Highcharts bubble chart appears as expected.
  • Hover over bubbles to confirm data correctness.

You have now extended your Power Pages site with advanced client-side scripting and chart visualization.

Comments

Post a Comment