You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-3Lines changed: 13 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,6 +32,7 @@ flowchart TD
32
32
* A native Qlik Sense extension built using modern Nebula.js hooks.
33
33
* Works on **both Qlik Sense SaaS (Cloud)** and **Client-Managed Qlik Sense (Enterprise)**.
34
34
* Easily configured by developers from within the Qlik Sense Property Panel (custom colors, icons, menus).
35
+
* Supports three menu item types: **outbound links**, **bug report dialogs**, and **user feedback dialogs** (with star rating and free-text comments).
35
36
* To use, simply drop the extension on a sheet, and it will dynamically inject the button into the global toolbar when the user switches to Analysis mode.
36
37
37
38
### 2. HTML Injection (Client-Managed only)
@@ -79,11 +80,20 @@ Both methods support localized interfaces so you can provide menus built for you
79
80
80
81
> **A note on folder names (HTML Variants):** Language folders are named using [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)**language** codes, not [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)**country** codes. For example, Danish is `da` (not `dk`), Swedish is `sv` (not `se`), and German is `de` (not the country-code for Germany, which is also `de` by coincidence).
81
82
82
-
### Demo Server (Bug Report Webhook)
83
+
### Demo Server (Bug Report & Feedback Webhook)
83
84
84
-
Both the extension and the HTML Bug Report variant can submit reports to a configurable webhook endpoint. A ready-to-use **Express.js demo server** is included for local testing and development — see the [Demo Server documentation](./shared/demo-server/README.md).
85
+
Both the extension and the HTML Bug Report variant can submit reports to a configurable webhook endpoint. The extension's Feedback dialog also POSTs data to a webhook. A ready-to-use **Express.js demo server** is included for local testing and development — see the [Demo Server documentation](./shared/demo-server/README.md).
85
86
86
-
The demo server supports both HTTP and HTTPS, logs incoming bug reports to the console, and includes step-by-step instructions for generating self-signed certificates (required when testing with Qlik Sense Enterprise on Windows).
87
+
The demo server supports both HTTP and HTTPS, logs incoming bug reports and feedback to the console, and includes step-by-step instructions for generating self-signed certificates (required when testing with Qlik Sense Enterprise on Windows).
Copy file name to clipboardExpand all lines: docs/multi-language.md
+54-24Lines changed: 54 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# 🌐 Multi-Language Support in HelpButton.qs
2
2
3
-
The [HelpButton.qs](https://github.com/ptarmiganlabs/help-button.qs) extension injects a configurable help button into the Qlik Sense toolbar — and as of the latest release, **it automatically translates every UI string** to match the language of the Qlik Sense client.
3
+
The [HelpButton.qs](https://github.com/ptarmiganlabs/help-button.qs) extension injects a configurable help button into the Qlik Sense toolbar — and as of the latest release, **it automatically translates every UI string** to match the language of the Qlik Sense client. This includes the toolbar button, popup menu, bug-report dialog, and the new **feedback dialog**.
4
4
5
5
This post walks through how the built-in translation system works, what "defaults" mean, and how you as a Qlik Sense app developer can take advantage of it.
6
6
@@ -30,32 +30,45 @@ English (`en`) is the **ultimate fallback** — if the detected or forced locale
30
30
31
31
## 💡 What Are "Defaults"?
32
32
33
-
Every visible text string in the extension — the toolbar button label, its tooltip, the popup title, and all bug-report dialog texts — has a **built-in default value** for each supported language. These defaults are stored inside the extension bundle in a translations table.
33
+
Every visible text string in the extension — the toolbar button label, its tooltip, the popup title, all bug-report dialog texts, and all feedback dialog texts — has a **built-in default value** for each supported language. These defaults are stored inside the extension bundle in a translations table.
34
34
35
35
When you add the extension to a sheet and leave the text fields in the property panel **empty**, the extension does not show blank text. Instead it automatically fills in the correct default for the active language. This is what "default" means in the context of HelpButton translations: **the pre-packaged translated string that is used when the developer has not typed a custom value.**
36
36
37
37
### Translated strings
38
38
39
-
Note: Not all of the strings listed below are visible in the property panel as of v2.0. The missing ones will be added as extension properties in a future release.
40
-
41
-
The following UI elements have built-in defaults for all 9 languages:
42
-
43
-
| UI Element | Translation Key | English Default |
44
-
|---|---|---|
45
-
| Toolbar button label |`buttonLabel`| Help |
46
-
| Toolbar button tooltip |`buttonTooltip`| Open help menu |
47
-
| Popup title |`popupTitle`| Need assistance? |
48
-
| Bug-report dialog title |`bugReportTitle`| Report a Bug |
49
-
| Description field label |`bugReportDescriptionLabel`| Description |
50
-
| Description placeholder |`bugReportDescriptionPlaceholder`| Describe the issue you encountered… |
| Edit-mode placeholder description |`editPlaceholderDescription`| Injects a help button into the toolbar. Configure menu items in the property panel. |
58
-
| Analysis-mode placeholder |`analysisPlaceholder`| Help button active in toolbar |
39
+
The following UI elements have built-in defaults for all 9 languages (23 translation keys in total).
40
+
41
+
Most strings are configurable via the property panel. The exceptions are noted below — these are used internally by the extension and are not exposed as editable fields.
42
+
43
+
| UI Element | Translation Key | English Default | In property panel? |
44
+
|---|---|---|---|
45
+
|**Toolbar & popup**||||
46
+
| Toolbar button label |`buttonLabel`| Help | ✅ |
47
+
| Toolbar button tooltip |`buttonTooltip`| Open help menu | ✅ |
48
+
| Popup title |`popupTitle`| Need assistance? | ✅ |
49
+
|**Bug-report dialog**||||
50
+
| Dialog title |`bugReportTitle`| Report a Bug | ✅ |
51
+
| Description field label |`bugReportDescriptionLabel`| Description | ✅ |
52
+
| Description placeholder |`bugReportDescriptionPlaceholder`| Describe the issue you encountered… | ✅ |
| Edit-mode placeholder title |`editPlaceholderTitle`| HelpButton.qs | ❌ |
70
+
| Edit-mode placeholder description |`editPlaceholderDescription`| Injects a help button into the toolbar. Configure menu items in the property panel. | ❌ |
71
+
| Analysis-mode placeholder |`analysisPlaceholder`| Help button active in toolbar | ✅ |
59
72
60
73
---
61
74
@@ -142,7 +155,7 @@ flowchart TD
142
155
143
156
| From → To | Effect |
144
157
|---|---|
145
-
| Auto-detect → Specific language | A confirmation prompt appears. If accepted, all translatable fields (button label, tooltip, popup title, bug-report dialog title) are **overwritten** with the standard translations for that language. You can then edit any of them. |
158
+
| Auto-detect → Specific language | A confirmation prompt appears. If accepted, all translatable fields (button label, tooltip, popup title, bug-report dialog texts, and feedback dialog texts) are **overwritten** with the standard translations for that language. You can then edit any of them. |
146
159
| Specific language → Auto-detect | A confirmation prompt appears. If accepted, all translatable fields are **cleared** (set to empty). This means the extension will auto-detect the language at runtime and use the built-in defaults. |
147
160
| Specific language → Another language | Same as the first case — fields are overwritten with the new language's defaults. |
148
161
@@ -167,13 +180,14 @@ flowchart TB
167
180
GEL["getEffectiveLocale()"]
168
181
GT["getTranslation()"]
169
182
RT["resolveText()"]
170
-
TT["translations table (9 languages × 15 keys)"]
183
+
TT["translations table (9 languages × 23 keys)"]
171
184
end
172
185
173
186
subgraph "UI Components (Analysis Mode)"
174
187
TB["Toolbar button"]
175
188
PM["Popup menu"]
176
189
BRD["Bug-report dialog"]
190
+
FD["Feedback dialog"]
177
191
end
178
192
179
193
LP -- "language property" --> SFL
@@ -187,6 +201,7 @@ flowchart TB
187
201
RT -- "resolved string" --> TB
188
202
RT -- "resolved string" --> PM
189
203
RT -- "resolved string" --> BRD
204
+
RT -- "resolved string" --> FD
190
205
```
191
206
192
207
---
@@ -217,6 +232,21 @@ Leave the dropdown on **Auto-detect** but type a custom value in one or more tex
217
232
218
233
> **Note:** Custom text values are language-agnostic — they are shown to all users regardless of locale. If you need different custom text per language, use Scenario 2 or Scenario 3 instead.
219
234
235
+
### Scenario 5 — Feedback dialog with auto-translated strings
236
+
237
+
The feedback dialog (available when a menu item's action is set to **Open Feedback dialog**) participates fully in the translation system. All 8 feedback dialog strings — title, rating label, comment label, comment placeholder, submit button, cancel button, success message, and error message — have built-in translations for all 9 languages.
238
+
239
+
The same rules apply as for the bug-report dialog: leave the property-panel fields empty and the extension fills in the correct translation at runtime. Type a custom value and it is used as-is.
240
+
241
+
For example, a Finnish user (`fi`) who opens the feedback dialog with all fields left empty will see:
242
+
243
+
| Field | Finnish default |
244
+
|---|---|
245
+
| Dialog title | Lähetä palautetta |
246
+
| Rating label | Miten arvioisit tämän sovelluksen? |
Copy file name to clipboardExpand all lines: extension/README.md
+61-5Lines changed: 61 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,9 @@
8
8
-**Cross-Platform Support**: Automatically detects and works on both **Qlik Sense SaaS (Cloud)** and **Client-Managed Qlik Sense (Enterprise)** environments, with same features on both platforms.
9
9
-**Invisible Footprint**: The extension cell itself can be configured to be invisible to end-users on the sheet, suppressing default interactive grid cell menus and hover menus.
10
10
-**Extensive Customization**: Configure colors, icons, languages, and menu actions directly from the Qlik Sense property panel.
11
+
-**Theme Presets**: Apply one of four predefined color palettes (Default, Lean Green, Corporate Blue, Corporate Gold) to instantly style the toolbar button, popup, and menu items to your corporate brand.
11
12
-**Context-Aware Links**: Dynamically pass application context (such as App ID, Sheet ID, and user details) to outbound links using template tags.
13
+
-**Built-in Translations**: Supports automatic UI translation into multiple languages based on Qlik Sense locale, with full override capabilities via an expandable "Language & Translations" section in the property panel (see [language & translations docs](docs/language-and-translations.md) for details).
12
14
13
15
## Audience
14
16
@@ -18,8 +20,8 @@ This extension is designed to be added by **Qlik Sense Administrators and Develo
18
20
19
21
When you drag and drop the extension onto a sheet:
20
22
21
-
1. In **Edit Mode**: It displays a placeholder within the grid cell. This allows developers to select it and configure its settings via the standard Qlik Sense Property Panel.
22
-
2. In **Analysis Mode**: The extension dynamically removes itself from the sheet's visual flow and injects a button into the top application toolbar.
23
+
1. In **Edit Mode**: It displays a placeholder within the grid cell indicating the current active features (e.g. `4 menu items · Bug report: On · Feedback: On` where "On" implies at least one active menu item is configured with that corresponding action type). The help button itself also remains visible down in the grid cell, allowing developers to immediately test menu items while configuring them via the standard Qlik Sense Property Panel.
24
+
2. In **Analysis Mode**: The extension dynamically removes itself from the sheet's visual flow and injects the actual button into the top application toolbar.
23
25
24
26
```mermaid
25
27
flowchart TD
@@ -29,7 +31,7 @@ flowchart TD
29
31
B -- Analysis Mode --> E[Hide/Show Minimal Grid Cell]
30
32
E --> F[Inject Button to Global Toolbar]
31
33
F --> G[User clicks Help Button]
32
-
G --> H[Open Links/Bug Report with App Context]
34
+
G --> H[Open Links/Bug Report/Feedback with App Context]
33
35
```
34
36
35
37
## Installation
@@ -41,13 +43,13 @@ flowchart TD
41
43
## Usage
42
44
43
45
1. Open your Qlik Sense application in Edit Mode.
44
-
2. Drag the **Help Button** extension from the Custom Objects panel onto your sheet.
46
+
2. Drag the **HelpButton.qs** extension from the **.qs Library** bundle inside the Custom Objects panel onto your sheet.
45
47
3. Configure the appearance, links, and behavior in the Property Panel on the right.
46
48
4. Switch to Analysis Mode to see the button appear in the top toolbar.
47
49
48
50
## Menu Item Types
49
51
50
-
When configuring the **Menu Items** in the Property Panel, you can add multiple options that map to different actions. The help button supports two types of menu actions:
52
+
When configuring the **Menu Items** in the Property Panel, you can add multiple options that map to different actions. The help button supports three types of menu actions:
51
53
52
54
1.**Outbound Link (`link`)**:
53
55
- Opens a specified URL (can be configured to open in a new tab or the same window).
@@ -56,6 +58,20 @@ When configuring the **Menu Items** in the Property Panel, you can add multiple
56
58
2.**Bug Report Dialog (`bugReport`)**:
57
59
- Opens an interactive modal directly inside Qlik Sense where users can write a detailed text description of an issue.
58
60
- Automatically bundles the user's environment metadata into a JSON payload and POSTs it to a configured webhook endpoint via a background request.
61
+
3.**Feedback Dialog (`feedback`)**:
62
+
- Opens a modal dialog where users can rate the current app (1–5 stars) and/or leave a free-text comment.
63
+
- Star rating and comment fields can each be independently enabled or disabled via the property panel.
64
+
- When the comment field is enabled, a configurable maximum character length is enforced, with a live remaining-characters counter shown in the dialog.
65
+
- Automatically gathers environment context (same fields as the bug report) and POSTs the feedback data as JSON to a configured webhook endpoint.
66
+
67
+
```mermaid
68
+
flowchart LR
69
+
subgraph Menu Actions
70
+
A[Open URL] --> B[External Link]
71
+
C[Bug Report] --> D[Modal Dialog → POST to Webhook]
72
+
E[Feedback] --> F[Modal Dialog → POST to Webhook]
73
+
end
74
+
```
59
75
60
76
## Bug Report Context Fields
61
77
@@ -83,6 +99,46 @@ The following fields are available:
|`timestamp`| Local time the report dialog was opened |`3/6/2026, 8:51:57 AM`|
85
101
102
+
## Feedback Context Fields
103
+
104
+
The **Feedback** dialog uses the same context fields as the bug report dialog. You can configure which fields to collect via the **"Context fields (comma-separated)"** setting under the Feedback Settings section in the property panel.
105
+
106
+
### Feedback Configuration
107
+
108
+
The feedback dialog supports these property panel settings:
109
+
110
+
| Setting | Type | Default | Description |
111
+
|---|---|---|---|
112
+
| Webhook URL | string |*(empty)*| POST endpoint to receive feedback data |
"comment": "Great dashboards, very useful for daily reporting."
137
+
}
138
+
```
139
+
140
+
> **Note:** The `rating` field is only included when the star rating is enabled. The `comment` field is only included when the free-text comment is enabled. At least one of the two must be enabled and filled in for the user to submit.
141
+
86
142
### Cloud vs Client-Managed Availability
87
143
88
144
Not all context fields are available on every platform. The table below summarises what each field returns on **Qlik Cloud** and **Client-Managed** (Enterprise on Windows) deployments.
0 commit comments