Adding a Layout to a Page

Layout is the structure which defines how the dashboard components (gadgets and widgets) are arranged within a page. You can define a layout to the home page, which is named My Dashboard by default when creating a new dashboard, or to a new page when you are creating it. You can selecting it from the layouts that are available by default, or by adding a custom layout as described below.

Selecting a default layout

Following are the layouts available by default in the analytics dashboard of WSO2 DAS.

Creating a custom layout

Use the sample layout configuration structures in the <DAS_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/layout/ directory to create a custom layout. Add the following resources and create the configuration parent directory of your custom layout.

1. Add the layout format as shown in the example (index.hbs file) below.

   <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>

2. Add the layout definition as shown in the example (layout.json file) below.

   {
       "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"
   }

3. Add a thumbnail image (index.jpg) to display in the list of layouts in the analytics dashboard as the below example.
   
   
4. Refresh the analytics dashboard application.
   
   Now, you view the new layout you created added to the list of available layouts as shown in the below example. 
   You can add this custom layout to a page.