Pin YOUR business

An AngularJS Qlik extension, prototyped by Qlik, forked by databridge

---

• Pre-requisites for contributors
• How to run PinIt locally
• How to run PinIt on the Qlik Sense Server
• Qlik resources
• APIs and JS libraries
• Contacts

---

Pre-requisites for contributors

• Install Qlik Sense Desktop, you'll need to register for that
• Use your credentials when you start the Qlik Sense Desktop
• Install Node.js LTS (at the moment, we use node v8.11.0, which comes with npm 5.6.0)
• Follow John Papa's AngularJS style guide

How to run PinIt locally

• Before building, run npm install, this downloads npm dependencies into node_modules\
• To build:
  • run npm run build, this lets webpack processes sources and resources into a dist\ folder and packages the extension as dist-zip\XXX.zip
  • alternatively run npm run watch, this lets webpack actively watch changes to sources and resources, and update dist\ and dist-zip\ on-the-fly
• Run and log into your Qlik Sense Desktop, then:
  • ensure some Apps in Qlik Sense Desktop have the PinIt keyword at the start of their description - see PINIT.appKeyWord value defined in settings.js
  • ensure some Visualizations Master Items used by these Apps have the PinIt tag at the start of their description - see PINIT.appKeyWord value defined in settings.js
  • browse to http://localhost:4848/extensions/axpinme/index.html

How to run PinIt on the Qlik Sense Server

• To build the extension, run npm run prod
• To deploy the extension on our Qlik Sense Server:
  • Connect to the Qlik Management Console and import the extension
  • Under Manage Resources / Extensions, click Import, then select the built dist-zip\XXX.zip
    • NOTE: if the extension already exists, you must delete it first; be warned: it takes a while, a green confirmation messages comes after a while, no indication of any task in progress

Qlik resources

• Getting started with DevHub Mashups
• Check Qlik and AngularJS for interaction details between the two technology stacks
• playground.qlik.com is a programming environment to use, explore, and quickly test your application ideas using Qlik technology
• see supported browsers

Some examples on Github:

• Sense angular directives
• Helpdesk angular
• QlikSense Angular Demo
• Qlik Mashup AngularJS bootstrap is a simple Qlik Sense mashup that uses angularjs and bootstrap + requirejs, can be used as a reference

APIs and JS libraries

Capability APIs

JS APIs to embed Qlik Sense content into a web page. Dependent on AngularJS and RequireJS, so you will need to take this into consideration when integrating the Capability APIs into an existing project that also uses these libraries.

For instance:

• Get Current User

const userData;
require( ["js/qlik"], function ( qlik ) {
    qlik.getGlobal(config).getAuthenticatedUser(function(reply){
        userData = 'User:'+reply.qReturn;
    });
});

• Personal Mode vs. Server Mode

Qliksense Desktop and Server differ by small but crucial details. For instance, to open applications, Qliksense Desktop uses app names whereas Qliksense Server uses the app IDs:

const global = qlik.getGlobal(config);
const isPersonalMode;
global.isPersonalMode(function(reply) {
    isPersonalMode = reply.qReturn;
    if (isPersonalMode) {
        const app = qlik.openApp('Axon CIA Mashup.qvf', config);
    } else {
        const app = qlik.openApp('ee21d6ca-8d01-42c4-951d-dd294a8372cf', config);
    }
});

• getObject

Retrieves a Qlik Sense object from the Qlik Sense application and inserts it into a HTML element. The object fills the HTML object, so you can size and position the element to determine how large the Qlik Sense object will be. See http://help.qlik.com/en-US/sense-developer/September2017/

Qlik Engine API

A JSON WebSocket protocol between the Qlik Sense engine and the clients. It consists of a set of objects representing apps, lists, etc. organized in a hierarchical structure. When you send requests to the API, you perform actions on these objects.

TEST Engine API => Start Qliksense Desktop => Open Web Browser

http://localhost:4848/dev-hub/engine-api-explorer

• List Apps: http://help.qlik.com/en-US/sense-developer/June2017/Subsystems/EngineAPI/Content/Classes/GlobalClass/Global-class-GetDocList-method.htm

Enigma.js library

A client library that communicates with Qlik Sense backend services. It can be used in a browser or in a Node.js environment. You can use enigma.js as an SDK or do CRUD (that is create, read, update and delete) operations on apps and on app entities. You can also use it to build your own client or to build your own Node.js service. enigma.js can be used with both Qlik Sense and Qlik Sense Desktop.

For more details see an introduction and some examples

• create Bookmark with enigma

enigmaModel.createBookmark(bookmarkProperties).then((layout) => {
    //PAM: Qliksense Dekstop requires explicit saving of the App
    const isPersonalMode;
    global.isPersonalMode(function (reply) {
        isPersonalMode = reply.qReturn;
        if (isPersonalMode) {
            console.log('Personal Mode!');
            enigmaModel.doSave();
        }
    });
});

• apply bookmark

enigmaModel.applyBookmark(qId).then((layout) => {
    console.log(layout);
});

Contacts

• databridge: Patric Amatulli