Integrate charts in modern SharePoint forms
Vladi Gubler
Vladi Gubler
May 31, 2022 | Products


Associated Items column is the cornerstone of any business application in Ultimate Forms. It allows creating relationships between lists to mimic the relationships in the real world. It makes it easy to implement single-to-multiple as well multiple-to-multiple connections within any form, such as line items in an invoice. Being one of the central components, it offers a very wide variety of features and the list just keeps growing.

Our latest feature is the ability to display associated items as a chart, to make it easy to analyze the current status of associated items at a glance. I am going to demostrate this with an example:

I am managing a list of projects, where each project contains multiple tasks. I want to show a pie chart that displays percentage of tasks by status, all within the corresponding parent project.

This is how my Display form is going to look. But when I go into the Edit form, I will be showing the regular task grid, with the ability to add and manage tasks.

  1. First, we create a list of Projects. It's a simple list, I didn't even add any additional column, beyond the built-in Title column.
  2. Open Ultimate Forms from the list by clicking on Design button on the toolbar.
  3. Next click on Form Designer to start creating our Modern form. Choose to generate the form automatically, it's the easiest way.
  4. Under Columns in the left pane, click on New Column and choose Associated Items as column type
  5. Under Date Source click on New to create a new child list, then select Tasks under Type to use Tasks list template. Enter a title for the list (I'm using Tasks for both column and list titles here).
  6. Save the column settings, it will now appear under Columns.
  7. Click on the gear icon next to the name of the column to edit its settings (we need to do it again, because when we first defined it, Tasks list didn't exist yet). Next switch to Charts tab.
  8. Toggle Allow displaying as chart. This will reveal chart settings.
  9. Select Status as our X axis column (what the values will be grouped by).
  10. Add at least one series, in our case we will count items by ID.
  11. Select Pie as chart type, toggle Show legend.
  12. Toggle Show values and then Show as percentage.
  13. Save the column settings.
  14. In the left pane click on the lock icon next to Columns section title. It will unlock the ability to place the same column more than once on the design surface of the form. We need that to show once as chart for the Display form and the regular grid for New and Edit forms.
  15. Drag our Tasks column to the form twice.
  16. Click on the first one and select Display as chart.

    Note that the column won't be displayed as chart unless this is activated, regardless of the chart settings being configured. It allows us to place multiple instances of the column on the form, with different permissions.
  17. Add a permissions rule for the chart version of the column to only show it in Display form

    Note that the corresponding Hidden rule is not needed, as it will be implicitly hidden when the Write rule doesn't apply.
  18. Do the same for the second instance, choosing New and Edit forms
  19. Publish the form and that's it! Now it will display as chart when read-only and editable in grid otherwise.

Note: SharePoint use service worker cache to store and serve pages and resources from a local cache. That can prevent the latest version of our script from loading and you won't be able to see the latest features in action. If that's the case, open F12, switch to Console tab, paste the following and click Enter, it will clear that cache:

caches.keys().then(function(names) {
for (let name of names)





Add your comment

Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to to open a support ticket.


Build powerful business applications in SharePoint using only your browser.
100% No-Code Solution

It's never been easier, to create, innovate and share, all you need is your web browser!


Address business process pain points immediately. Save time and money.

Fantastic Support Team

Facing difficulties installing the application? Contact our fantastic support team.

Related Topics

What is right for you?

Online Trial

Not ready to install yet? Create a trial site in our environment
  • Full control of the site and its settings
  • Optionally pre-install one of our solution templates
  • Site provisioned instantly
  • Automatically removed after 30 days
  • Available to everyone!


There was an error processing your request.
Please contact us for further details.


Install in your own environment, on Microsoft 365 and on premises
  • Start working with real users and data
  • Install online or on premises
  • Register for 30 day trial
  • Seemlessly convert to paid license
  • Requires administrator permissions


Download link has been emailed to .
If you do not receive it within 5 minutes, please check your spam.
The link is valid for 72 hours.
If you are having problems, please contact us.


There was an error processing your request.
Please contact us for further details.
Technical details:

Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.