Wyn Enterprise: Customize the Layout of Dashboard

This page describes how to customize the layout of a dashboard when integrating the lite viewer component in the web application. For this, you need to first create a dashboard document through the dashboard designer.

  1. Add references to css and js files for the lite viewer component.

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Viewer Lite Demo</title>
      <!-- viewerLite css file -->
      <link rel="stylesheet" href="/dist/dashboard.viewerLite.css" />
      <link rel="stylesheet" href="/dist/dashboard.viewerLite.vendor.css" />
    
      <!-- your code in app.css -->
      <link rel="stylesheet" href="/static/app.css" />
    </head>
    
    <body>
      <main id="demo"></main>  
      <script src="/dist/polyfill.js"></script>
      <!-- viewerLite js file -->
      <script src="/dist/dashboard.viewerLite.js"></script>
      <script src="/dist/dashboard.viewerLite.chart.js"></script>
      <script src="/dist/dashboard.viewerLite.sheet.js"></script>
    
      <!-- your code in app.js -->
      <script src="/static/app.js"></script>
    </body>
    
    </html>
    
  2. Create the custom layout for the dashboard scenario.

    <main id="demo">
      <header id="header"></header>
      <div class="center-container">
        <div class="center" id="center"></div>
        <div class="center-scenario" id="scenario-0"></div>
        <div class="center-scenario" id="scenario-1"></div>
        <div class="center-scenario" id="scenario-2"></div>
        <div class="center-scenario" id="scenario-3"></div>
        <div class="center-scenario" id="scenario-4"></div>
      </div>
      <div class="left-panel" id="left-panel">
        <div class="left-scenario" id="scenario-5"></div>
        <div class="left-scenario" id="scenario-6"></div>
        <div class="left-scenario" id="scenario-7"></div>
      </div>
    </main>
    

    These HTML elements are used to connect and control the layout of the dashboard scenarios.

  3. Add app.css file with the following code.

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    
    #demo {
      overflow: hidden;
      height: 100%;
      position: relative;
    }
    
    .center-container {
      width: 1200px;
      height: 400px;
      border: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .center {
      width: 400px;
      height: 400px;
      margin: 0 auto;
    }
    
    .center-scenario {
      width: 300px;
      position: absolute;
    }
    
    #scenario-0 {
      right: 110px;
      top: 0;
      height: 120px;
    }
    
    #scenario-1 {
      right: 110px;
      top: 130px;
      height: 140px;
    }
    
    #scenario-2 {
      right: 110px;
      bottom: 0;
      height: 120px;
    }
    
    #scenario-3 {
      left: 120px;
      top: 0;
      height: 160px;
    }
    
    #scenario-4 {
      left: 120px;
      bottom: 0;
      height: 160px;
    }
    
    .left-panel {
      position: absolute;
      left: 0;
      top: 250px;
      bottom: 0;
      width: 300px;
    }
    
    .left-scenario {
      height: 200px;
    }
    
    #header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50px;
    }
    
  4. Create the dashboard lite viewer instance. Add the app.js file with the below code.

    const viewerLiteInstance = WynDashboards.createViewerLite({
      token: 'TOKEN_YOU_GOT_FROM_WYN_SERVER',
      baseUrl: 'WYN_SERVER_ADDRESS',
      dashboardId: 'xxxxxxxxxxxxxxx',
    });
    
    viewerLiteInstance.initialize({
      container: document.querySelector('#demo'),
    }).then((dash) => {
        // connect scenarios
    });
    
  5. Connect the dashboard scenario to the HTML DOM element.

     viewerLiteInstance.initialize({
    container: document.querySelector('#demo'),
    }).then((dash) => {
      // prepare scenario doms
      const centerDom = document.querySelector('#center');
      const headerDom = document.querySelector('#header');
    
      const scenarioDom0 = document.querySelector('#scenario-0');
      const scenarioDom1 = document.querySelector('#scenario-1');
      const scenarioDom2 = document.querySelector('#scenario-2');
      const scenarioDom3 = document.querySelector('#scenario-3');
      const scenarioDom4 = document.querySelector('#scenario-4');
      const scenarioDom5 = document.querySelector('#scenario-5');
      const scenarioDom6 = document.querySelector('#scenario-6');
      const scenarioDom7 = document.querySelector('#scenario-7');
    
      // prepare scenario model  
      const center = dash.getScenarioByName('pivotTable');
      const header = dash.getScenarioByName('richEditor');
      const scenario0 = dash.getScenarioByName('gauge');
      const scenario1 = dash.getScenarioByName('column');
      const scenario2 = dash.getScenarioByName('pie');
      const scenario3 = dash.getScenarioByName('pie-1');
      const scenario4 = dash.getScenarioByName('indicator');
      const scenario5 = dash.getScenarioByName('visual');
      const scenario6 = dash.getScenarioByName('labelSlicer');
      const scenario7 = dash.getScenarioByName('treeMap');
    
      // connect model on dom  
      center.connect(centerDom);
      header.connect(headerDom);
      scenario0.connect(scenarioDom0);
      scenario1.connect(scenarioDom1);
      scenario2.connect(scenarioDom2);
      scenario3.connect(scenarioDom3);
      scenario4.connect(scenarioDom4);
      scenario5.connect(scenarioDom5);
      scenario6.connect(scenarioDom6);
      scenario7.connect(scenarioDom7);
    
      // make dashboard render  
      dash.refresh();
    });
    

    Call the method getScenarioByName and you will get an instance of UIScenario. Scenario Name is the string that you set while creating a dashboard on designer.

    Finally refresh the page to get a dashboard with a custom layout.