# Widgets

## `Readonly`

**Description:** A non-editable text input that can be used to present a value directly from a Qlik Field

![Readonly](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MBrflrkW0Mk-qaYyoCs%2F-MBrgBV16m66qbj_1pgH%2FReadonly2.png?alt=media\&token=6146aa3a-b068-4d84-aa68-0f6372d52062)

**Mode:** Here you define whether to show a field from your data model or use an expression to show a calculation.

**Options:**

* If your selected field is the association between your data model and write-back data then check the `Komment Key Field`.

{% hint style="warning" %}
We recommend to place the widget holding the Komment Key Field as the first widget
{% endhint %}

{% hint style="warning" %}
To be sure not to have any conflicts with Qlik's data load, try to avoid special characters such as '/' or '<>' in your Komment Key Fields
{% endhint %}

**Expression:**

![Use expression in Readonly widget](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MBrgHZJrPYr8tEO4Q_A%2F-MBrhAdXk8mpsbFO8oUW%2FExpression.png?alt=media\&token=9ba5b4da-4da9-4cad-b6de-dcf539fe8845)

When using an Expression you just use normal Qlik syntax. However, be sure to remove the equal sign before the expression. Otherwise Komment won't be able to evaluate it correctly.

It is possible to use the Expression to show a **field from another table** in your data model. You need to make a small tweek but it is actually quite easy:

Write Field name in Qlik Expression => Switch to Field Mode

![Show field from other table in data model](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MBrgHZJrPYr8tEO4Q_A%2F-MBrmDyAyF_fCAH0rcs1%2FKomment_ExpressionToField.gif?alt=media\&token=28e8b7fd-0685-4d45-9b31-a84b6c160c1e)

**Total row:**

You can enable the table to show a Total row for your expressions. Here you also define which aggregation that should be used:

![Total row for expressions](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-Ma8Xx_VO-WpJ01QHsKi%2F-Ma8YzpmgogvDo4wxZ_z%2FTotal_row.png?alt=media\&token=44a996ec-deaa-48e7-b815-b8b749a965c5)

**Display as URL:**

For Readonly widgets it is possible to choose to display the content as a clickable URL.

![Show as URL](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MZwSjw5qBNoK6JlT8Sg%2F-MZwWb6aM57-gDBgP25y%2FUrl.png?alt=media\&token=78895332-156d-4976-9b8e-bebd4df14f90)

In the Komment table the user will be able to click on the URL which will open up in a new tab:

![](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MZwSjw5qBNoK6JlT8Sg%2F-MZwWvMzrHgCr1fMgOo9%2FUrl2.png?alt=media\&token=7fdfcc6b-c2cf-4a7b-ac59-14228b90ce48)

## `Field`

**Description:** Works like a hidden Readonly widget but the data contained in the Field value is saved.

![Field](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MXkJ6wR2VuPVmMKWV_1%2F-MXkKxQRn3SGgi96w3IL%2FField_widget.png?alt=media\&token=413ac147-3de0-415f-a11d-218d8e5fcbc6)

**Use cases:**

* Use it when you want to save additional data together with the editable widgets.
* Could be key fields you want to store with the rest of the created data but that should not be visible to the end user.

## `Text`

**Description:** Plain text input, mainly for free text.

<div align="center"><img src="https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3LVL2G0KdNc25vprpH%2F-M3LjnhtgGgpYyL2wkxC%2FText.png?alt=media&#x26;token=7414ff28-30e7-446b-93ec-6847028a43ce" alt="Text"></div>

**Options:**&#x20;

* Choose between a single line or multiple line display
* Ability to limit the maximum number of characters a user can write

## **`Date`**

**Description:** A date picker to easily select a date from a calendar view

&#x20;

![Date picker](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3Ll9hkwAilk45ciHEt%2F-M3LnCS4zfaM42CuVRLd%2FDate.png?alt=media\&token=46386c95-3a12-44d8-aaeb-d546c70e36ff)

**Options:**

* Select via a calendar view
* Type date directly in widget
* Define the format in which the date should be displayed

## `Dropdown`

**Description**: A drop-down menu with configurable options as input data

&#x20;

![Dropdown setup](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MdLyb-9xBfvdVtPyucb%2F-MdM686iyCgaLaENP4lw%2FDropdown_options.png?alt=media\&token=edf59f8c-e2cd-409f-8624-cdd635fdcfca)

![Status UI](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3LnKU00M0VnnbtdtzK%2F-M3MJov8QJapgM_PU_Fk%2FStatus2.png?alt=media\&token=23dbe2d3-340b-47f3-b095-9408882e94a8)

![Dropdown search](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MdLyb-9xBfvdVtPyucb%2F-MdM6ZXKerOmUGdejmjA%2FDropdown_search3.png?alt=media\&token=265b0d28-d1fa-40bc-95bd-cac56fce5295)

![Dropdown - add new item](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MdLyb-9xBfvdVtPyucb%2F-MdM6ysnIiDUcPIIsvax%2FDropdown_additem.png?alt=media\&token=e9ae628e-3600-411b-b756-a49191ae8854)

**Options**:

* Define possible values manually
* Load possible values from Qlik data field or variable (e.g. use the **concat** function like this in the Options field: `Concat(distinct [First Name],';')` )
* Enable a search option for the users
* Enable users to add their own options in case the possible ones are not sufficient
* Allow for the selection of multiple values

## `Group`

**Description**: Similar to the Select option but renders the options as grouped buttons

![Group setup](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3MKQLnq7EYnR7lseDP%2F-M3MNBsUSAi-4YyVYR3t%2FGroup1.png?alt=media\&token=28fe4961-0090-4e14-9f5e-fafbfd34fdd4)

![Group UI](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3MKQLnq7EYnR7lseDP%2F-M3MNKQ1hD-MzmooZjEg%2FGroup2.png?alt=media\&token=d18086c3-04f6-44f5-ac1b-6ef3c7e7b95e)

**Options**:

* Define possible values manually
* Load possible values from Qlik data field or variable (e.g. use the **concat** function like this in the Options field: `Concat(distinct [First Name],';')` )
* Define colors for each button

## `Number`

**Description**: A numeric input field formatted as a number

![Number widget](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MSmPddtwS5uuRX86GSy%2F-MSmSF4DLzcWfIo9I-TE%2FNumber%20widget.png?alt=media\&token=d514d2ef-3d5a-4f47-a05d-725d418d64d1)

![Number Type and Decimals](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MSmPddtwS5uuRX86GSy%2F-MSmS1Ws9eGi3cptKDuE%2FNumber%20type.png?alt=media\&token=c5eeaccf-b6ed-4ab7-b533-754a28acdc6e)

**Options**:

* Define **Number Type**. Can be set to either Number or Percentage
* Define number of D**ecimals** to be included
* Enter number directly in input field
* Toggle number up and down directly in widget

## `Check`

**Description**: Works as a check box to easily indicate e.g. completion of a task

![Check setup](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3MKQLnq7EYnR7lseDP%2F-M3MPYWoanY74Tgx6t1Y%2FCheck1.png?alt=media\&token=60f2d6b8-5621-40f9-b3ff-f015172bbbf0)

![Check UI](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3MKQLnq7EYnR7lseDP%2F-M3MPc1yURtocKrHn5cN%2FCheck2.png?alt=media\&token=d05254a7-6980-4dbd-a1fc-122eb293773f)

## `Variable`

**Description**: This widget is not visible through UI. It’s used to pass a hard coded/calculated value to the back-end when saving comments. It is mainly used for meta info to control customized saving procedure during data reload.

![Variable setup](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3MKQLnq7EYnR7lseDP%2F-M3MQVztjmia3l-4nG1K%2FVariable.png?alt=media\&token=b5a941e2-747d-4a54-92f2-23c929a3ab2d)

**Options**:

* Define either a hard-coded or calculated value that is passed to a variable

{% hint style="info" %}
Remember to define the variable name in the variable editor or in the data load editor
{% endhint %}

## `Validation`

**Description**: Use this for any conditional checks before saving the input. A validation expression is required here to check if the input data is fulfilling requirements and limits. Check the other widgets’ content by evaluating the binding variables in each widget.

![Validation setup](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3MKQLnq7EYnR7lseDP%2F-M3MTjulSWnT_9oU2vUp%2FValidation1.png?alt=media\&token=2b8fa0eb-419c-4ab9-b38d-53c61b5c1b11)

![Validation UI](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-M3MKQLnq7EYnR7lseDP%2F-M3MToGrbuuA6MQHdxsP%2FValidation2.png?alt=media\&token=176b9956-418f-40c6-bccc-ebeebe442dee)

**Options**:

* Define exact expression to be used for a given validation step - e.g. only allow for 1 record to be saved each time.
* Define the desired message the user should be presented with when the validation expression is not met.

{% hint style="warning" %}
The validation widget is not valid to use in Table mode.
{% endhint %}

## `Container`

**Description**: This widget is only relevant to use when Komment is in `Form`or `Popup` mode. The Container widget is used to group the other widgets. It is possible to give each widget a custom label that is visible to the end user:

![](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MLHfVc-6TliyGMsoeeD%2F-MLHhAtVXlz1N6LSsOHr%2FContainer1.png?alt=media\&token=b5690177-fbbc-4468-a60b-a55189a60bbd)

**Grouping:** The widgets to be grouped together are simply arranged below each container widget that. i.e. you can have multiple Container widgets included in each Form.

![](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MLHfVc-6TliyGMsoeeD%2F-MLHj8c6d7W4s-VvpZqS%2FContainer2.png?alt=media\&token=2bde404d-f1ae-4f40-b98d-59a9e5caa4b2)

**Display:** You can use the settings for Column and Row span for each Container widget to define how they are displayed within the Form.

![Column and Row span](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MLHjkBSDksTPVPwX9JH%2F-MLHkHfe8swhtlAPUi-T%2FContainer3.png?alt=media\&token=9d6c9478-7cd9-4fa3-91d5-f6538d9d0bfd)

In the example above with the three Container widgets the settings for each of them are as follows:

* **Container 1:** Column (12) | Row (1)
* **Container 2:** Column (8) | Row (1)
* **Container 3:** Column (4) | Row (1)

## `Notification`

**Description**: This widget is to be used when you want to allow users to save data that can be used to send notifications to other users via mail or messenger apps.

**Current scope:**

* The widget is setup to save data that can be passed on to other systems or services out side Qlik Sense and Komment. e.g. you need to use for instance a trigger in your MS SQL DB to pass on the information that is saved in the notification widget. However, it should also be possible to rely only on Qlik scripting if you follow this tutorial: <https://ptarmiganlabs.com/blog/2020/10/18/post-messages-to-microsoft-teams-from-qlik-sense/>
* Currently it is only possible to select one user to which the notification can be sent to

**Options:**

![Notification setup](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MdMW2Upm_kVPItqyQ72%2F-MdMXvWiM8gqVIIo8fGa%2FNotification1.png?alt=media\&token=873a2de9-c08c-439b-8be7-8a576e66ba61)

* Define the Field name in the Fact table which should hold the saved data
* Define the user names, user initials, emails etc. which can be selected
* Define the name of the button shown to the end user

**Display:**

![Notification widget - end user display](https://3285996621-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3GVUHw4oTRoOiEo4EB%2F-MdMW2Upm_kVPItqyQ72%2F-MdM_9icYGTFBpRWLIRx%2FNotification.gif?alt=media\&token=562b7be5-4a0f-4b9f-93fa-aeeab4c8c939)

The user can select:

1. The user who should receive a notification
2. The field in the Fact table they should pay attention to
3. A free text message

**Output:**

The input from the user is stored as a string value in the chosen Field. In addition the URL to the Qlik Sense app and sheet is stored as well which makes it easy to get the notification recipients to go directly to the place where you want them to take action.

Example of the output:

```
lam|Country|Message about USA|https://qliksense22.s-cubed.local/sense/app/8c807dee-1391-4fc7-93cd-4454a7d14e0a/sheet/e905116a-f41d-4568-846d-5ff558b1e20d/state/analysis
```

1. User = lam
2. Field of interest = Country
3. Message = Message about USA
4. URL to sheet in app = <https://qliksense22.s-cubed.local/sense/app/8c807dee-1391-4fc7-93cd-4454a7d14e0a/sheet/e905116a-f41d-4568-846d-5ff558b1e20d/state/analysis>

###
