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>.

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, and the published limitations.

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.

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 with ui="classic/app".
• The Qlik Sense app loaded to 7973436d-250c-46a8-bca3-8448556c5457 with app-id="7973436d-250c-46a8-bca3-8448556c5457".
• The sheet opened in the Qlik Sense app to ayLHeE with sheet-id="ayLHeE".
• The theme used in the app to breeze with theme="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.