UIs and parameters
Introduction
The qlik-embed framework provides various UIs and configurations, which
are leveraged in your web app with the <qlik-embed ...>
HTML tag.
When building your web app, you must first load the relevant script header, and configure any authentication to be used by the objects you’ll add to the page. If you dynamically build the page, ensure this script is loaded before any qlik-embed tags are populated.
Once you’ve got the script tag, you can add one or many <qlik-embed>
tags into
your document to leverage components from Qlik, plus helper tags such as
<qlik-initial-selections>
.
Component compatibility
This page provides examples for qlik-embed web components, the framework-independent version of qlik-embed. Qlik also publishes libraries for React and Svelte.
Some visualization objects may have specific character encoding or embedding limitations depending on the UI type used. Review the visualization overview if you run into issues.
UI types
Each UI type provides a different experience in qlik-embed, and all provide the standard Qlik selection and filtering experience by default.
UI Name | Purpose |
---|---|
analytics/sheet | Lightweight component designed to bring just the analytics on a sheet, without any other features. |
analytics/chart | Lightweight component designed to bring a single chart object, or create on-the-fly charts, without any other features. |
analytics/field | Lightweight list-box for displaying values from a single field. |
analytics/selections | Lightweight selection bar containing selection controls and values for the referenced Qlik Sense app. |
classic/app | A full-featured component bringing the Qlik Sense sheet analysis and authoring experience into your web app, supporting most native features. |
classic/chart | Backwards-compatible component designed to bring single chart objects into your app. Supports extensions. |
ai/assistant | The embedded version of Qlik Answers. |
Review which chart types are supported with each UI in the visualization overview.
analytics/sheet
The analytics sheet is a lightweight component designed to bring the primary Qlik Sense experience to users, with full selectivity, but without capabilities such as data alerts, notes, subscriptions, etc. You can leverage the Qlik Cloud APIs to add desired capabilities into your web app using the framework of your choice.
There is no context menu provided, so you are free to build a menu which suits the host web app, and your use case.
Note: Some charts, such as the KPI object, may require the page to use UTF-8 encoding.
Review an example for analytics/sheet.
analytics/chart
As with analytics/sheet
, the analytics chart provides a lightweight experience
for single charts, allowing you to build much more complex web apps with better
performance than legacy iframe or angular frameworks.
With the addition of the layout container chart object, you can opt to include either simple single objects, or complex, layered collations of charts and objects from within your app with this UI.
There is no context menu provided, so you are free to build a menu which suits the host web app, and your use case.
Review an example for analytics/chart, or with chart on the fly.
analytics/field
The analytics field provides a lightweight listbox (filter pane) for allowing users to make selections in a single field within the app data model.
Review an example for analytics/field.
analytics/selections
This UI renders a default Qlik Sense selections bar, with back, forward, and clear selection buttons. Selections made in fields in the app will appear in this selections bar, where the user will be able to further refine or update selections in those fields without going to another UI type.
Review an example for analytics/selections.
classic/app
This UI renders the entire Qlik Sense sheet analysis and authoring client, bringing most of the UIs and modals present in that experience to your users. Capabilities such as data alerts, insight advisor, subscriptions, self-service authoring of new sheets, and more, are available out of the box with the standard context menu.
This UI exposes analytics sheets in either analysis or authoring (edit) views, it does not support stories, data manager, data load editor, data model viewer, or any other UI types other than sheet.
In this experience, there are still some limitations or considerations for using certain features, although Qlik is working to bring the full native experience:
-
You may experience errors attempting to use Notes. It is suggested you turn off notes in embedded-only tenants.
-
Downloading data exports may not prompt for download location.
-
The chart context menu is not configurable. To hide features, you should turn off them in the tenant.
-
Alerts, subscriptions, and monitored charts UIs accessed from context menu will redirect to the Qlik Cloud hub. Turn off these features in the tenant and assign users the Embedded Analytics User role to prevent users from accessing the Qlik Cloud hub.
-
The NL chart object may return errors if too many components are loaded in the same page. Try to leverage just 1 component per page.
-
The microphone input in Insight Advisor will not accept audio inputs.
This UI emits the Qlik Sense sheet usage event, allowing you to understand which sheets were accessed by your users. No other UIs support this event.
Review an example for analytics/sheet.
classic/chart
This UI renders visualizations that have not been converted to nebula.js or use the classic extension API with the use if it’s iframe mode.
There is no context menu provided, so you are free to build a menu which suits the host web app, and your use case.
With the addition of the layout container chart object, you can opt to include either simple single objects, or complex, layered collations of charts and objects from within your app with this UI.
Review an example for classic/chart.
ai/assistant
The AI assistant component brings you the Qlik Answers experience in embedded format.
ai/assistant
supports two themes:
- Light mode (default), set with
appearance="qlik-light"
- Dark mode, set with
appearance="qlik-dark"
Review an example for ai/assistant.
UI configuration
Once you’ve put the relevant script header into your web app, and configured any authentication, you can add qlik-embed tags to the page.
You set the UI type in the qlik-embed tag in <ui>
:
<qlik-embed
ui="<ui>"
...
></qlik-embed>
Each UI type will support a specific set of properties, which are detailed below.
Setting UI parameters
The UI options are configured on the <qlik-embed>
object as parameters, an
example for classic/app
:
<qlik-embed
ui="classic/app"
app-id="7973436d-250c-46a8-bca3-8448556c5457"
sheet-id="ayLHeE"
theme="breeze"
></qlik-embed>
This sets:
- The UI to
classic/app
withui="classic/app"
. - The Qlik Sense app loaded to
7973436d-250c-46a8-bca3-8448556c5457
withapp-id="7973436d-250c-46a8-bca3-8448556c5457"
. - The sheet opened in the Qlik Sense app to
ayLHeE
withsheet-id="ayLHeE"
. - The theme used in the app to
breeze
withtheme="breeze"
.
Helper tags
In addition to the <qlik-embed>
UI tag, you can use helper tags to provide additional
configuration that applies to all qlik-embed tags.
These tags should be placed in the same document as the qlik-embed tags, and will be interpreted by the qlik-embed framework prior to rendering of UIs.
qlik-initial-selections
The qlik-initial-selections
tag allows you to set initial selections in the
specified Qlik Sense app, before the UI is rendered.
Supported options:
name
: The name of the field in which you wish to make selections. Master dimensions are not supported.values
: A semicolon-delimited list of values to select in the named field.state
: The alternate state name to apply the selections to. If omitted, selections will be applied to the default state.
Example showing selections in the Product Sub Group Desc
and AccountDesc
fields
on the comparison
state:
<qlik-initial-selections app-id="a51a902d-76a9-4c53-85d2-066b44240146">
<field state="comparison" name="Product Sub Group Desc" values="Hot Dogs;Fresh Fruit"></field>
<field state="comparison" name="AccountDesc" values="Sales;Cost of goods sold"></field>
</qlik-initial-selections>
For more details, review an example using qlik-initial-selections.