Injecting qlik into external controller for extension

[jonvitale]

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

[m_s]

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

[jbellizzi · Accepted solution]

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

[jonvitale]

Grazie John,

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

[jonvitale]

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

[jonvitale]

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