v7.0

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.

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>

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.

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

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
});

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.

Note: Dasobaord scenarios in Wyn Enterprise support Fit to Height and Width. The height and width of the dashboard scenarios are now adaptive to the user screen in the lite viewer. The changes are supported since Wyn Enterprise release version v6.0, Monthly Update 1.