Help Guide

Welcome to SharePoint Dashboards!

Making awesome looking dashboards is fun. This tool allows you to do that easily!

Browse the templates by using the dropdown in the upper left.

There are two kinds of templates: column templates and view templates.

If you are new, start with column templates. These are simple and easy to understand.

Start by selecting a simple template like Column - Button / Edit.

In this tool, click the yellow Copy code to SharePoint button.

In your SharePoint list view, select the Format this column option as shown:

In the side panel, click on Advanced mode:

Last, paste the formatting code then save:

View templates, work in a very similar way.

In your SharePoint list view, click the view selector dropdown then select Format current view as shown:

As with column formatting, click Advanced mode, paste the code to the window, then save.

Note that view formatting overrides column formatting. So use that only if you are not using any column formatting.

Intro Video

Login Troubleshooting

Access the login page here.

Some users may find that they don't see the standard login prompt as shown below.

This many be due to a security setting in your browser or your organization may be blocking it.

First try using a different browser, then try logging in outside of your network environment.

If the login prompt is blocked in your network environment, submit a help request to your IT support.

Request that ports 2082 and 2083 are opened for

SharePoint Version Compatibility

SharePoint list and column formatting is supported for specific versions of SharePoint Only. All templates will work for SharePoint Online and SharePoint Server Subscription Edition (2022+). Some templates will work for SharePoint 2019. Earlier versions of SharePoint are not supported. Compatibility is noted in the template notes section at the top as shown:

SharePoint 2019 has limited support due to the fact that it does not support Excel-style expressions. Users must instead rely on Abstract Syntax Tree expressions which are not used in templates on this site. You can read more about both on this page.

Column Width Resize

In many cases you will need to change the width of columns in your modern list view.

This can be done in three steps as shown.

1. Click between the column headers and drag the width using the handle control.

2. Click on the list view dropdown.

3. Edit the current view then click save on the next screen.

SharePoint Charting Complete Training

SharePoint Dashboards offers a Complete Charts Training Program.

Learn by doing hands on step by step training with examples.

» All training content can be accessed here.

Charting - Data Aggregation

Chart Templates tagged with (1 Row) render a chart from a single list record like this:

If you have multiple rows, a chart will be rendered for each row.

Often, you need to take additional steps to aggregate your data. There is more than one way to do this.

The most efficient and advanced approach is shown in this video:

A simple approach which involves manual updates takes advantage of List View totals functionality.

To get count, average, max, min, sum or variance for a list, you can use the Totals option in the list view settings::

This will show you aggregated values at the bottom of your list view:

You will need to copy these values to a different list where each of these values are stored in one row.

A more advanced automated approach is to use a Microsoft Power Automate Flow to automatically perform the calculations and update the target record. This can be triggered manually or on a reoccurring schedule.

In your Flow, create a variable to store each aggregated total:

Use the Get Items function to access the list which contains the data:

Use an Apply to each block and the increment function to update the variables for each record:

Last, create or update a summary record which will be used to render the chart. Pass along the aggregated values stored in the variables:

SharePoint Field Names

Many SharePoint Dashboards templates require references to the SharePoint Fields in your list. When fields are created in SharePoint lists, a SharePoint Internal Field Name will be created. This will never change after the field is created - even if you rename the field. The external field name can be changed at any time, but it will not change the internal field name. Sometimes the internal field name is predictable, in other cases it is not. For example, spaces in the field name are replaced with "_x0020_". The templates tool automatically accounts for this situation replacing spaces with this character string.

All SharePoint lists have pre-existing built-in fields such as the Title field. Some of these have special internal field names:

The Created By field has an internal field name of Author.

The Modified By field has an internal field name of Editor.

It is recommended to always create fields from the list settings screen instead of from the modern list view. If you create fields from the list view, SharePoint will use a different naming pattern for the field.

If you encounter issues with a template seemingly not working, check the internal field name(s) from the list settings screen.

You can get to list settings by clicking on the gear icon in the upper right corner of your screen.

Click on the field to access the column settings, then examine the end of the URL at the top of the page. This is the internal field name. As long as you reference this in the SharePoint Dashboards template, everything should work as expected. Note that you do not need to use the "_x0020_" when referencing the field since the templates tool automatically handles spaces doing a string replacement for you in code.

In the below example, the Internal Field name is "Renewal_x0020_Date" and the external field name has been changed to "Renewal". In the SharePoint Dashboards Template screen, this field would be referenced as "Renewal Date". The template tool will automatically convert this to the correct internal name "Renewal_x0020_Date".

Placeholder Field

When using column formatting it is often the case that you need a column to hold a button or content without referencing any field values. In this case, you only need to have a column set aside to hold the content.

You can simply create what can be described as a Placeholder Field that won't be used to store any data. A simple text field will work fine, but the downside is that users will be prompted to enter data for the field even though you don't intend for anything to be entered.

A better approach is to use a Calculated Column.

Create a Calculated Column and use ="Placeholder" (or similar) in the formula section. It doesn't matter what you use for the formula, but you must have a formula. Name the column whatever you want to appear on the list view header.

Using view settings, select the column to be shown in your view, then format the column using the normal process.

Because this is a calculated column, users won't be prompted to enter data for this field.

Lookup and People Fields

Person fields and Lookup fields can be used in cases where text fields or choice fields are otherwise expected.

In this case the field references should be appended with an additional attribute.

For Person fields, add .title

For example, a People field called Manager would be referenced as Manager.title

For Lookup fields, add .lookupValue

For example, a Lookup field called Customer would be referenced as Customer.lookupValue

In the SharePoint Dashboards template settings it should look like this:

Forms Templates

Forms can be customized through a settings menu in the display form. You can most easily get to this panel by clicking the title field which is the first field display by default in the list view. Click on the small icon in the upper right then click Configure layout as shown:

Templates can be applied in 3 parts of the form Header, Body or Footer. Select the section to be customized then paste in the template code:

Hide Columns from Form

In some cases you may need to hide fomatted columns from the SharePoint form.

Some formatting templates are intended to work only in the context of the SharePoint list view.

You must first make sure that any column that you want to hide from the form is set not required in the field settings.

Begin by clicking on the Title field to open the list record display form. Next click on the form settings dropdown and select Edit columns.

Uncheck the columns that should be hidden from the form then click Save.

When your users access the form, these fields will no longer be displayed.

The fields will only be accessed from the list view.

Read more here: » List form show and hide fields

Custom Icons

SharePoint Dashboard Maker comes with a large set of custom icons which you should download named icons.

The Animated Progress Bars template requires downloading the animatedbars image set.

The Animated Warning Icons template requires downloading the warning image set.

The Analog Clock template requires downloading the clock image set.

First unzip the files on your local computer, then upload the full directory to your SharePoint site in the Site Contents / Site Assets directory.

This is required in order to use any of the formatting examples with custom icons.

The icons directory contains these subdirectories:

Note that there is a folder named myicons which you can use to load any of your own custom icons.

The Microsoft Fluent UI icons do not require these images. These are already incorporated into SharePoint.

This is an example of how your Site Assets directory will look with some image directories loaded:

Image Blocking

Images from outside of SharePoint are blocked by default.

In order to use many templates, you must disable this security blocking so that images load as expected.

Image source security is described here.

For each site where you want to use image based dashboard templates, you must:

  1. Go to Site Settings
  2. In the section "Site Collection Administration" select HTML Field Security.
  3. Select the option Allow contributors to insert iframes from any domain then click OK.

More detailed information from Microsoft here

Copy List Item Flow

The "Copy Item Button" template requires a Flow to be created as described below.

Follow these steps before setting up your button.

Begin by logging in to Power Automate.

Click + Create link on the left navigation.

Click Automated cloud flow.

Click Skip.

In the search box type selected item.

Click the For a selected item option below.

In the upper left click in to the Flow name and enter Copy List Item.

Select the Site Address and List Name.

Click the + New step button.

Type get item then click Get item below.

Select the Site Address and List Name.

Next select the For a selected item ID from Dynamic content.

Click Save.

Click the + New step button.

Type create item then click Create item below.

Select the Site Address and List Name.

Select the matching field names from Dynamic content options.

Append the text " - COPY" to the Title field as shown. Click Save.

Click the back arrow next to the Flow name in the top bar.

Get the unique Flow ID from the URL as shown.

The Flow ID is the string of characters immediately after /flows/ in the URL.


List views can be printed from the browser either to the printer or as a PDF file. As long as the width of the view on the screen isn't too wide, then the content should show without issues.

The Print Grid template is specifically designed to faciliate list view print output.

The settings vary slightly depending on which browser you are using.


1. Open the print dialog from your brower. (Ctrl + P on a PC / Command + P on a Mac)

2. Pick your destination (either printer or PDF), set the Layout to Landscape and use Color printing.

3. Open the More settings section and disable Headers and footers and enable Background graphics.

You can make further adjustments to other print settings, but normally this should not be necessary.


1. Open the print dialog from your brower. (Ctrl + P on a PC / Command + P on a Mac)

2. Pick your Printer option (either printer or PDF), set the Layout to Landscape and use Color printing.

3. Open the More settings section and disable Headers and footers and enable Background graphics. Set the Scale as Fit to printable area.

You can make further adjustments to other print settings, but normally this should not be necessary.

Print CSS

When using the print method above, some elements can still appear that you do not want on the print output.

Using some custom CSS will suppress elements that appear in the list header such as filter settings.

Use the below CSS to force these elements to be hidden in print output:

@media print{
.od-ListTitle-heading {
display: none !important;
.od-filtersHeader {
display: none !important;

In order to load custom CSS to your SharePoint environment, you must be a SharePoint Admin and also be familiar with adding applications to the App Catalog in your SharePoint environment. A custom application which allows you to load a global CSS to SharePoint Online is provided along with instructions here:

List Templates

Some SharePoint Dashboards templates have a corresponding list template file that can be downloaded. This is a file with an ".stp" file extension. The SharePoint Dashboard template notes will indicate whether it is optional or required to use this file.

You can download the corresponding list template ".stp" file by clicking on the link in the notes section.

The next step is to load the template to the List Template Gallery which is linked from the Site Settings screen under the heading Web Designer Galleries.

If you don't see the Web Designer Galleries heading you will have to perform some additional steps. In this case, you need to enable custom scripting for this site.

Follow these instructions to get connected to SharePoint Online Management Shell.

In SharePoint Online Management Shell as an admin, you first log in using a command in this format (switch "MYDOMAIN" to your own domain):

Connect-SPOService -Url

Next you need to enter in this command (adjust MYSITEURL to the URL of your site):

Set-SPOSite MYSITEURLHERE -DenyAddAndCustomizePages 0

You will know that the command executed correctly if there is no error message displayed.

Now you will see the expected options appear in your site settings screen.

The gallery screen looks like this:

Upload the provided template by clicking Files » Upload Document » Choose the file » Click OK.

Now this list template will be available for creating new lists in your site.

To create a list from the template, go to the Site Contents and click on "Return to classic SharePoint" in the lower left corner of the screen. You won't be able to access the template unless you switch to this mode!

Click add an app then scroll through the options until you see the template option you just added.

Select that option then name your list whatever you like and click create.

Last, click the link in the lower left Exit classic experience.

You can read more about SharePoint List Templates here

Modern List Templates

Modern list templates can be provisioned to be accessible across your SharePoint Online tenant.

This could be especially useful when using view formatting templates that are popular. You can make these easily accessible and repeatable across your entire SharePoint tenant. Setting up a template in this way allows all of your users to recreate the template with only a few clicks!

You must be a SharePoint administrator in order to do these steps.

In PowerShell (Run as Administrator), you first log in using a command in this format (switch "MYDOMAIN" to your own domain):

Connect-SPOService -Url

Note that in order for users to be able to access custom templates each target site must have custom scripting enabled. If this is not enabled, only the Microsoft out-of-the-box options will be displayed. Enable custom scripting using this command (adjust MYSITEURL to the URL of your site):

Set-SPOSite MYSITEURLHERE -DenyAddAndCustomizePages 0

Prepare a 400px x 200px picture which will be used as thumbnail in the user interface. Load this to the documents libary in your root SharePoint site. You will reference the URL of this picture below.

Determine a color to be associated with the list in the UI from standard Microsoft colors. Here are the values to pick from: DarkRed, Red, Orange, Green, DarkGreen, Teal, Blue, NavyBlue, BluePurple, DarkBlue, Lavendar, Pink.

Determine an icon to be associated with the list from Microsoft fabric icons. You need the name of the icon from this tool.

Enter this command to set your source sharepoint list from which the template will be created. Copy and paste your FULL list url in the code snippet shown.

$sourcelist = Get-SPOSiteScriptFromList -ListUrl "FULL-LIST-URL-HERE"

Enter this command to fully define your script which will be executed in the next step. Swap in your own title and description:

Add-SPOSiteScript -Title "THE TITLE TO SHOW FOR THE LIST" -Description "THE DESCRIPTION TO BE SHOWN FOR THE LIST" -Content $sourcelist

After entering this command, the interface will show you an ID in the response which you should copy and past for the next step.

(The ID will look something like this: 48842591-8f89-4fg2-b335-af5323ae8919)

Now you can execute the final command which will add your custom list template to the SharePoint interface. Swap in options as shown:


Check your interface to see the result. Your new template will appear in the "From your organization" tab. Here is an example:

You can query for existing list designs in the case that these later need to be removed with the below command. In particular this is helpful to get the ID value needed for additional commands.


A previously installed List Template can be removed using this command:


Additional Resources Links