Skip to content

Latest commit

 

History

History
72 lines (67 loc) · 2.05 KB

Html.md

File metadata and controls

72 lines (67 loc) · 2.05 KB

Using qdt-components with a simple html page

This is a guide on how you can use qdt-components on a simple html page.

<head>
  <script type="text/javascript" src="qdt-components.js"></script>
</head>
<body>
  <div id="qdt1" style="width: 100%; height: 50px;"></div>
  <div id="qdt2" style="width: 100%; height: 400px;"></div>
</body>
  • Add the Javascript
<script type="text/javascript">
  const config = {
    host: "yourdomain.com",
    secure: true,
    port: 443,
    prefix: "",
    appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx",
    webIntegrationId, // SaaS webIntegrationId
    token // SaaS auth JWT token
  }
  const { qdtEnigma, qdtCompose, QdtSelections, QdtPicasso, useBarChartSettings } = window.QdtComponents;
  qdtEnigma(config)
    .then(app => {
      qdtCompose({
        element: document.getElementById('qdt1'),
        component: QdtSelections,
        app: app,
        options: {},
        properties: {
          qSelectionObjectDef: {},
        }
      });

      // Barchart
      qdtCompose({
        element: document.getElementById('qdt2'),
        component: QdtPicasso,
        app,
        options: {
          settings: useBarChartSettings({
            orientation: 'horizontal',
          }),
          height: 400,
        },
        properties: {
          qHyperCubeDef: {
            qDimensions: [
              { qDef: { qFieldDefs: ['Case Owner Group'] }, qNullSuppression: true },
            ],
            qMeasures: [
              { qDef: { qDef: 'Avg([Case Duration Time])', autoSort: false }, qSortBy: { qSortByNumeric: -1 } },
            ],
            qInterColumnSortOrder: [1, 0],
          },
        }
      });

    })
</script>

Template

https://github.com/qlik-demo-team/qdt-html-template