Building a custom portal dashboard

A custom portal dashboard is an essential component for providing users with an interactive and informative view of data within a Power Pages (formerly Power Apps Portals) site. The dashboard can display a variety of data such as metrics, key performance indicators (KPIs), recent activities, and custom charts that help users quickly access and understand important information.

In this guide, we will walk you through the process of building a custom portal dashboard in Power Pages.

---

Step 1: Define the Purpose of the Dashboard

Before starting the development, it’s important to clearly define the purpose of the dashboard. Think about the following questions:

• Who will use the dashboard? Is it for administrators, employees, or external users?
• What data will be displayed? Are you showing analytics, KPIs, recent updates, or other types of information?
• How should the data be visualized? Should it be in charts, tables, or both?

For example, a dashboard for an employee portal could show:

• Number of tasks completed
• Pending tasks
• Latest announcements
• Performance metrics

---

Step 2: Gather the Data for the Dashboard

Power Pages can integrate with various data sources, such as Dataverse, SharePoint, or even external systems. The data to populate your dashboard should be available from one or more of these sources.

Steps to Gather Data:

1. Dataverse: If you’re using Dataverse, ensure that your tables are set up to store relevant data (e.g., employee performance metrics, project statuses, etc.).
2. SharePoint: If you’re pulling data from SharePoint, make sure to create appropriate lists or document libraries for storing and managing the data.
3. External APIs: You can use external APIs to gather data (e.g., weather data, stock market prices, etc.) and display it on the dashboard.
4. Power Automate: You can use Power Automate to automate the process of fetching and updating data, such as triggering notifications or running background jobs.

---

Step 3: Design the Dashboard Layout

Now that you have defined the data requirements, you need to design the layout of the dashboard. In Power Pages, you can use Web Templates and Liquid Templates to create a custom layout.

Example Layout for a Dashboard:

• Header: Include the dashboard title, user’s profile, or any other essential information.
• Navigation: A sidebar or top menu that allows users to navigate between different sections of the portal (e.g., Home, Reports, Settings).
• Main Section: This is where the dynamic data will be shown.
  • KPIs and Metrics: Use simple cards or boxes to display key information like total tasks, pending items, or performance scores.
  • Charts and Graphs: Display visual data representations using charts or graphs.
  • Recent Activities: Display the latest updates or activity logs.

---

Step 4: Add Data to the Dashboard Using Liquid Templates

To display dynamic data on your dashboard, you can use Liquid Templates to pull data from Dataverse or other sources.

Example Liquid Code to Fetch Data:

You can write Liquid code to fetch data from your Dataverse tables or SharePoint lists and display it on the dashboard.

{% assign total_tasks = entities["tasks"].count %}
{% assign completed_tasks = entities["tasks"].where("status eq 'Completed'").count %}
{% assign pending_tasks = total_tasks | minus: completed_tasks %}

<div class="dashboard">
  <h2>Dashboard</h2>
  <div class="metrics">
    <div class="metric-box">
      <h3>Total Tasks</h3>
      <p>{{ total_tasks }}</p>
    </div>
    <div class="metric-box">
      <h3>Completed Tasks</h3>
      <p>{{ completed_tasks }}</p>
    </div>
    <div class="metric-box">
      <h3>Pending Tasks</h3>
      <p>{{ pending_tasks }}</p>
    </div>
  </div>
</div>

Explanation:

• Liquid Code: This code fetches data from the tasks table, calculates the total number of tasks, completed tasks, and pending tasks, and displays them in individual boxes on the dashboard.
• entities["tasks"]: This retrieves data from the tasks table in Dataverse.
• Dynamic Metrics: Liquid code allows you to display data dynamically, which will update as the data changes.

---

Step 5: Add Interactive Charts

For a more engaging and informative dashboard, you can add charts and graphs. Power Pages doesn’t have built-in charting features, but you can integrate third-party chart libraries like Chart.js, Google Charts, or Highcharts to display dynamic data visualizations.

Example: Integrating Chart.js in Power Pages

1. Add Chart.js Library: First, include the Chart.js library in your portal. You can add the CDN link to the <head> section of your web template or directly in the page.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. Create a Chart Container:

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

3. JavaScript for Creating the Chart:

<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Task 1', 'Task 2', 'Task 3', 'Task 4'],
      datasets: [{
        label: 'Task Progress',
        data: [12, 19, 3, 5],
        backgroundColor: 'rgba(0, 123, 255, 0.5)',
        borderColor: 'rgba(0, 123, 255, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Explanation:

• Chart.js: This is a simple bar chart that visualizes task progress.
• Data Source: Replace the static data ([12, 19, 3, 5]) with dynamic data fetched from your Dataverse or SharePoint lists using Liquid or JavaScript.
• Customization: You can customize the chart’s appearance, data, and type (line, pie, bar, etc.).

---

Step 6: Implement Custom Widgets

For a more interactive dashboard, you can add widgets to display:

• To-Do Lists
• Recent Activity Feed
• Announcements

These widgets can be dynamic, based on the user’s role or permissions.

Example: Recent Activity Feed Widget

You can create a widget to display the latest activities from a Dataverse table.

{% assign activities = entities["activities"].order_by("createdon desc").take(5) %}
<div class="activity-feed">
  <h3>Recent Activities</h3>
  <ul>
    {% for activity in activities %}
      <li>{{ activity.subject }} - {{ activity.createdon | date: "%b %d, %Y" }}</li>
    {% endfor %}
  </ul>
</div>

This will pull the 5 most recent activities from the activities table and display them as a list on the dashboard.

---

Step 7: Test the Dashboard

• Preview the Portal: Test the dashboard to ensure that all elements (metrics, charts, widgets) load correctly.
• Check for Responsiveness: Ensure that the dashboard is mobile-friendly and looks good on all devices.
• Verify Data: Confirm that the data being displayed is accurate and updated in real time.

---

Step 8: Final Touches

1. Enhance the User Interface: Add icons, animations, and hover effects to make the dashboard more engaging.
2. Role-based Content: If necessary, display different data depending on the user’s role (e.g., an admin might see more detailed metrics than a regular user).
3. User Interactivity: Allow users to customize the dashboard by adding widgets, filtering data, or adjusting settings.