Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
jonvitale
Creator III
Creator III

Injecting qlik into external controller for extension

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

1 Solution

Accepted Solutions
jbellizzi
Partner - Contributor
Partner - Contributor

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

View solution in original post

5 Replies
m_s
Partner - Creator II
Partner - Creator II

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
Partner - Contributor
Partner - Contributor

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

jonvitale
Creator III
Creator III
Author

Grazie John,

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

jonvitale
Creator III
Creator III
Author

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
Creator III
Creator III
Author

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