Qlik SaaS Web Integration Notes

Qlik JS API.md

Summary of Qlik API

Capability API

Reference

Nebula.js

    import { embed } from '@nebula.js/stardust';
    import enigma from 'enigma.js';

    // Get Enigma APP
    const params = {
        "qlik-web-integration-id": '...', 
        "qlik-csrf-token": "..."
    };
    const enigmaGlobal = await enigma.create({ schema, url: `wss://${host}/app/${appId}?${params}`, }).open(); 
    const app = enigmaGlobal.openDoc(appId);
    // Create an nuked object  (see below ref)
    const nuked = embed.createConfiguration({ 
        // https://qlik.dev/apis/javascript/nebulajs-stardust#%23%2Fentries%2Fembed%2Fentries%2FcreateConfiguration
        context: {},       // https://qlik.dev/apis/javascript/nebulajs-stardust/#%23%2Fdefinitions%2FContext
        types: [],         // https://qlik.dev/apis/javascript/nebulajs-stardust/#%23%2Fdefinitions%2FTypeInfo
        thems: []          // Array<ThemeInfo>
    }  ).createConfiguration(  /*...*/  );
    // Init embed object https://github.com/qlik-oss/nebula.js/blob/016b6bd5c72c0d31c880d6b72bab7a2cde5ba49e/apis/nucleus/src/index.js#L128
    const EmbedObj = nuked(app);

    // Add selection toolbar
    //   https://github.com/qlik-oss/nebula.js/blob/016b6bd5c72c0d31c880d6b72bab7a2cde5ba49e/apis/nucleus/src/index.js#L273
    ( await EmbedObj.selections() ).mount(document.querySelector('.toolbar'));

    // Add field selector
    //   https://github.com/qlik-oss/nebula.js/blob/016b6bd5c72c0d31c880d6b72bab7a2cde5ba49e/apis/nucleus/src/index.js#L320
    ( await n.field('Year') ).mount(document.querySelector('#year-selector'), { title: "Year" });

    // Render a figure
    EmbedObj.render({
        type: 'barchart', // https://qlik.dev/libraries-and-tools/visualizations/bar-chart
        element: document.querySelector('.bars'),
        fields: ['Dim1', '=Sum(Expression1)'],
        options: {
            direction: 'ltr',
            freeResize: true,
            viewState: {
                scrollPosition: 25,
            },
        },
        // overrides default properties
        properties: { // bar-chart property definition     https://qlik.dev/apis/javascript/nebula-bar-chart
            color: { 
                mode: 'byDimension' 
            },
        },
    });

Field selector

The field id 'Year' is processed in ListBoxInline and useObjectSelections()

where the enigma model is the result of app.createSessionObject(definition) (doc) in useSessionModel.

When user use the search box in the widget, model.searchListObjectFor('/qListObjectDef', e.target.value) (src and src rpc of searchListObjectFor ) is called.

References:

• the internal nuked class
• createConfiguration
• List of figure types

Enigma

References:

• API doc