Tags:
• Creator

In this article

1. Link Options
2. Link to other Dashboard Pages
   • Custom Link
   • HTML Editor
3. Link to Documents or Websites
   • Custom Link
   • HTML Editor
4. Link to a Harmoni project
   • Custom Link
   • HTML Editor
5. Link to a Story View
   • Custom Link
   • HTML Editor

1. Link Options

There are two methods to create links in dashboards.

• Custom Links: Using absolute links (the full URL), you can make any container clickable by entering a URL into the link field or accessing the link icons to add a link to a dashboard page or project.
• HTML Editor: Accessed via the the text container, you can easily link to other items. The editor allows you to use relative links (a link that is relative to the current site). It also facilitates advanced styling and functionality, and can be helpful for nested navigation such as drop-down menus. Using the HTML editor requires HTML and CSS knowledge.

Using these two options let's look at the way to link to dashboard pages, documents or websites, Harmoni projects and story views.

2. Links to other Dashboard Pages

To navigate across your dashboard pages, containers can also be used as link buttons.

Link to a Dashboard Page - Custom Link

1. Select the container you wish to use as a link button
2. In the General settings menu expand Link
3. Next to Custom Link, you will find the dashboard page icon
4. Click the icon to choose a dashboard page from the available list
5. Once you select a dashboard page link, the dashboard name will auto-fill in the Custom Link field
6. Save your changes and test the link

• In edit mode, select the container
• In settings under Link, click the dashboard link icon
• Select a dashboard page from the list
• Save and test the link

Link to a Dashboard Page - HTML editor

To access the HTML editor, you must use a Text container.

1. Copy the dashboard URL you want to link to
2. On your the dashboard page, select the Text container to use as a link button
3. Select Edit HTML, then add a hyperlink using the dashboard ID
4. Save your changes

When linking within the same Harmoni site, use relative links formatted as below:

• Link by dashboard ID
  <a href="../SiteName/#/dashboard/My_Dashboard_ID"> your label </a>

Based on the example URL below, you can use this relative link using ID: ../Ipsos%20Play/#/dashboard/37

• In edit mode, select the text container and click Edit Html
• Add the link
• Click SUBMIT and save the dashboard
• Click the text in the button to go to the other dashboard page 

Note: You need to click the linked text itself to navigate. The link is applied only to the text within the <a></a> tags. If there is no text in the container, the whole container will work as a hyperlink.

If you want the dashboard page to open in a new tab, add target="_blank" into the code. Using the example displayed in the screenshot above, the HTML code would look like this:

<a href="../Ipsos%20Play/#/dashboard/37" target="_blank"> your label </a>

Download the Dashboard Showcase page to see how to style a link.

Dashboard Sample Page.PAGE

Link to Dashboard Page with Global Filters - HTML Editor

If you want to link to a dashboard page with Global Filters enabled, you can add the global filter to the URL using a relative link within the same Harmoni site: 
<a href="#/dashboard/My_Dashboard_ID/gfilter:GAxis.GElement"> your label </a>

For example, to link to the dashboard with the axis set to Top 10 Markets and filter by the element Australia: 
<a class="aus-btn" href="#/dashboard/60/gfilter:Top 10 Markets.Australia">GF Australia</a>

3. Link to Documents or Websites

Containers can also be used as buttons to link to documents and other external content.

• As opposed to embedded content, PDF documents and websites open in a new window.
• Microsoft Office documents download for viewing with a local license.

Link to a Documents or Websites - Custom Link

Documents must be uploaded through our hosting platform first. Please contact support@infotools.com  for more information. Once the content is loaded and Support has provided you with the URL, follow these steps:

1. Select the container you wish to use as a link button.
2. In the General settings menu go to Link.
3. In the Custom Link field, enter the file or website address.
4. Save.

The link field must include the site address, file location, and name.

• Example of a file hosted in Harmoni: https://eu.harmoni.online/Sites/SiteName/itl_data/Resources/FileName.PDF
• Example for a website: https://www.google.com

• In edit mode, select the container and expand Link
• Enter the URL into the Custom Link field
• Save
• Click the link button to access the document or website

Link to a Documents or Websites - HTML editor

To access the HTML editor, you must use a Text container.

1. Select the text container you wish to use as a link button.
2. Select Edit HTML.
3. Enter the path to the relevant document or website. To link to a document, you need to specify the site: <a href="../SiteName/FileDirectory/FileName">your label</a>
4. Save.

In this example, the site name is Ipsos Play. In hosting, the file is saved under the itl data resources folder, and the document name is Harmoni User Guide.PDF. We also want the label for the container to be Link to Documents or Websites.

• In edit mode, select the container and click Edit Html.
• Add the required html code
• Click on SUBMIT and save changes.  

4. Link to a Harmoni Project

While Creators and Explorers can always access projects shared with them via the PROJECTS menu, adding links to a dashboard page can be a valuable shortcut.

Remember that while the link may be available on the dashboard page, Viewers can't access the project tree and that you must share the project with Explorers and Creators for them to access it.

Link to a Harmoni Project - Link Project Name

1. Select the container you wish to use as a link button.
2. In the General settings menu go to Link.
3. Next to Custom Link, you will find the project icon .
4. Click the icon to choose a project from the available list.
5. You can also enter 'Project Name.project' into the link field.
6. Save.

• In edit mode, select the container
• In the General settings menu expand Link
• Click the project link icon and select a project from the list
• Or, enter 'project name.project' in the link field
• Save and test the link

Link to a Harmoni Project - HTML editor

To access the HTML editor, you must use a Text container.

1. Open the project you want to link to and copy its URL.
2. Select the text container you wish to use as a link button.
3. Click on edit HTML,
4. To link to the project you need to specify the site and project:
   • <a href="../SiteName/#/project/My_Project_ID ">your label</a>
5. Save.

Note: The project URL displays the project ID and not the project name.

Based on the example URL below, you can use this relative link: ../Ipsos%20Play/#/project/100

• In edit mode, select the container and click Edit Html
• Add the required html code
• Save and test the link

Share a link using the site URL

As an additional benefit, a project owner might simply publish to a new user (Explorer or Creator) then immediately provide them a direct link to it using the same suffix format.

When sharing the link, simply use the URL of your site, with the appended suffix shown in bold:

https://eu.harmoni.online/Sites/Ipsos%20Play/#/project/100

5. Link to a Story View

You can also add links to story views. Keep in mind that only users with whom you have shared the story can access it.

Link to a Story View - Custom Link

1. Select the container you wish to use as a link button.
2. In the General settings menu go to Link.
3. In the Custom Link field, enter the full URL to the story view.
4. Save

For example, https://eu.harmoni.online/Sites/SiteName/#/storypage/814

Learn more about how to find the link to your story view.

• In edit mode, select the container.
• Go to Link, paste the Story URL in the Custom Link field
• Save and test the link.

Link to a Story View - HTML editor

To access the HTML editor, you must use a Text container.

1. Select the text container you wish to use as a link button.
2. Click on edit HTML
3. To link to a story view, you need to specify the site and view:
   • <a href="../SiteName/#/storypage/My_Story_ID ">your label</a>
4. Save.

In this example, the site name is Ipsos Play, and the story view id is 814. We also want the label for the container to be Link to Story View and so we can specify the story URL to be: ../Ipsos%20Play/#/storypage/814

• In edit mode, select the container and click Edit Html.
• Add the html code
• Save and test the link.

Where to from here?

Learn more about Dashboards:

• Display Media Items in Dashboards
• Dashboard Design
• Dashboard Containers