17 Jul 2019

Dashboard builder in Collaborate

Product Filter HighQ Collaborate
Product Area Filter Home, Dashboards

The Home module

The Home module allows you to build a home page for users to be directed to. This home page can then be customised using the dashboard builder, to build a responsive home page layout with a simple point and click interface.

With the dashboard builder, you can quickly and easily build page layouts with multiple rows and columns without the need for complicated tables or any code.

As of our April 2024 release, ​​​​​​we are adding the siteID and the homePageID as classes in the CSS body, allowing for more targeted styling and ensuring that your custom styles are applied precisely to the intended pages or dashboards. This level of specificity prevents styling conflicts and enables a tailored visual experience across your site and its various components.

Please be aware that as of our October 2023 release, you will now be prompted when navigating away from the edit page to either save your changes (if any have been made), or to leave the page without saving your changes:

Please note that a slightly different message may appear depending on which browser is being used but all allow you to return and save your changes

This change will prevent the unintended loss of work when editing a dashboard.

All existing home pages will be automatically migrated to the new dashboard builder.

To start, navigate to the Home page, and click Edit in the top right-hand corner of the screen:

The Home page will now be displayed in Edit mode:

Dashboard name, columns and colours

Firstly, you can enter a dashboard name, (which will be displayed when viewing the Home module):

Now, you can select how many columns you want to display by clicking Column chooser:

Here, you can select whether you want 1, 2, 3 or 4 columns and also you have some additional layout options when selecting multiple columns, which allows you to select the width of the columns within the layout.

To select the background colour of the Home module, click Background colour to display a colour picker:

Sections and panels

Adding a section

Once you have set up how many columns you want and the colour settings, you need to add a new section. To do this, click Add section:

A new blank section will be displayed:

Removing sections

In order to remove a section, whilst in the section click Remove Section:

The Remove Section screen will be displayed:

If you click Remove all panels within a section will be removed. Click Save to save your changes.

Adding panels

Once you have added a section, you can add panels to it. To add a panel, click Add panel:

The Add panel screen is displayed:

From the Add panel screen, you can choose what information you want to have displayed on your Home page. Each panel is described in more detail in the Content editor section.

Editing a panel

In order to edit a panel, navigate to More actions > Edit for the panel you want to edit.

The Edit panel -  screen will be displayed:

Make any changes and click Save. Click Save again within the section, to fully save your changes.

Removing panels

In order to remove a panel, navigate to More actions > Remove for the panel you want to remove:

The Remove panel screen will be displayed:

Click Remove to remove the panel.

Content editor

The Content editor enables you to to add free text, images and embed videos into the panel. Click Content editor within the Add panel screen to display the Add panel - Content editor screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add the new panel. The new panel will now be displayed in your new section:

Data visualisation

Data visualisation allows you to visualise data already summed from an iSheet. In future releases, our visualisation tool will sum, count and aggregate data even if not already aggregated in an iSheet.

There is a limit to the data points that can be rendered on a dashboard and this is between 8,000-10,000 data points.   

This new panel allows you to select any iSheet from any site and choose a type of chart to display the information. There are 14 chart types to choose from, including pie charts, doughnut charts and multi-series, allowing you to find the best way to visualise your data.

The Data visualisation feature is a premium feature and will not be enabled by default. Contact your account manager for more information.

Click Data visualisation within the Add panel screen to display the Add panel - Data visualisation screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import information from.
  • Source - Here, is where you select iSheets to source your data from.
  • Display - Select whether you want this panel to display on a mobile device.

Once you have selected your source, additional fields will be displayed:

These additional fields are described in more detail below:

  • iSheet - Here is where you select the iSheet that you are going to import information from.
  • View - Here is where you select the iSheet view that you are going to import information from.
  • Chart type - Here is where you select the chart type you want to display your information in. There are 5 categories of chart, including Pie, Column, Bar, Line and Area.

Once you have entered all this information, a chart preview will be displayed:

The chart preview in our images has been filled with dummy information, just to give you an idea of what it will look like. 

Here, you will have to select a category and values to display in your chart. Once you have selected your category and value, your chart will be populated with the information:

In this screen, you can select pieces of the chart to highlight them specifically and you also drag and drop to change the orientation of the graph:

Once you have selected a category and value for the chart, the Customise tab will become accessible:

These fields are described in more detail below:

  • Chart title - This is the name that will be displayed for the chart.
  • Theme - Here you can select a theme for your chart. The theme basically changes the colours displayed in your chart.
  • Background - The background field allows you to change the background of the chart. You can either choose a colour or upload an image to have that displayed as the background.
  • Display legend - Here you can choose whether to display the chart legend at the bottom of the page, the right-hand side of the page, or not to display a legend at all.
  • Base font colour - Select whether you want this panel to display on a mobile device.

For advanced customisation, click Advanced customisation.

The Advanced customisation screen will be displayed:

Within the advanced options, you have the ability to change settings relating to:

  • Caption - Such as caption font size, colour and alignment
  • Background - Such as background colour alpha, background image alpha and image display mode
  • Chart border - Such as border colour and thickness
  • Number formatting - Such as number decimals and prefixes
  • Data values - Here you can choose whether to show values and also whether you want to show percentage values

The available advanced options that are displayed will differ from chart to chart.

Click Apply to apply your changes.

Click Add to add your new panel.

The panel will be displayed in your new section:

Types of panels

Activity panel

The Activity panel allows you to display site activity, within the Home module. Click Activity within the Add panel screen to display the Add panel - Activity screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import activity information from.
  • Items to display - This is the minimum amount of items you want to display in the panel.
  • Metadata - This allows you to select what metadata to display (e.g. Avatars and Site media etc.)
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel.

The panel will be displayed in your new section:

Task panel

The Task panel allows you to display tasks from a site, within the Home module. Click Task within the Add panel screen to display the Add panel - Task screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import task information from.
  • List - This is a list of each task list you can select from. This list is populated with the lists available from the site you have chosen.
  • Assignee - Use the assignee field to filter the tasks displayed to the selected assignee only.
  • Tags - Use the tags field to filter the tasks displayed to contain your selected tags. E.g., If you enter the tag 'Important task' - the only tasks displayed in the Home module panel will be tasks that contain the tag 'Important task'.
  • Due date - Use the due date field to filter the tasks displayed by due date.
  • Status - Use the status field to filter the tasks displayed by the chosen status.
  • Items to display - This is the minimum amount of tasks that will be displayed within the panel.
  • Order by - These fields determine the order the tasks are displayed within the panel.
  • Metadata - This allows you to select what metadata is displayed in the panel, e.g. Due date, Status etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel.

The panel will be displayed in your new section:

Event panel

The Event panel allows you to display events from a site, within the Home module. Click Event within the Add panel screen to display the Add panel - Event screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site  - This is the site that you will import event information from.
  • Category  - This allows you to select the specific categories that the events will be filtered by within the panel.
  • Author - Use the author field to filter the tasks displayed by the author of the tasks.
  • Tags - Use the tags field to filter the events displayed to contain your selected tags. E.g., If you enter the tag 'Important event' - the only events displayed in the Home module panel will be events that contain the tag 'Important event'.
  • Period  - Select the period of time you want to display tasks from. E.g. the last month, the next month or all upcoming etc.
  • Items to display - This is the minimum amount of events that will be displayed within the panel.
  • Metadata - This allows you to select what metadata is displayed in the panel, e.g. Date and time and location etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel.

The panel will be displayed in your new section:

File panel

The File panel allows you to display files from a site, within the Home module. Click File within the Add panel screen to display the Add panel - File screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import task information from.
  • Folder - Here you will select which folder the files you are going to display reside in.
  • Author - Use the author field to filter the files displayed by the author of the files.
  • Tags - Use the tags field to filter the files displayed to contain your selected tags. E.g., If you enter the tag 'Important file' - the only files displayed in the Home module panel will be files that contain the tag 'Important file'.
  • Period - Select the period of time you want to display files from. E.g. the last week, the last month or all, etc.
  • Items to display - This is the minimum amount of files that will be displayed within the panel.
  • Order by - These fields determine the order the files are displayed within the panel, e.g. recently updated, alphabetically etc.
  • Metadata - This allows you to select what metadata is displayed in the panel, e.g. Date and time and location etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel.

The panel will be displayed in your new section:

Blog panel

The Blog panel allows you to display blog posts from a site, within the Home module. Click Blog within the Add panel screen to display the Add panel - Blog screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import blog information from.
  • Category - This allows you to select the specific categories that the blogs will be filtered by within the panel.
  • Author - Use the author field to filter the blogs displayed by the author of the blogs.
  • Tags - Use the tags field to filter the events displayed to contain your selected tags. E.g., If you enter the tag 'Important blog' - the only blogs displayed in the Home module panel will be blogs that contain the tag 'Important blog'.
  • Period - Select the period of time you want to display blogs from. E.g. the last month, the last week etc.
  • Items to display - This is the minimum amount of blogs that will be displayed within the panel.
  • Metadata - This allows you to select what metadata is displayed in the panel, e.g. Avatars, Authors and Categories etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel. The panel will be displayed in your new section:

People panel

The People panel allows you to display all users from a site, within the Home module. Click People within the Add panel screen to display the Add panel - People screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import user information from.
  • Group - The group field allows you to select one specific group. Only users within the selected group will be displayed in the new panel.
  • Organisation - The organisation field allows you to select one specific organisation. Only users within the selected organisation are displayed in the new panel. If both a specific group and organisation are selected, the user must be a member of both.
  • Metadata - This allows you to select what metadata is displayed in the panel, e.g. Avatars, Contact number, Email etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel. The panel will be displayed in your new section:

RSS panel

The RSS panel allows you to display an RSS feed from a web site, within the Home module. Click RSS within the Add panel screen to display the Add panel - RSS screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Feed URL - Enter the URL of the feed that you want to display in the panel.
  • Feed title - Enter the title for the feed. Deselect the Use feed title check box to enter your own title, or use the feeds own title.
  • Items to display - This is the minimum amount of items that will be displayed from the RSS feed, within the panel.
  • Metadata - This allows you to select what metadata is displayed in the panel, e.g. Content snippet, publication date etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel.

Wiki panel

The Wiki panel allows you to display wikis from a site, within the Home module. Click Wiki within the Add panel screen to display the Add panel - Wiki screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import the wiki(s) from.
  • Parent - Here is where you select the parent wiki. All wikis within the select parent wiki will be displayed in your new panel.
  • Display as - You can choose whether the wikis are displayed in a list, or in a tree format.
  • Author - Use the author field to filter the wikis displayed by the author of the wikis.
  • Tags - Use the tags field to filter the wikis displayed to contain your selected tags. E.g., If you enter the tag 'Important wiki' - the only wikis displayed in the Home module panel will be wikis that contain the tag 'Important wiki'.
  • Period    Select the period you want to display wikis from. E.g. last month, last week etc.
  • Items to display - This is the minimum amount of wikis that will be displayed within the panel.
  • Order by - These fields determine the order the wikis are displayed within the panel. E.g. the most recently updated, or alphabetically etc.
  • Metadata - This allows you to select what metadata is displayed in the panel, e.g. Author, created date etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel. The panel will be displayed in your new section:

Tags panel

The Tag panel allows you to display tags from a site, within the Home module. Click Tag within the Add panel screen to display the Add panel - Tag screen:

The available fields are described in more detail below:

  • Panel title - This is the name that will be displayed for the panel.
  • Site - This is the site that you will import the tag(s) from.
  • Module - You can choose a specific module to display the tags from, or select all to display all tags.
  • Display as - You can choose whether the tags are displayed in a list, or in a cloud format.
  • Period - Select the period you want to display tags from. E.g. last year, last month, last week etc.
  • Items to display - This is the minimum amount of tags that will be displayed within the panel.
  • Order by - These fields determine the order the tags are displayed within the panel. E.g. alphabetically, ascending / descending etc.
  • Display - Select whether you want this panel to display on a mobile device.

Click Add to add your new panel. The panel will be displayed in your new section:

Once you have added your panels, please ensure you save your changes by clicking Save in the top right corner:

Your panels will be saved and displayed within the Home module of your site.

Preview

You can preview your Home module before saving it to make sure it looks how you want it to look. Navigate to Preview when editing your dashboard:

And select how you want to preview the dashboard.

You can select from either:

  • Desktop
  • Table portrait
  • Table landscape and
  • Mobile

A popup window will be displayed, showing you what the dashboard will look like in your selected window.

Was this article helpful?