Qlik Community

Ask a Question

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
QlikWorld Online 2021, May 10-12: Our Free, Virtual, Global Event REGISTER TODAY
Wuzhong_Zhu
Employee
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 ║
╚═══════════════════╩══════════════════╝
2 Comments
rzenere_methodedupe

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
331 Views
alex_nerush
Partner
Partner

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
275 Views