top of page

Custom Page Navigation for Dossiers - MicroStrategy

There are times when you need to navigate to specific Dossier page within the same dossier but cannot expose the page/chapter navigation. A good example is an embedded dossier. With the URL API you can already open a dossier to the desired page but it requires the entire dossier to run again! In the method below I'll outlined how to implement custom buttons in a dossier to navigate between pages without reloading the dossier.

First let's take a look at the dossier below. It has two pages.

We know If we click the page, the dossier will navigate to that page. We need to find what the page element is so we can trigger that event. To do that i'll open developer tools and identify the element.

Now I know that the page element is "item unit icundefined". Using javascript I can trigger a click on the page element using the code below. Keep in mind the 1 reflects the second node (page) in the array because arrays are zero based. This means page 1 = "0" and page 2 = "1"

document.getElementsByClassName("item unit icundefined")[1].click()

Now I know the trigger click works so I need to create 3 things in an HTML container.

  1. The Javascript Function which will trigger the click

  2. An Event listener to trigger the click

  3. A Button for user interaction.

First lets create an HTML container.

Select the HTML text option and then place the code below into the HTML container. I've already placed some formatting on the button.

<script language="Javascript">


function goToPage2(){

document.getElementsByClassName("item unit icundefined")[1].click()





<form name="goToPage2Form" style="box-sizing: content-box;height: -webkit-fill-available;">

<input id="goToPage2"


style="border-width: 0pt;

border-style: solid;

border-color: rgb(221, 221, 221);

height: -webkit-fill-available;

width: 100%;

cursor:Pointer; cursor: hand;

font-family: 'Tahoma';

font-size: 7.0pt;

font-weight: normal;

font-style: normal;

background-color: transparent;

background-image: url(;


background-repeat: no-repeat;

background-position: center center;

-webkit-transform: scaleX(-1);

transform: scaleX(-1);"></p>


Click the button and navigate to Page 2 of the dossier. See the video below a demo.

To add a back button remember to replace the "goToPage2" with "goToPage1" and trigger a click on "0" instead of 1. If you want to "flip" the current button image, remove the last two transform scale formatting options in the button code.

And that's it!


Thanks for checking out this blog post. If you found this post helpful please consider donating via PayPal. Any contribution is appreciated!

5,324 views4 comments

Recent Posts

See All

4 ความคิดเห็น

Hi Omar, unfortunately your script does not work for the library. Do you have a solution for this as well?


Timothy Ades
Timothy Ades
19 พ.ย. 2564

Hi Omar. Great article, and interesting!

However, do you know if there's a way to achieve this whereby the Buttons/links/etc. appear in a table cells?

I can use the HTML Tag datatype in table cells, but am having difficulty getting it to work the same as a HTML container. Maybe use a HTML container to hold the javascript (as you describe in other posts), then call the javascript via a link in a table? Any help would be very much appreciated.

Thanks, Tim


Nera Majer Šegulja
Nera Majer Šegulja
12 ก.ค. 2564

Hi Omar! Does the same work between Chapters?


Vignesh .s
Vignesh .s
05 ส.ค. 2563

Hi Omar, I got a requirement similar to this customization, but the change is user prefer to use drop-down selector to toggle between more than one page rather than button. Could you please help me on this request.

bottom of page