topic Injecting qlik into external controller for extension in Integration, Extension & APIs

Injecting qlik into external controller for extension

jonvitale — Wed, 11 Apr 2018 01:30:37 GMT

Hi all,

I have to admit, I'm not really very confident about how requirejs works - particularly as I am trying to create my own javascript modules to organize my script. Here's the specific issue.

I am building an extension. I would like to keep my controller in a separate js file from the main js file. I need the "qlik" object in the controller. So the main js file will look something like this:

import myController from './myController.js';

export default window.define( [
    'qlik'
],
    function (qlik) {
        'use strict';
          return {
            definition: {},
            initialProperties: {},
            controller: myController

This all works fine and imports successfully from myController, but I don't know how to get 'qlik' into myController so that I can use its functionality there. For example, if this is the body of myController.js, qlik isn't available.

export default ['$scope', '$element', function($scope, $element){
  $scope.hello = "hi";
  console.log("hello", qlik); // hello displays, but qlik is empty

This doesn't work either:

export default ['$scope', '$element', 'qlik', function($scope, $element, qlik){

Nor does using the ES6 import, it can't find the module:

import {qlik} from 'qlik';

I am using the AxisGroup's qext extension boilerplate code (uses Webpack to transpile ES6)

https://github.com/axisgroup/qExt

Re: Injecting qlik into external controller for extension

m_s — Wed, 11 Apr 2018 14:43:12 GMT

Hello Jonathan,

is it possible to export a "creator"-function from controller.js? E.g:

controller.js:

export default function(qlikEngine){

return ['$scope', '$element', function($scope, $element) {

qlikEngine.theme.apply('abc');

}]

};

extension-template.js:

...

import createController from 'controller.js';

export default window.define(['qlik'], function(qlik) {

return {

initialProperties: initialProperties,

template: template,

definition: definition,

controller: createController(qlik),

paint: paint,

resize: resize

}

});

Cheers,
Mathias

Re: Injecting qlik into external controller for extension

jbellizzi — Thu, 12 Apr 2018 16:44:14 GMT

Jon. See my response to your question GitHub here https://github.com/axisgroup/qExt/issues/2

Re: Injecting qlik into external controller for extension

jonvitale — Fri, 13 Apr 2018 00:43:35 GMT

Grazie John,

That worked, and thanks for being responsive over on Github, sometimes you never here from folks over there.

Re: Injecting qlik into external controller for extension

jonvitale — Fri, 13 Apr 2018 00:44:47 GMT

John's answer is the most straightforward, but yours may come in handy at some point as well. Thank you for taking the time.

Re: Injecting qlik into external controller for extension

jonvitale — Mon, 16 Apr 2018 13:47:48 GMT

jabellizzi‌

If you are still around here (I don't want to clutter up your Github issues section), I have another question.

I am trying to use the async / await functionality in ES6. I have a class with an async method and an await keyword on a function that returns a Promise. Seems to work fine in my up-to-date chrome; however, in Qlik Sense Desktop, which presumably is not using the latest Chrome, I get an error (unexpected identifier for async).

Do you know if there is a way to get some kind of polyfil into the webpack pipeline so that we can use this syntax, or is it just better to avoid for now?

Jonathan