How to handle data using enigma and nebula.js?

[cristian_dalsanto]

Hello,

I'm testing mashups using Enigma and Nebula.js in a Angular application.

The goal is to create a mashup using more modern framework than AngularJS, but I have to replace Capabilities API. I was able to replace getObject of Capability using Nebula.js embed function. I also managed the hypercube creation, using enigma.js

The problem is: how should I do to handle data binding? With capabilities API there was a callback in the creation of the hypercube. There's a similar method in enigma too? 

I only found how to trace every call through enigma session, but it's not helpful...

enigmaSession.on('traffic:received', (data: any) => console.log('received:', data));

Here a snippet of my code:

async function createHypercube(enigmaApp: any, hypercubeDef: any) {

try {

const sessionObj = await enigmaApp.createSessionObject(hypercubeDef);

const hypercubeData = await sessionObj.getLayout();

return hypercubeData;

} catch (error) {

console.error(error);

}

}

Thanks a lot for your kind help...

Cristian

[cristian_dalsanto]

Hi all, 

I think this could be a solution.

This is the function I use to get hypercube:

getInitialHypercube(hypercubeDef: any): Observable<any> {

return new Observable(observer => {

try {

this.qlikApp.createSessionObject(hypercubeDef).then((hypercube: any) => {

hypercube.getLayout().then((layout: any) => {

console.log('Initial hypercube layout:', layout);

observer.next(layout.qHyperCube.qDataPages[0].qMatrix);

});

hypercube.on('changed', () => {

hypercube.getLayout().then((layout: any) => {

console.log('Updated hypercube layout:', layout);

observer.next(layout.qHyperCube.qDataPages[0].qMatrix);

});

});

});

} catch (error) {

console.error(error);

observer.error(error);

}

});

}

and this is the snippet of code in angular component that uses the method:

this.qlikproviderservice.getInitialHypercube(this.HYPERCUBEDEF).subscribe(data => {

console.log('ypercube data:', data);

this.hypercubedata = data;

});

I'm still testing, but at the moment, when I apply a selection, this.hypercubedata get filtered data...

[Jeffrey_Goldberg]

Hey @cristian_dalsanto , have you tried using qlik-embed and qlik-api?

These are the modern equivalents of Capability API for Qlik Cloud and Qlik Sense Client Managed May 2024 and beyond.

Here's a getting started for qlik-embed: https://qlik.dev/embed/qlik-embed/

Here's the typescript types for qlik-api: https://github.com/qlik-oss/qlik-api-ts

and regarding getting hypercube data I've created a replacement function for app.createCube.

async function createCube(hyperCubeDef, callback) {
  const app = this;
  const okFunc = await callback
    ? async function(data) {
      await callback(data, app);
    }
    : function() { };

  const theData = await app.createSessionObject(hyperCubeDef);
  let dataLayout;

  theData.on("changed", async () => {
    dataLayout = await theData.getLayout();
    await okFunc(dataLayout);
    return theData;

  });

  return theData;
}

export { createCube };

and then to use it:

<script type="module">
    import { auth, qix } from "https://cdn.jsdelivr.net/npm/@qlik/api@1/index.js";
    import { createCube } from "./qlik-nu-capabilities.js";
    
    auth.setDefaultHostConfig({
      host: "<hostname to qlik cloud or CM server>",
      authType: "Oauth2", //see docs on qlik.dev for CM auth types
      clientId: "<For use with OAuth2 in Qlik Cloud",
      redirectUri: "manage OAuth2 session",
      accessTokenStorage: "session",
      autoRedirect: true,
    });

    const appId = "6b410f36-cb58-4bce-8e6f-a37220bfd437";
    const app = await qix.openAppSession(appId).getDoc();
const cubeDef = {
      qInfo: {
          qId: 'sessionChart',
          qType: 'qHyperCubeDef'
      },
    qHyperCubeDef: {
        qDimensions: [
          {
              qLibraryId: 'FFQHMq',
          },
          {
            qLibraryId: 'KFmTudV',
          }
        ],
        qMeasures: [
          {
            qDef: { qDef: "=SUM(Sales)", qLabel: "Total Sales" },
          },
        ],
        qInitialDataFetch: [
          {
            qLeft: 0,
            qTop: 0,
            qHeight: 100,
            qWidth: 3,
          },
        ],
      },
    };

    app.createCube = createCube;
    const myCube = await app.createCube(cubeDef, function(cubeData) {
      //console.log(cubeData); //returns the results of getLayout
      paintChart(cubeData.qHyperCube.qDataPages[0].qMatrix, table, tBody);
    });
</script>

where paintChart is my callback function for updating a table based on a selection.

[cristian_dalsanto]

Thanks, @Jeffrey_Goldberg, for the support.

Yes, I have already used qlik-embed in another project. I wanted to try nebula.js because, honestly, it’s not clear to me which is the best approach to embed existing charts in a mashup.

Both of them work, even if nebula.js can’t embed all the native object types, like the filter pane, for example.

Regarding creating hypercubes, thanks for the link to qlik-api-ts. I didn’t know about it. I’ll try it today.

In your opinion, what is the best solution then? Should I switch to qlik-embed for existing objects and qlik-api-ts for hypercubes and variables?