How to navigate to a specific visualisation in one page, not just to the page itself

[Allison Stewart]

Using Spotfire, I have a page that contains approximately over 10 different visualisations (scrolling page), is there some way where I can create a menu at the top of the page in which the user can click on the item of interest and be taken direct to the visualisation of interest.

Currently when I create an action using'Navigate to visualisation' it only takes the user to the page, not the specific visualisation.

Many thanks

Ally

[Allison Stewart]

Thank you, that is working well.

[Allison Stewart]

This solution works well for me in desktop, but when opened in web view (by other users) it fails. Any hints to overcome this

 

 

[Jose Leviaguirre]

Hello AllyS, you are right and corrected my reply with a slightly complex but more elegant solution; I just replaced the

<a href="#section1">

tags with:

<pre><code><button onclick="document.querySelector('#section1').scrollIntoView({behavior: 'smooth'});">section 1</button> <button onclick="document.querySelector('#section2').scrollIntoView({behavior: 'smooth'});"">section 2</button></code></pre>

[Allison Stewart]

Thanks Jose for the quick response but unfortunately the element 'button' is not supported. 

[Jose Leviaguirre]

-- Hmm... I see. That is because HTML sanitization is on or you are using the cloud version. Try using supported tags (e.g. a, div and span) and bind the onclick event with JavaScript; 

<a id='sec1btn'>Go to section 1</a>

Then use javascript to bind the onclick event to the sec1btn 

document.getElementById('sec1btn').addEventListener('click', function() { document.querySelector('#section1').scrollIntoView({behavior: 'smooth'})})

 Another way is to wrap the html code with the code tag and run a script to parse it

html

<code><button onclick="document.querySelector('#section1').scrollIntoView({behavior: 'smooth'});">section 1</button> <span onclick="document.querySelector('#section2').scrollIntoView({behavior: 'smooth'});">section 2</span>  : : <a onclick="document.querySelector('#sectionN').scrollIntoView({behavior: 'smooth'});">section N</a></code>

js

document.querySelector("code").innerHTML = document.querySelector("code").innerText 

Note: This work around only works when html sanitization is on. You can tell if html sanitization is on if it shows that some tags are not supported. Please be careful using this work around because the <code> tag might not be supported in the future.