You might have wondered if you can link to sections on an Omni dashboard, half way or 2/3s of the way down the page or anywhere within. Yes you can!
This article will show how you can use markdown and text tiles, and anchor tags to link deeply anywhere on page, similar to how links on the web will take you to a section deep within a long article. This may be especially useful if you’re migrating from a tabbed product to Omni and flattening it into a medium / long single dashboard, and need users to be able to ‘skip’ to a specific section.
The HTML Basics
Before we get to the Omni specific recipe, let’s look at how these kinds of links work in HTML.
At the origin:
<a href="https://mypage.com/article#specific_section">Link to Subsection</a>
At the destination, somewhere in the page:
<div id="specific_section">
<p>Welcome to the specific subsection, maybe you got linked directly here...
....
</div>
The #specific_section element in the url tells the browser to find and jump to an html element within the page with the same id property. It can be the id of any html element, anywhere on the page.
The Omni trick
Now with the HTML recipe down, we should be able to simply recreate this on our dashboards. Omni supports HTML or Markdown Text tiles, and markdown viz. These should be able to act as either the <a href="....#specific_section" origin link or the id="specific_section" right?
Yes, but there is one additional thing to consider. When we submit html to Omni, it must be kept safe and prevented from interfering with the rest of the html in the dashboard.
Omni does this by prepending user-content- to the beginning of any html id parameters we supply. So our original link needs to take that into account.
Putting it all together in Omni
Step 1) Create a text tile somewhere on the dashboard and add the following HTML
<h1 id="specific_subsection">Specific Subsection</h1>
Step 2) Create a text tile at the top of the dashboard
Take note of the user-content- prefix added by Omni to our destination.
[Link to Section below](#user-content-specific_subsection)
This can be in simple markdown since we don’t need to target an html id parameter. But you can accomplish this with an anchor tag + href as well:
<a href="#user-content-specific_subsection">Link to Section below</a>
You’re done!
**Note: If your source link and destination are both on the same dashboard, you don’t need the full URL, and can simply have a “relative” link shown above. If the links are on different dashboards, you’ll need to use the full URL as shown in the video.