Static Header with Scrollable Body - #MSTR #RSD

 Hi Guys,

There will be some situation where the client or UI/UX team have designed a dashboard which has a static header but the body should be scrollable. In one of the projects, there was the same requirement that I achieved with some workaround and I will be sharing that trick with you today.

So, to achieve that we may think of using a separate panel stack with a scroll for all body content. But there may be a case where you can't achieve that desired functionality with Panel stack. say for example, in RSD with grouping enabled and have a panel selector (panel stack is in body (i.e detail header) section) in the "document header" section, which will header of the document.

Let's jump into the trick to see, how we can make the static header with a scrollable body in RSD.

Check out the complete video:

Or Else below are the steps which you have to perform:

1. Include Document Header and Detail header (for body content) in the RSD.
2. Then format and include all the visualizations and objects in both the sections as per your design.
   
   
   
   
3. Then go to presentation mode and get the div id for the document header section till "t". So, the div id is dynamic with some portion after "t" and before "t" it is static. So, we can use that till "t" and we have to append "mstrApp.docModel.buildTime" to get the current document execution time.
   
   
   
   
   
4. Then include one HTML container in the Body section and copy the below code by replacing the div id and paste it.
   
   
   
   
   

Code:

<script> 

   var time = 500;

    function makeStaticHeader()

    {

      

       var layoutChildCount = document.getElementsByClassName('mstrmojo-DocLayout')[0].childElementCount;

       

       if(layoutChildCount == 2) // if you have more than 2 section included in th RSD then change it to that number

       {

        

         var header = document.getElementById('*lK3*kK4*x1*t'+mstrApp.docModel.buildTime); // take the div Id of document header section by inspecting it till “t” and post that use mstr classes to get the build time dynamically which is “mstrApp.docModel.buildTime” .

        document.getElementsByClassName('mstrmojo-DocLayoutViewer ')[0].children[0].appendChild(header); // just append the header div to outside of 'mstrmojo-DocLayout'

        var headerleft = document.getElementsByClassName('mstrmojo-DocLayout')[0].style.left; // as we append the div to new place its top and left position we have to set by taking left of 'mstrmojo-DocLayout'

        document.getElementById('*lK3*kK4*x1*t'+mstrApp.docModel.buildTime).style.left=headerleft; //set the left position to document header section div

        document.getElementsByClassName('mstrmojo-DocLayout')[0].style.top="0px"; // and set the top as 0 to document header section div

      }

      else

      {       

        time = 200;

        callStaticFun();        

      }

    } 

    function callStaticFun()

    {

      setTimeout(function(){     // we are setting some stop time for the below code to execute as it needs to get the objects with its id, then the objects need to load and then this code should execute.

      makeStaticHeader();

      }, time);

    }

    callStaticFun();

 </script>

Hope it will help in your projects.