Skip to main content

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