Skip to main content
Wuzhong_Zhu
Former Employee
Former Employee

Say goodbye to capability API.

As a hardcore Qlik mashup developer, you probably have tried many different Qlik APIs. Among all of them, I bet capability API is the apple of your eye; it is at least for me. Since its release, it has no doubt been my №1 tool for visualization embedding. However, I think it is about time to say my saddest farewell.

Goodbye, capability API.

Hello Enigma.JS, Nebula.JS.

 

Well, first of all, I would like to explain why I think the Capability API no longer works for me.

The primary reason is the Capability API is chunky. It wraps every single possible function into one js file. Most projects only leverage 20 percent of the functions. Using the Capability API imposes significant redundancy, especially during load time.

To me, another limitation of the Capability API is that it is loaded from the Qlik server.

Wuzhong_Zhu_8-1617800383748.png

 

Wuzhong_Zhu_9-1617800383758.png

 

Most users take three steps to load a chart into a webpage:

Authenticate -> Load Require.js from Qlik -> use Require.js to load the Capability API. (#Tip: You can use your local instance of Require.js, to improve performance.)

The Capability API itself is a 3MB JavaScript file, which often takes significant time to initialize. And this delay is inevitable. Yuck!

The Capability API is too old. Its development was based on the first version of Angular.js, which was invented in the Stone age of the web programming world. Even though it is still usable, i̵t̵ ̵m̵a̵k̵e̵s̵ ̵m̵e̵ ̵f̵e̵e̵l̵ ̵o̵l̵d̵ ̵u̵s̵i̵n̵g̵ ̵i̵t̵, it is awkward to use together with newer frameworks like React.JS or mobile development.

I decided it’s about time to switch to enigma.js and nebula.js, both of which are open-source libraries from Qlik.

First of all, both enigma.js and nebula.js are available on NPM, which is a huge plus for me. Below is a graph explaining why. (TLDR: it is faster, lighter, and more flexible)

Wuzhong_Zhu_10-1617800383754.png

 

Wuzhong_Zhu_11-1617800383761.png

 

Wuzhong_Zhu_12-1617800383755.png

 

Wuzhong_Zhu_13-1617800383762.png

 

For me, enigma.js and nebula.js together are the perfect replacement for the Capability API. They are not only faster, but they also don’t compromise functionality. Below is a list of all APIs in Capability API and their relevant counterparts in enigma+nebula.

Wuzhong_Zhu_14-1617800383756.png

 

Wuzhong_Zhu_15-1617800383759.png

 

So that concludes the article, but that is not the end of it. Below is a list(very long) mapping all functions from the Capability API to enigma.js and nebula.js. Hope you find it useful.

Happy coding!

 
╔════════════════════╦════════════════════════════════╗
║ Root API ║ Enigma ║
╠════════════════════╬════════════════════════════════╣
║ callRepository ║ General http request ║
║ currApp ║ Global.getActiveDoc ║
║ getAppList ║ Global.getDocList ║
║ getExtensionList ║ Global.reloadExtensionList ║
║ getGlobal ║ Session.global ║
║ getThemeList ║ NA ║
║ off ║ remove angular listener ║
║ on ║ angular listener ║
║ openApp ║ Global.openDoc ║
║ promise object ║ angular listener ║
║ registerExtension ║ NA ║
║ resize ║ NA ║
║ sessionApp ║ Global.createSessionApp ║
║ sessionAppFromApp ║ Global.createSessionAppFromApp ║
║ setDeviceType ║ NA ║
║ setLanguage ║ NA ║
║ setOnError ║ angular listener ║
╚════════════════════╩════════════════════════════════╝
╔═══════════════════════╦═══════════════════════════════════╗
║ App API ║ Enigma ║
╠═══════════════════════╬═══════════════════════════════════╣
║ addAlternateState ║ Doc.addAlternateState ║
║ back ║ Doc.back ║
║ clearAll ║ Doc.clearAll ║
║ close ║ Doc.deleteConnection ║
║ createCube ║ Doc.createObject ║
║ createGenericObject ║ Doc.createObject ║
║ createList ║ Doc.createObject ║
║ createTable ║ Doc.createObject ║
║ destroySessionObject ║ Doc.destroySessionObject ║
║ doReload ║ Doc.doReload ║
║ doSave ║ Doc.doSave ║
║ field ║ Doc.getfield ║
║ forward ║ Doc.forward ║
║ getAppLayout ║ Doc.getAppLayout ║
║ getAppObjectList ║ Doc.searchObjects ║
║ getFullPropertyTree ║ Doc.getFullPropertyTree ║
║ getList ║ Doc.getObject ║
║ getObject ║ Doc.getObject ║
║ getObjectProperties ║ GenericObject.getFullPropertyTree ║
║ getScript ║ Doc.getScript ║
║ getSnapshot ║ Doc.getSnapshotObject ║
║ lockAll ║ Doc.lockAll ║
║ off ║ remove angular listener ║
║ on ║ angular listener ║
║ removeAlternateState ║ Doc.removeAlternateState ║
║ searchAssociations ║ Doc.searchAssociations ║
║ searchResults ║ Doc.searchResults ║
║ searchSuggest ║ Doc.searchSuggest ║
║ selectAssociations ║ Doc.selectAssociations ║
║ selectionState ║ NA ║
║ setScript ║ Doc.setScript ║
║ unlockAll ║ Doc.unlockAll ║
╚═══════════════════════╩═══════════════════════════════════╝
╔═══════════════════════╦═════════════════════════════╗
║ Global API ║ Enigma ║
╠═══════════════════════╬═════════════════════════════╣
║ cancelReload ║ Global.cancelReload ║
║ getAppList ║ Global.getDocList ║
║ getAuthenticatedUser ║ Global.getAuthenticatedUser ║
║ getProgress ║ Global.getProgress ║
║ getProductVersion ║ Global.productVersion ║
║ getQTProduct ║ Global.QTProduct ║
║ isPersonalMode ║ Global.isPersonalMode ║
║ off ║ remove angular listener ║
║ on ║ angular listener ║
╚═══════════════════════╩═════════════════════════════╝
╔════════════════════════╦════════════════════════════════╗
║ Variable API ║ Enigma ║
╠════════════════════════╬════════════════════════════════╣
║ create ║ Doc.createObject ║
║ createSessionVariable ║ Doc.createSessionVariable ║
║ get ║ Doc.getVariableByName ║
║ getByName ║ Doc.getVariableById ║
║ getContent ║ Variable.getContent ║
║ setContent ║ Variable.setContent ║
║ setNumValue ║ GenericVariable.setStringValue ║
║ setStringValue ║ GenericVariable.setNumValue ║
╚════════════════════════╩════════════════════════════════╝
╔══════════════╦═════════════════════╗
║ Bookmark API ║ Enigma ║
╠══════════════╬═════════════════════╣
║ apply ║ Doc.applyBookmark ║
║ create ║ Doc.createBookmark ║
║ remove ║ Doc.destroyBookmark ║
╚══════════════╩═════════════════════╝
╔═══════════════════╦══════════════════╗
║ Visualization API ║ Nebula.JS ║
║ Field API ║ Doc.getField ║
║ Table API ║ Doc.createObject ║
║ Selection API ║ GenericObject ║
║ Navigation API ║ NA ║
║ Theme API ║ NA ║
╚═══════════════════╩══════════════════╝
5 Comments
Anonymous
Not applicable

Thank you @Wuzhong_Zhu for your article! 
Could you re-upload images 1 and 3? We can see only a thumbnail

Many thanks,
Riccardo

0 Likes
3,057 Views
alex_nerush
Partner - Creator II
Partner - Creator II

How about multi language mashups? I see that setLanguage is not available in methods list by using this modern approach. I would like to have localized messages in embedded qlik objects. Is it possible to do it by using nebula.js?

0 Likes
3,001 Views
jmr_itsn
Partner - Contributor II
Partner - Contributor II

Seeing that Nebula.js is gaining traction, can we expect the Capability API to be deprecated/phased out anytime soon? Maybe this year? Next year? Thanks!

2,571 Views
Digvijay_Singh

What are the most appropriate ways to migrate existing extensions into these new JS libraries based extensions if Capability APIs are going to be phased out. In last 2-3 years Some popular qlik extensions are adopted by Qlik like heatmap, Bar Plus etc are available in the Vis Bundle; would they be migrated into nebula by Qlik? as far as I know they use capability APIs.

0 Likes
2,552 Views
aldo92992
Contributor II
Contributor II

Hi, what if I want to embed a visualization using enigma but like App API method called getObject(idHTMLElem, idQlikElem)? is there a way to do the same, but with enigma library?

I ask this question cause there's a limited number of chart types in NebulaJS inventory https://qlik.dev/libraries-and-tools/visualizations/inventory, and I use custom extensions developed by my team that may not adjust these default chart types properties

970 Views