diff --git a/docs/app-selections.md b/docs/app-selections.md index 2e387a72f..9a0e8b189 100644 --- a/docs/app-selections.md +++ b/docs/app-selections.md @@ -1,6 +1,46 @@ --- id: app-selections -title: App selections +title: Current app selections --- -TODO +An essential part of the Qlik experience is filtering data through selections. Most charts support selections in the data they render, which will then filter out data and affect other charts connected to the same data model. + +## Current app selections bar + +The current app selections bar shows you the currently active selections in the specified app. To render this bar you need an `HTMLElement` first: + +```html +
+``` + +You can then `mount` the selections UI into that element: + +```js +const n = nucleus(enigmaApp); + +await (n.selections()).mount(document.querySelector('.curr-selections'); +``` + +Without any selections it should like this: + +![Empty selections bar](assets/selections-empty.png) + +As you start applying selections in the various charts, the UI will update to reflect the current state: + +![Update selections bar](assets/selections-update.gif) + +## Multiple bars + +If you are connected to multiple apps, you can show the current selections in each one by mounting the bar into different elements: + +```js +await nucleus(enigmaApp) + .selections() + .mount(document.querySelector('.curr-selections')); + +await nucleus(anotherApp, { context: { theme: 'dark' } }) + .selections() + .mount(document.querySelector('.another-curr-selections')); +``` + +![Multiple selections](assets/selections-multiple.gif) diff --git a/docs/assets/selections-empty.png b/docs/assets/selections-empty.png new file mode 100644 index 000000000..2af725ad0 Binary files /dev/null and b/docs/assets/selections-empty.png differ diff --git a/docs/assets/selections-multiple.gif b/docs/assets/selections-multiple.gif new file mode 100644 index 000000000..a848bb2d7 Binary files /dev/null and b/docs/assets/selections-multiple.gif differ diff --git a/docs/assets/selections-update.gif b/docs/assets/selections-update.gif new file mode 100644 index 000000000..d9c5b1351 Binary files /dev/null and b/docs/assets/selections-update.gif differ diff --git a/website/i18n/en.json b/website/i18n/en.json index 747ed390f..514fcc1e9 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -6,7 +6,7 @@ "tagline": "A new star on the rise", "docs": { "app-selections": { - "title": "App selections" + "title": "Current app selections" }, "installation": { "title": "Installation"