Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ Dropdown controls allow multiple options to be expanded from a menu. Dropdowns h
| --- | --- |
| **Outline** | The outline style is the primary variation that should be used. It can be used by itself, on forms, or within dialogues. |
| **Line**<br/>(label optional) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | Line style dropdowns are useful in areas that have cramped vertical space. This dropdown style can be stacked within panels to avoid a boxy wireframe feel. While the label is optional, we encourage using it to better inform users about the category of items. |
| **Text** | This style allows the user to access options from a dropdown or flyout menu. This style works well in tool and start bars, as well as in dialogs and menus. |
| **Text** | This style allows the user to access options from a dropdown or flyout menu. This style works well in tool and start bars, as well as in dialogs and menus. |
| **Icon** | The icon style works best in small regions such as tool bars, and is great for switches that have several options. |

&nbsp;
Expand Down
19 changes: 12 additions & 7 deletions website/docs/core/trex_configure.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
---
title: Add a Configuration Popup Dialog
title: Add a Configuration Popup Dialog Box
description: How to add a configuration dialog box to the extension
---

If you want users to be able to configure settings for your extension, you can use an optional callback function when you initialize your dashboard or viz extension. The callback function creates a configuration option that can be used to open a popup window (a modal dialog box) for your extension. You can use this popup window to allow users to set and save settings for the extension.
If you want users to be able to configure settings for your extension, you can use an optional callback function when you initialize your dashboard or viz extension. The callback function creates a configuration option that can be used to open a popup window (dialog box) for your extension. The Extensions API supports different dialog box styles: modal, modeless, or window. You can use the dialog box to allow users to set and save settings for the extension. Starting with Tableau 2026.1 (and the v1.16 library), you can create multiple dialog boxes and send messages between them.

:::info

By design, there can be only one context configuration popup window or dialog box. For information about creating and using multiple pop dialog boxes or window, see [Add a Multiple Popup Dialog Boxes](trex_multiple_dialogs.md).

:::

## Add the context menu to the `.trex` file

The first step is to add the `<context-menu>` option to the extension's manifest file (`.trex`). The `<context-menu>` element only contains one item: `<configure-context-menu-item />`.
The first step is to add the `<context-menu>` option to the extension's manifest file (`.trex`). The `<context-menu>` element only contains one item: `<configure-context-menu-item />`.

* The context menu option must follow the `<icon>` and `<permissions>` elements in the manifest file in the `<dashboard-extension>` or `<worksheet-extension>` section:
* The context menu option must follow the `<icon>` and `<permissions>` elements in the manifest file in the `<dashboard-extension>` or `<worksheet-extension>` section:

```xml
<!-- add to <dashboard-extension> or <worksheet-extension> section
Expand All @@ -36,7 +41,6 @@ with adding a `<context-menu>` item to the manifest, adds a new **Format Extensi

When the user selects the context menu item, or selects **Format Extensions** button, the configuration function you specified is executed.


**Dashboard extensions configuration menu**

![](../assets/extension_configure_menu.png)
Expand Down Expand Up @@ -69,7 +73,6 @@ $(document).ready(function () {




function configure() {
// ... code to configure the extension
// for example, set up and call displayDialogAsync() to create the configuration window
Expand All @@ -82,9 +85,11 @@ $(document).ready(function () {
// to be updated if the extension is deployed to a new location.
const popupUrl = `${window.location.origin}/Samples/Dashboard/UINamespace/uiNamespaceDialog.html`;
//
// Specify the style of dialog box: modal, modeless, or window
let dialogStyle = tableau.DialogStyle.Modeless;
// ...
// initial payload string value, `defaultIntervalInMin` set
tableau.extensions.ui.displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500 }).then((closePayload) => {
tableau.extensions.ui.displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500, dialogStyle }).then((closePayload) => {
// The promise is resolved when the dialog has been expectedly closed, meaning that
// the popup extension has called tableau.extensions.ui.closeDialog.
// ...
Expand Down
Loading
Loading