Training Schedule · Built by Ajay Kakkar

Qlik Mashup & Extension Developer Training

Fresher → advanced, 5 days × 2 hours. From HTML/CSS/JS foundations to the Capability API, Enigma.js, custom extensions, the QRS API and modern qlik-embed.

5 Days
2 Hours / Day
Fresher → Advanced
Capability API · Enigma.js · QRS
Type Theory Hands-On Lab Ref / Q&A
Theory 0:00 – 0:30 HTML Essentials for Mashup Developers
  • Document structure: DOCTYPE, head, body, semantic tags
  • Div-based layouts — containers, wrappers, grid placeholders
  • Linking external CSS & JS — where Qlik's require.js and Capability API scripts hook in
  • HTML attributes used by Qlik mashups: id, class, data-* attributes

extension_mashup.html → HTML section

Hands-On 0:30 – 1:00 CSS for Qlik Mashup Layouts
  • Flexbox and Grid — arranging chart containers side by side
  • CSS variables and theming — mirroring Qlik's sense-theme colors
  • Responsive breakpoints: making mashup iframes work on tablets
  • Overriding Qlik default styles with custom CSS selectors

extension_mashup.html → CSS section

10-min break
Lab 1:10 – 1:50 Build Your First Mashup Shell Page
  • Create an index.html with 4 empty chart divs in a 2×2 grid
  • Style the page with a dark Qlik-like theme using CSS variables
  • Add a header bar with logo placeholder and filter area stub
  • Validate layout renders correctly on both 1080p and 1366×768
Q&A / Ref 1:50 – 2:00 Recap & Reference Walk-through
  • Live Q&A on HTML/CSS concepts
  • Walk through your training ground reference at ajaykakkar93.github.io

Day 1 Outcomes

  • Confident building a responsive HTML shell ready to receive Qlik objects
  • Understand how CSS themes map to Qlik's visual language
  • Have a working mashup skeleton to build on through the week
Theory 0:00 – 0:30 JavaScript Fundamentals for Mashup Dev
  • Callbacks, Promises, and async/await — the backbone of Qlik API calls
  • ES6+: arrow functions, destructuring, template literals used in Enigma.js
  • Require.js & AMD modules — how Qlik loads its Capability API
  • Event-driven programming: click, change, select — triggering Qlik selections

extension_mashup.html → JavaScript section

Theory 0:30 – 0:55 jQuery for Qlik Mashups
  • $(document).ready vs DOMContentLoaded in mashup context
  • Selecting Qlik chart containers with jQuery: $("#objId")
  • AJAX calls — fetching external data to merge with Qlik visuals
  • jQuery UI widgets: dropdowns, sliders used as Qlik filter controls

extension_mashup.html → jQuery section

10-min break
Hands-On 1:05 – 1:50 JS + jQuery Lab — Interactive Filter Controls
  • Add a jQuery-powered dropdown that will later drive a Qlik field selection
  • Build a "Clear Selections" button using vanilla JS DOM manipulation
  • Write a Promise-based mock data loader — prepare for real Qlik API calls tomorrow
  • Attach click events to KPI tiles; simulate state changes with CSS classes
Q&A / Ref 1:50 – 2:00 Recap
  • Common async pitfalls in Qlik mashups and how to debug them
  • Preview: how today's JS patterns map to Capability API calls

Day 2 Outcomes

  • Write async JS confidently — the same pattern used in all Capability API calls
  • Use jQuery to wire up UI controls that will drive Qlik selections
  • Understand require.js module loading — critical for next day's Qlik connection
Theory 0:00 – 0:25 Capability API Architecture & Connection
  • What the Capability API is: qlik.js, require.js config, qlikConfig object
  • qlik.openApp() — connecting to a Qlik Sense app from a mashup page
  • Authentication modes: ticket, header, Windows (client-managed) vs OAuth (Cloud)
  • Understanding the Qlik Analytics application model: hypercube, generic object, session objects

extension_mashup.html → Mashup  ·  qlik.dev → Foundational Knowledge

Hands-On 0:25 – 1:00 Embed Visualizations + Field & Variable API
  • app.getObject() — render existing Qlik chart into a div by object ID
  • app.visualization.create() — create a bar/KPI chart on the fly in a mashup
  • Field API: app.field("FieldName").selectValues() — programmatic selections
  • Variable API: app.variable.setStringValue() — toggle KPI modes via variable
  • Bookmark API: app.bookmark.apply() / create() — save & restore selection states

qlik.dev → Selection Models  ·  qlik.dev → Visualizations

10-min break
Lab 1:10 – 1:50 Build a Live Mashup Dashboard
  • Connect mashup shell (Day 1) to a real Qlik Sense app via Capability API
  • Render 3 objects: a KPI, a bar chart, and a filter list box
  • Wire the jQuery dropdown (Day 2) to Field API selections
  • Add a "Reset Selections" button using app.clearAll()
  • Test with qlik.dev troubleshooting guide if CORS or auth issues arise

qlik.dev → Troubleshoot Mashups

Q&A / Ref 1:50 – 2:00 Debugging & Recap
  • Common errors: 403, WebSocket failures, require not defined
  • How to use browser DevTools to inspect Qlik API calls

Day 3 Outcomes

  • A fully working mashup dashboard connected to a real Qlik Sense app
  • Programmatic control of fields, variables, and bookmarks from HTML controls
  • Confidence to create on-the-fly visualizations without pre-building in Qlik
Theory 0:00 – 0:30 Enigma.js — The Low-Level Engine API
  • What Enigma.js is: WebSocket-based connection directly to Qlik Engine
  • enigma.create() → session → openDoc → app object
  • createSessionObject() with a hypercube definition — fetching raw data
  • getLayout() and getData() — extracting hypercube rows for custom rendering
  • When to use Enigma.js vs Capability API (headless, server-side, Node.js)

extension_mashup.html → Enigma.js  ·  qlik.dev → Toolkits (enigma.js)

Theory 0:30 – 0:55 Extension API — Structure & Property Panels
  • .qext file: name, type, version metadata
  • Extension object: definition, paint(), initialProperties, support
  • Building a property panel: adding custom string, dropdown, checkbox, slider controls
  • Consuming hypercube data in paint() — looping qMatrix rows to render HTML/D3
  • Packaging and deploying: QMC upload vs Qlik Cloud extension zip

extension_mashup.html → Extension  ·  qlik.dev → Extension API  ·  Property Panel Basics

10-min break
Lab 1:05 – 1:50 Build a Custom Bar Chart Extension
  • Scaffold the extension folder: main.js, .qext, style.css
  • Define a hypercube with 1 dimension and 1 measure in initialProperties
  • In paint(): read qMatrix, render horizontal bars using pure CSS/HTML
  • Add a property panel toggle to switch bar color (color-picker property)
  • Package and import into Qlik Sense — place on a sheet and verify data-binding

qlik.dev → Consume Data in Extensions

Q&A / Ref 1:50 – 2:00 Extension vs Mashup — When to Use What
  • Decision framework: custom viz inside Qlik → Extension; standalone web app → Mashup
  • Q&A on paint() lifecycle, resize handling, and export support

Day 4 Outcomes

  • Use Enigma.js to fetch raw hypercube data outside the Capability API
  • Build, configure, and deploy a custom visualization extension end-to-end
  • Design property panels with typed controls (color-picker, dropdown, slider)
Theory 0:00 – 0:20 QRS API — Repository Service for Admin Tasks
  • QRS REST API: managing apps, streams, users, data connections via HTTP
  • GET /qrs/app, POST /qrs/task/start — automating reloads from a mashup
  • xrfkey header and certificate auth (client-managed) vs API keys (Qlik Cloud)
  • Practical use: trigger a reload button in your mashup using QRS

extension_mashup.html → QRS  ·  qlik.dev → APIs Reference

Theory 0:20 – 0:45 Modern Embedding with qlik-embed Web Components
  • qlik-embed vs Capability API: why Qlik recommends the new web component approach for Cloud
  • <qlik-embed ui="analytics/chart"> — declarative chart embedding, zero JS required
  • OAuth configuration for qlik-embed: SPA flow, impersonation, anonymous access
  • Selections, variables, bookmarks via refApi in qlik-embed context
  • Offline snapshots — embedding static chart images with qlik-embed + M2M OAuth

qlik.dev → qlik-embed overview  ·  qlik-embed Quick Start

10-min break
Capstone Lab 1:00 – 1:45 Full Mashup Dashboard — End-to-End Build
  • Combine the HTML shell (Day 1) + JS/jQuery controls (Day 2) + Capability API objects (Day 3)
  • Embed your custom extension (Day 4) alongside native Qlik charts on the same page
  • Add a QRS-triggered "Reload Data" button with loading state feedback
  • Optionally replace one chart with a qlik-embed web component to compare approaches
  • Apply responsive CSS so dashboard works at 1366×768 and 1920×1080
Showcase / Q&A 1:45 – 2:00 Student Demos & Next Steps
  • Each student does a 2-min screen share of their capstone dashboard
  • Resources for continuing: qlik.dev changelog, Qlik Community, Qlik Developer Slack
  • Recommended next topics: Nebula.js, Qlik Answers AI embedding, M2M OAuth flows

community.qlik.com  ·  Qlik Developer Slack

Day 5 Outcomes

  • Automate Qlik admin tasks using QRS API from a mashup interface
  • Embed Qlik Cloud analytics using modern qlik-embed web components with OAuth
  • A complete, portfolio-ready mashup dashboard combining all week's skills

A focused 3-hour build session — start from a blank shell and ship a complete, connected dashboard, applying everything from Days 1–5 in one continuous flow.

Day 6 Outcomes

  • Build a full multi-object mashup dashboard live, from shell to connected charts
  • Wire filters, KPIs, selections and a reload control into a single cohesive layout
  • Apply responsive styling and basic performance tuning for real deployment
  • Walk away with a finished dashboard ready to demo to stakeholders

Use AI assistants (Copilot, Claude, ChatGPT) to accelerate mashup and extension development — generating boilerplate, debugging API errors, and solving common real-world problems faster.

Day 7 Outcomes

  • Prompt AI tools to scaffold mashup pages, extension boilerplate and property panels
  • Use AI to read Qlik API errors and propose fixes (403, WebSocket, require issues)
  • Solve common real-world mashup problems with an AI-assisted debugging workflow
  • Know the limits — what to verify manually and where AI output can mislead
Training Ground Reference: extension_mashup.html  ·  Official Docs: qlik.dev