Configuration

The WireBootstrap for Qlik Component code uses Qlik's Single Integration API to communicate with Qlik in order to render visualizations.

Use the following configuration options to bind the WireBootstrap Qlik Component.

Property Name	Description
appid	The application id of the Qlik application containing the visualization
obj	Optional. The visualization to display inside the component. If this is not set, the entire sheet will be rendered.
opt	Native Qlik visualization options. This an ampersand delimited string containing the options. This value defaults to currsel which displays the selections panel inside visualizations.
rootUrl	The URL to the root of the Qlik instance
selections	The fields or dimensions that will be used as selections with the visualization
sheet	The sheet id containing the visualization

appid/sheet

The appid and sheet properties of a visualization can easily been seen in the URL to a dashboard page in Qlik. This URL syntax along with an example can be seen below.

[server]/app/{appid}/sheet/{sheet}

[server]/app/372cbc85-f7fb-4db6-a620-9a5367845dce/sheet/VJyJ

The following example binds the WireBootstrap Qlik Component to the sheet in the example above using plain JavaScript by setting the component's appid and sheet properties. It also sets the rootURL to the service location of the Qlik instance.

new wire.qlikComponent().render("#qlik", {     
    rootUrl: "https://sense-demo.qlik.com",
    appid: "372cbc85-f7fb-4db6-a620-9a5367845dce",
    sheet: "VJyJ"
    ...
});

obj

Follow the instructions in this article to locate the object id for the visualization.

How to identify an object in a Qlik Sense app by object id

Locate the object id for a visualization

Once the object id is located, use the obj property to render it inside the WireBootstrap Qlik Component.

new wire.qlikComponent().render("#qlik", {   
    ...  
    obj: "RgRdrZ"
});

Selections

Qlik selections allow data in a Qlik visualization to be filtered. Selections are defined in Qlik as fields and dimensions.

Use the selections property to configure the fields to be used as selections in the visualization. This property contain an array of selection objects.

Set the field property on a selection to the name of a Qlik field or dimension to be used as the Qlik selection.

new wire.qlikComponent().render("#qlik", {    
    ... 
    selections: [
        { field: "Region Name" },
        { field: "Channel Name" }
    ]
});

This will set up WireBootstrap data event listeners that will watch for data changes initiated by users on a page and send those changes as selections to Qlik in order that the visualization be refreshed.

[pic]

Default Selection Values

In order to setup default selection values, use the values property of a selection. This property contains a string array of selection values.

new wire.qlikComponent().render("#qlik", {    
    ... 
    selections: [
        { field: "Region Name", values: ["Central"] },
        { field: "Channel Name", values: ["Catalog"] }
    ]
});