Page Comparison

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.

...

Use the sample layout configuration structures in the <DAS_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/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.

   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.
   Image RemovedImage Added
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 new dashboard or to a new page.