Font size of Dashboard name and Dashboard pages names in OAC, OAS and OBIEE

I had 2 customers lately asking for similar advise: How to control the Font size of Dashboard Page and how to control the Font size of Dashboard header in Classic Analytics. The bellow was tested on OAC 5.8 and OAS 5.5. It should work on OBI as well.

Thanks to my friend Kfir Yehezkel from Credorax for most of the HTML code bellow.

By default, my dashboard looks like this:

The dashboard name is too long and doesn't fit and there was a request to increase the font of specific pages in Dashboards.

This is the result:

 

To clarify, there is no connection between the cases. Just similar code.

 

Checking the actual html code we can see the page font is controlled by masterH3 and dashboard font by MasterH1:

 

We want to make changes only for specific dashboards so we will do it with a script.

First make sure that HTML is enabled (Console/System Setting in UI or instanseconfig.xml file):

To make the font size of Dashboard smaller I inserted in a dashboard the following text box:

The code in my case was:

<script>
    document.getElementsByClassName("masterH1")[0].innerHTML =  '<font size="3" > this Dashboard has a rather long name, doesnt it?</font>'
</script>

where "this Dashboard has a rather long name, doesnt it?" is the dashboard name.

(actually it's this Dashboard has a rather long name, doesn&apos;t it?, since I wanted the apostrophe )

Now we can read it all:

Remember you have to do it in every dashboard page.

Similar script will be used when you want to control the Dashboard pages font size. You have to insert the following code in every dashboard page:

<script>
    document.getElementsByClassName("masterH3")[0].innerHTML =  '<font size="5" > page 1 </font>'
    document.getElementsByClassName("masterH3")[1].innerHTML =  '<font size="5" > page 2 </font>'
    document.getElementsByClassName("masterH3")[2].innerHTML =  '<font size="5" > page 3</font>'
</script>

where page 1, page 2, page 3 should be replaced by you actual page name.

To let you see the difference in font size I created pages with size 5,4,3 with slightly different code. Don't use it:

<script>
    document.getElementsByClassName("masterH3")[0].innerHTML =  '<font size="5" > page 1 </font>'
    document.getElementsByClassName("masterH3")[1].innerHTML =  '<font size="4" > page 2 </font>'
    document.getElementsByClassName("masterH3")[2].innerHTML =  '<font size="3" > page 3</font>'
</script>

 

 

 

If you prefer you can create the same as analysis and not as text in dashboard by using the Narrative option.   

 

 

 

P.S. Add some color to your life

By the way. If you are really bored, you can try changing the dashboard color as well, the Dashboard example:

<script>
    document.getElementsByClassName("masterH1")[0].innerHTML =  '<font size="3" ><span style=\"color:yellow\"> this Dashboard has a rather long name,  doesn&apos;t it?</font>'
</script>