Creating Layouts

The layout of a dashboard page contains grids to hold the gadgets and widgets selected for the page. The following layouts are available in the Analytics Dashboard by default.

If these layouts do not match your requirement, follow the procedure below to create a custom layout.

Layout configurations are saved in the  <PRODUCT_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/layout. Therefore, to create a custom layout, you should save the required configurations in this directory.

Follow the procedure below to create a custom layout.

1. Create a new directory in the  <PRODUCT_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/layout directory. This directory will serve as the parent directory of the custom layout.

2. Create the following resources and save them in the directory you created in the previous step.
   
    index.hbs file with the following configuration
   

   <div class="row">
           <div id="a" class="col-md-3 ues-component-box"></div>
           <div id="b" class="col-md-6 ues-component-box"></div>
           <div id="c" class="col-md-3 ues-component-box"></div>
       </div>
       <div class="row">
           <div id="d" class="col-md-6 ues-component-box"></div>
           <div id="e" class="col-md-6 ues-component-box"></div>
       </div>
       <div class="row">
           <div id="f" class="col-md-4 ues-component-box"></div>
           <div id="g" class="col-md-4 ues-component-box"></div>
           <div id="h" class="col-md-4 ues-component-box"></div>
       </div>

   layout.json  file with the following configuration

   {
       "id": "my-layout",
       "title": "My Layout",
       "description": "This is a sample grid",
       "thumbnail": "local://store/layout/my-layout/index.png",
       "url": "local://store/layout/my-layout/index.hbs"
   }

   The index.jpg thumbnail image below.
   

    

3. Refresh the Analytics Dashboard application. Now, you can view the new layout you created added to the list of available layouts as shown in the example below.