Who this project template is for
Developers creating Qlik Sense mashups with Qlik Sense 3.0 or above, who have at least a decent understanding of Angular.js and Require.js and would like to use a project template to speed up development.
Who this isn't for
Anyone only looking for a predesigned layout in which to simply add Qlik Sense objects
Project Template Overview
This project template helps organize all your config code in one place, and provides you with a decent architecture for a component based approach to an angular app. It has a few useful prebuilt components specific to qlik sense mashups, which use a nice pattern which can be borrowed to create more components.There's also a gruntfile to compile less and build your app using the r.js optimizer. I'll go over the parts of the template now.
main.js
The project template has a top level main.js file that contains the config code for the Qlik Sense Root API and Require.js, and acts as the entry point for most of the proejct, requiring the Qlik Sense API code as well as all the project app code. It's here, for instance, that you can change the the app id you would like to connect to, and add paths and shims to require. The default Require.js context is used for loading the Qlik Sense API code, while a second context, named "requireApp", is used to require the app code from the app folder.
app.js
This file is found under the app folder, and is the entry point for the app. The main app angular module is created here, the templates are loaded, and the angular app is bootstrapped with the project app and Qlik Angular API app.
qlikApp
This is an angular service which opens a Qlik Sense app using the Root API with the app id specified in the main.js file, and provides access to it throughout the rest of your app. The service also has methods which can be used in place of the App API createCube, createGenericObject, createList, and createTable methods, which act just like the corresponding App API methods, but allow you to pass $scope as a parameter, which then takes care of the destruction of session objects when their scope is destroyed.
senseObject
This component gives you the ability to use the App API getObject method as a directive, with the added functionality of closing the object when its scope is destroyed.
search
This component exposes the App API getResults method as an easy to use directive, using the typeahead from UI Bootstrap to display results, and allowing selections from those results.
dropdown
This is a directive for a dropdown component, which allows you to add a field from the Qlik Sense app and make selections. It displays the name of single selections, or the count of multiple selections, as well as indicating the state of each individual value in the dropdown. It also makes use of virtual scrolling, to prevent too many watchers.
examples
This is a view component which is simply here as an example. It requires the dropdown, search, and senseObject components and uses them, and is itself required by the app.js file and injected into the main angular app module.
gruntfile
The gruntfile is configured to compile all of the less in each individual component, as well as the main.less file located in css/less folder, compile the templates.js file from all html files found in components, and run the r.js optimizer from the app entry point.
How to get it
You can find this project on Qlik Branch @ Qlik Lars Project Template
.png "Former Employee"){kind=icon}