+34 671518985 info@primecubeit.com
In this post we will show you how to hide specific dossier components o particular dossier level. We chose, as an example to hide a PDF export option from the context menu in both: edit and presentation mode). This can have various use cases. For example, it can be used to block the export option for dossiers with sensitive data information that the customer does not want to be passed via email.

As a base, we used the article from the famous Bryan blog. It guides you how to hide particular elements in dossiers and documents using jQuery. We added additional context to this script in order to able to hide position on drop down menus.

In order to apply our scrip, add an HTML container to a dossier and switch it to “HTML Text” mode.

And then copy and paste into it the code below:

<script>

$(document).ready(function() {

$(‘#mstr37‘).bind(‘DOMSubtreeModified’, function(){

//alert(‘success!’);

  $(‘a[class=”item exportPDF mstrmojo-ui-Menu-item”]’).attr(‘style’, ‘display: none !important’);

});

$(‘#mstr38‘).bind(‘DOMSubtreeModified’, function(){

// alert(‘success!’);

$(‘a[class=”item subexport mstrmojo-ui-Menu-item”]’).attr(‘style’, ‘display: none !important’);

});

});

</script>

You can see in the code that we have two bolded out names: mstr37 and mstr38. These are names of the div’s that are buttons to open the drop down menus. One comes from edit mode (mstr37) and the other one from presentation mode (mstr38). In order to make this script work, we need to make sure that the div names are correct and if needed substitute them with the names that you find in your own dossier. We will show you how to check names in chrome browser using the developer tools.

 

  1. Open the developer tool

2. Click on below symbol in the developer window

3. Hover over the menu that activates drop down menus and make a left mouse click

4. In the console below you can see the div element and the name field with which you should substitute the name in our script

5. Repeat the same steps for presentation mode

Now let us take a look at the code again and imagine that you want to hide another position on the menu: “Download dossier”.

<script>

$(document).ready(function() {

$(‘#mstr37’).bind(‘DOMSubtreeModified’, function(){

//alert(‘success!’);

  $(‘a[class=”item exportPDF mstrmojo-ui-Menu-item“]’).attr(‘style’, ‘display: none !important’);

$(‘a[class=”item download mstrmojo-ui-Menu-item”]’).attr(‘style’, ‘display: none !important’);

});

$(‘#mstr38’).bind(‘DOMSubtreeModified’, function(){

// alert(‘success!’);

$(‘a[class=”item subexport mstrmojo-ui-Menu-item”]’).attr(‘style’, ‘display: none !important’);

});

});

</script>

You can see in the code we added one new line:

$(‘a[class=”item download mstrmojo-ui-Menu-item”]’).attr(‘style’, ‘display: none !important’);

This line is exactly the same as the above one that hides the PDF menu, however we changed the class name inside. To get the corresponding class name, just repeat steps 1-4 from above.

And now the last hint on how to disguise our html container. In freeform dossier this would be quite easy, just cover it with any other dossier element. The trick could be used especially for regular dossiers. Just add this code to the existing HTML container and it will generate a title:

<p style=”padding-left: 8px;”>

<span style=”font-family: arial; “>

<strong>

<span style=”font-size: 13pt;”>

This is your new title

</span>

</strong>

</span>

</p>

 

 

If you are still using documents, this article would be useful, where you see how to hide elements in presentation mode using simple css.

Please let us know, in the comment section, if you have any questions or ideas of what you would like to read in the blog.

 

 

Share This