Qlik core hello data

by Wuzhong Zhu

HTML

<html>

  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  </head>

  <body>
    <h1 id="title">Qlik Core + Enigma example 2</h1>
    <h2 id="subtitle">Loading csv into core</h2>
    <p id ="description">An example of loading csv file into qlik core. Just a fiddle version of the <a href="https://core.qlik.com/tutorials/hello-data/">hello-data example</a></p>
    <p id ="hashtags">#qlikcore #enigma #halyard</p>
    <br>
    
    <p id="msg">trying to connect</p>
    <script src="https://unpkg.com/enigma.js"></script>
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/halyard.js"></script>
    <script src="https://unpkg.com/halyard.js@1.3.0/dist/halyard-enigma-mixin"></script>
  </body>

</html>

JavaScript

const enigmaMixin = this["halyard-enigma-mixin"];
const Halyard = new halyard();
const moviesPath = 'https://raw.githubusercontent.com/qlik-oss/core-get-started/master/data/movies.csv';
const tableSchema = {
  name: 'Movies',
  fields: [{
      src: 'Movie',
      name: 'Movie'
    },
    {
      src: 'Year',
      name: 'Year'
    },
    {
      src: 'Adjusted Costs',
      name: 'Adjusted Costs'
    },
    {
      src: 'Description',
      name: 'Description'
    },
    {
      src: 'Image',
      name: 'Image'
    },
  ],
  delimiter: ',',
}
const moviesTable = new halyard.Table(moviesPath, tableSchema);
Halyard.addTable(moviesTable);

//Get enigma schema
$.get('https://unpkg.com/enigma.js@2.2.1/schemas/3.2.json').then(qixSchema => {
  //initiate an session on qlik core
  console.log('Creating and opening session using mixin.');
  const session = enigma.create({
    schema: qixSchema,
    mixins: enigmaMixin,
		url: "ws://ec2-18-218-199-158.us-east-2.compute.amazonaws.com:19076",
  });
  session.open().then(qix => {
    //session opened, create an session app using halyard
    console.log('Creating table data representation.');
    qix.createSessionAppUsingHalyard(Halyard).then(app => {
      //app created, do stuff


      console.log('Creating session object with movie titles.');
      const moviesCount = 10;
      const properties = {
        qInfo: {
          qType: 'hello-data'
        },
        qHyperCubeDef: {
          qDimensions: [{
            qDef: {
              qFieldDefs: ['Movie']
            }
          }],
          qInitialDataFetch: [{
            qHeight: moviesCount,
            qWidth: 1
          }],
        },
      };
      app.createSessionObject(properties).then(object => {
        object.getLayout().then(layout => {
          var movies = layout.qHyperCube.qDataPages[0].qMatrix;
          var text = "Listing the " +moviesCount+" first movies:";
          console.log(`Listing the ${moviesCount} first movies:`);
         ...