Page Comparison

...

Anchor
Selecting a default layout Selecting a default layout

Selecting a default layout

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

...

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

   Code Block
   language js
   <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.

   Code Block
   language js
   { "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.