Skip to main content

Using Capability APIs in custom components

ON THIS PAGE

Using Capability APIs in custom components

Introduction

You can use the Capability APIs provided with Qlik Sense when you are developing custom components. You need a reference to the Root API in the definition of your component:

define( [
    'qlik'
], function ( qlik ) {
    'use strict';

    return {
        componentName: "ccsMyComponent",
        restrict: 'E',
        link: function ( scope ) {

           // You can now use qlik as the entry point to the Capability APIs

        }
    };
} );

The following JavaScript libraries can be used in custom components:

  • Extension API
  • Backend API
  • Root API
  • App API
  • Bookmark API
  • Field API
  • Global API
  • Table API
  • Navigation API
  • Selection API
  • Variable API

API reference

Example

The following example renders basic information about the current product version, using the following HTML element:

<ccs-version-info></ccs-version-info>

This example needs the following files:

  • Definition file: ccs-version-info.qext
  • Main script file: ccs-version-info.js
  • Template file: template.ng.html

Definition file

The ccs-version-info.qext file:

{
  "name": "ccs-version-info",
  "description": "Example how to use the Qlik Capability APIs.",
  "type": "component",
  "version": "1.0.0",
  "author": "Qlik"
}

Main script file

The ccs-version-info.js file:

define( [
    'qlik',
    'text!./template.ng.html'
], function ( qlik, ngTemplate ) {
    'use strict';

    return {
        componentName: "ccsVersionInfo",
        restrict: 'E',
        template: ngTemplate,
        link: function ( scope ) {
            var global = qlik.getGlobal();

            // Retrieve the product version
            global.getProductVersion( function ( reply ) {
                scope.productVersion = reply.qReturn;
            } );

            // Retrieve the product
            global.getQTProduct( function ( reply ) {
                scope.qtProduct = reply.qReturn;
            } );

            // Retrieve if we are working in personal mode or not
            global.isPersonalMode( function ( reply ) {
                scope.isPersonalMode = reply.qReturn;
            } );
        }
    };
} );

Template file

AngularJS allows you to define the template for a directive in two ways:

  • Passing an object inline as a string
  • Pointing to a URL using the templateUrl property

In this example we are passing an object inline as a string.

The template.ng.html file:

<div>
    <b>Product Version: </b>{{productVersion}}<br/>
    <b>Product: </b>{{qtProduct}}<br/>
    <b>Is Personal Mode:</b> {{isPersonalMode}}<br/>
</div>

Additional information