# Configuration

The WireBootstrap for Qlik Component code uses [Qlik's Single Integration API](https://help.qlik.com/en-US/sense-developer/May2021/Subsystems/APIs/Content/Sense_ClientAPIs/single-integration-api.htm) 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](#appid-sheet) of the Qlik application containing the visualization                                                                                                                                                                                                                                |
| obj           | Optional.  The [visualization to display](#obj) inside the component.   If this is not set, the entire sheet will be rendered.                                                                                                                                                                                         |
| opt           | Native Qlik [visualization options](https://help.qlik.com/en-US/sense-developer/May2021/Subsystems/APIs/Content/Sense_ClientAPIs/single-integration-api.htm).  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](#selections) with the visualization                                                                                                                                                                                                                         |
| sheet         | The [sheet id](#appid-sheet) 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.

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

{% embed url="<https://community.qlik.com/t5/Knowledge/How-to-identify-an-object-in-a-Qlik-Sense-app-by-object-id/ta-p/1715142>" %}
Locate the object id for a visualization
{% endembed %}

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

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

## Selections

Qlik [selections](https://help.qlik.com/en-US/sense/February2022/Subsystems/Hub/Content/Sense_Hub/Selections/SelectionsToolbar/work-with-selections.htm) allow data in a Qlik visualization to be filtered.  Selections are defined in Qlik as fields and dimensions. &#x20;

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

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

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

This will set up WireBootstrap [data event listeners](https://docs.wirebootstrap.com/wirebootstrap/data-events/raising-events) 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.

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