Integrate charts in modern SharePoint forms

Hi,

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)
caches.delete(name);
});

Enjoy!