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

function goToPage2(){

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

}

//Listner

document.getElementById("goToPage2").addEventListener("click",goToPage2);

</script>

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

<input id="goToPage2"

type="button"

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(https://image.flaticon.com/icons/png/512/53/53567.png);

background-size:contain;

background-repeat: no-repeat;

background-position: center center;

-webkit-transform: scaleX(-1);

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

</form>

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!