Creating a website with Angular and the Capabilities API

[Yianni_Ververis]

For all of my large projects I use angular to handle the pages, content, variables, navigation etc. I have setup a template that everyone can access and download from git and branch.qlik.com. In this tutorial, I will show you how to install and use it.

• Go to Git or Branch and download the project on your server or if you do not have one, in your desktop Qlik\Sense\Extensions.
• Assuming that you are running git and you are familiar with the console, type bower install to get all of the necessary libraries.
• Config files below to point to your paths

Index.html

<link rel="stylesheet" href="http://localhost:4848/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="http://localhost:4848/resources/assets/client/client.css" media="all">
<script src="http://localhost:4848/resources/assets/external/requirejs/require.js" data-main="js/lib/main.js"></script>

js/lib/main.js

path to local script and libraries, L1

var scriptsUrl = 'http://localhost:4848/extensions/angularTemplate/';

path to Sense scripts like "js/qlik", L4

baseUrl: "http://localhost:4848/resources",

Now lets go over the anatomy of the template.Index.html is our container. It has the navigation and 2 controllers, header and main.The header is for the any persistent toolbar you may want to use, plus it holds the global bindings like navigation and clearAll() for our sense object selections. The next one is the current page and holds all the objects specific to this page.

For this tutorial I used the helpdesk that is bundled with any Sense installation. In this template, I have two ways of displaying Sense objects. One is by getting the object as is from the app and the other one is by calling a HyperQube and displaying the desired results. For the first, we need to put the object ids into an array that can be accessed from our html template.

In js/controllers/dashboard.js we define our variable with the objects as (L23)

$scope.objects = ['a5e0f12c-38f5-4da9-8f3f-0e4566b28398'];

and in view/dashboard.html we display it with a height of 300px as :

<get-object object="objects[0]" height="300"></get-object>

The other way is a little more complicated since it requires a service, api.getHyperCube. In this, we can pass an array of dimensions, measures, or both and a limit, if we want to limit our results.

js/controllers/dashboard.html

me.measures = [
["Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )", false],
["Count( {$<Priority={'Medium'}, Status -={'Closed'} >} Distinct %CaseId )", false],
["Count( {$<Priority={'Low'}, Status -={'Closed'} >} Distinct %CaseId )", false],
];
$scope.kapi = [];
   angular.forEach(me.measures, function(value, key) {
   api.getHyperCube([], [value[0]], function(data){
      $scope.kapi[key] = (value[1])?utility.string2thousands(data[0][0].qText):data[0][0].qText;
   });
});

and in the view/dashboard.html

<h2>{{ kapi[2] }}</h2>

I am also using a utility to display numbers as per Sense KPI format.

Now, say that you want to add another page named "performance" as the Sense sheet, you will need to define it in js/lib/main.js.

• Copy and rename js/controllers/dashboard.js to performance.js
• Copy and rename views/dashboard.html to performance.html
  
• Add in L5 paths your new controller path, "controller.performance': scriptsUrl + 'js/controllers/performance'".
• In L35 add your new route (state)

 .state('dashboard', {
    url: "/dashboard",
      views: {
        'header': {
           templateUrl: "views/header.html",
           controller: 'controller.header'
        },
        'main': {
           templateUrl: "views/performance.html",
           controller: 'controller.performance'
        },
    }
})

• In L49 'Require' add the controller again

 'controller.dashboard',

• And make sure your controller is defined properly, L10 of js/controllers/performance.js

app.obj.angularApp
  .controller('controller.performance', function ($scope, $rootScope, $location, $injector, api, utility) {
  var me = {};
  me.init = function () {
  $rootScope.page = 2;
  $rootScope.title = 'Performance';

• Also, we do not need the measures for this one so delete L17 and $scope.kapi
• For this tutorial we will only add the Resurce Details table. So change the object id to 'uETyGUP' and remove from views/performance.html all the kpis
  
• Last, add the in the index.html the navigation in L39

 <li ng-class="(page==2) ? 'active' : ''"><a ng-click="goTo('performance')">Performance</a></li>

Your final webpage should look like this:

For any further explanation and feature requests please let me know.

Coming up: setting a similar template for the Engine API and qSocks.

Git: https://github.com/yianni-ververis/capabilities-api-angular-template

Qlik Branch: http://branch.qlik.com/#/project/56b4a40140a985c431a64b08‌

Yianni

[Yianni_Ververis]

In my next blog I will explain about memory leakage and sense object management with Angularjs and Capabilities API.

When we change from controller to controller, we get errors because Sense is trying to update the hidden objects. Everything works great but, you get errors in your console and if you are creating big apps then eventually it becomes even slower since you have all of the objects in memory and with every selection made, Sense is trying to update all of them!

Yianni

[Yianni_Ververis]

Here is the blog on memory management

Angularjs and Capabilities API - Memory management and "qv-collapsed-listbox-delegated-open" error

[mgranillo]

Yianni,

I've been unable to get your template setup.  I'm getting lots of "404 (Not Found)" errors because I haven't set the configurations correctly.  Can you assist?  I'm not a web developer so this is all new to me.

I have Qlik Sense Desktop running, do I need to change the index.html configurations?  Will Qlik not serve up resources such as src="http://localhost:4848/resources/assets/external/requirejs/require.js"

I also don't understand what you are referencing when you say (L23).  Does this mean Line 23 in the dashboard.html file?

Is ['a5e0f12c-38f5-4da9-8f3f-0e4566b28398'];  the object ID from the single configurator?

Thanks for any help you can offer.

Mike

[Yianni_Ververis]

Hello Mike,

I am not sure why you are getting all these errors. You need to put the entire folder into your extensions folder like "C:\Users\<username>\Documents\Qlik\Sense\Extensions\angularTemplate".

This template is used with the Helpdesk qvf that is bundled with ever desktop installation so if you want to use it with that, no you do not have to change anything.

L is about Line, Yes.

capabilities-api-angular-template/dashboard.js at master · yianni-ververis/capabilities-api-angular-...

L24 has the object ids like your screenshot, yes.

Let me know if you still have issues,

Yianni

[mgranillo]

Thanks Yianni, I'm up and running now.  I hadn't installed the necessary libraries correctly.  As a suggestion, why not include the libraries in the extension? 

[Yianni_Ververis]

Hello Michael,

in the readme I have "Just bower install before any use to get all the libraries.'

Yianni

[mgranillo]

Yianni,

I'm having one additional issue.  None of the objects are showing up and I don't know why.  I checked the IDs from the management app and they match what you have in the controllers.  What am I missing here?

[Yianni_Ververis]

You get an error of "App not found"

js/lib/app.js, what is the app name or id? is it on localhost:4848? Did you place it in the extensions folder as my previous comment?

  me.config = {

  host: null,

  prefix: "/",

  port: 4848,

  isSecure: false

  };

  me.vars = {

  server: {

  local: window.location.hostname

  },

  id: 'Helpdesk Management.qvf',

[mgranillo]

Thanks for clarifying.  I have it working now.  It's slow on the initial load (about 30 secs).  Is this typical behavior?

[Yianni_Ververis]

Depending on the server you are pulling the app from but in general no except about the first 10 seconds that is for ws connections if you are running an older version than 2.2.3