LogoLogo

Our Products

Metadata Browser

Edge Add-on

HTML To PDF Converter

Power Automate Connector

Data Mask for Dataverse

Dataverse App

Commission 365

Dynamics 365 App

AI Autocloser

Dataverse App

Flow Monitor

Power Automate App

ServicesAboutCareersBlogContact
Chat on Teams
Metadata BrowserHTML To PDF ConverterData Mask for DataverseCommission 365AI AutocloserFlow Monitor
ServicesAboutCareersBlogContactChat on Teams
HomeBlogEmbed Model-Driven App Charts in Power Pages with Liquid

Embed Model-Driven App Charts in Power Pages with Liquid

April 17, 2025
#Power Pages#Dataverse
Rishikesh Kandikanti
Embed Model-Driven App Charts in Power Pages with Liquid

In many real-world business scenarios, users need access to key insights—such as charts and trends—directly within a portal, without opening a model-driven app. Charts provide a powerful way to visualize Dataverse data and help users understand information quickly.

In this blog, you’ll learn how to embed a model-driven app chart into Power Pages using Liquid tags, allowing portal users to securely view real-time chart data on a webpage.

If you’re new to Liquid in Power Pages, you can check the official Microsoft documentation to understand how Liquid tags work.

Prerequisites

A Power Pages site (any template is fine)

A model-driven app

Access to make.powerapps.com (to get View ID)

Proper Table Permissions + Web Roles configured in Power Pages (to avoid access denied)

Business Scenario

A company wants to provide its business partners with a high-level view of customer distribution by industry (e.g., Manufacturing, Healthcare, IT) through a Power Pages portal without granting direct access to the model-driven app.

By embedding an “Industry-wise Account Distribution” chart:

Partners gain instant insights.

Stakeholders view real-time customer segmentation.

Data access remains secure through Power Pages permissions.

Step-By-Step Guide

In the model-driven app, navigate to the target entity and click .

Need help with your business solution?

Our team can help you implement the right solution for your organization.

Get in touch
LogoLogo

Ex-Microsoft experts helping businesses get more from their Dynamics 365 and Power Platform investments.

Products

Show charts
Snippet/1

Choose the chart you want to display, click More commands (⋯), and select Export Chart (this downloads an XML file).

Snippet/2

Open the exported XML file and copy the GUID inside the <visualizationid> tag — this is your Chart ID.

Snippet/3

Go to make.powerapps.com → Tables → Open your table → Views → Open the view you want (example: Active Records). Copy the GUID from the URL — that is your View ID.

Snippet/4

In Power Pages, I created a portal using a predefined template. To start editing, open your site in Power Pages Design Studio and click Edit code (this opens the site in Visual Studio Code).

Picture1

In VS Code, paste the following Liquid code: {% chart id:"YOUR_CHART_ID" viewid:"YOUR_VIEW_ID" %}, and save your changes.

Snippet/5

The chart requires read privileges for the target table being queried. Open Portal Management → Security → Table Permissions, create a Read permission for the target table, assign it to the required Web Role, and save.

Snippet/6

Sync the changes in Power Pages Studio, then preview the page—you should now see the chart rendered.

Snippet/7

Now preview the portal page.

The chart renders with real-time data.

Users can access insights without requiring direct access to the CRM.

Snippet/8

Embedding a model-driven app chart into Power Pages using Liquid code is a clean way to show real-time Dataverse insights inside your portal. By using the correct chart ID + view ID and configuring Table Permissions, you can deliver secure, dynamic dashboards to portal users—without exposing direct CRM access. However, avoid this approach when you need highly customized visuals, complex calculations, or interactive analytics beyond standard views and charts.

Frequently Asked Questions (FAQ)

1. What is the Liquid chart tag in Power Pages?

It’s a Dataverse Liquid tag that lets you render a model-driven app chart on a Power Pages webpage using the chart ID and the view ID.

2. Why do we need both Chart ID and View ID?

We need View ID to tell the system which data to fetch (filtered records), and Chart ID to tell it how to display that data (bar/pie/line, grouping, count, etc.).

3. How do I fix “Access Denied” for portal users?

Create Table Permissions with Read access for the table used by the chart and assign it to the correct Web Role.

4. Can I embed multiple charts on the same Power Pages page?

Yes—add multiple {% chart %} tags, each with its own Chart id and View id, and they will render one after another.

5. What if the chart still doesn’t load after adding permissions?

Recheck that the Chart ID and View ID are correct, and confirm the table permission is linked to the same website and web role used by the page.

Back to all articles

More from the blog

Automating Dataverse Record Creation with Custom Forms in Power Pages

Generate Temporary Download URLs in Dynamics 365 Using GetFileSasUrl

How to Generate Early Bound Classes in Dataverse with XrmToolBox

How to Populate Choice Fields Using Power Apps Dataflows

How to Populate Dataverse Lookup Fields Using Power Apps Dataflows

Automating Document Signing with Docusign Using Power Automate

How to set up Web API in Power Pages?

Power Pages- Retrieve Data from Dataverse using Power FX

Metadata Browser
  • HTML To PDF Converter
  • Data Mask for Dataverse
  • Commission 365
  • AI Autocloser
  • Flow Monitor

    • Services

    • D365 Marketing
    • D365 Sales
    • D365 Customer Service
    • D365 Field Service

    Company

    • About Us
    • Blog
    • Contact
    • Careers

    Copyright ©2026 Pascalcase Software Private Limited. All rights reserved.

    Privacy PolicyTerms of Service