Jump to content

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

Allison Stewart

Recommended Posts

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


Link to comment
Share on other sites

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>
Link to comment
Share on other sites

-- 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


<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>


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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...