Closes the extension's dialog. Can be called from the popup dialog or from the extension itself.
The payload is optional, and if specified, it is made available to parent extension when
this popup dialog closes. If the extension running in the popup dialog window does not return
a payload, you must still provide an empty string " " as a return value.
tableau.extensions.ui.closeDialog('myPayload string');
The following example shows a call to the closeDialog method when the dialog extension does not return a payload.
// specify an empty string if no payload is returned
tableau.extensions.ui.closeDialog('');The url of the 'dialog extension' to navigate to in the dialog. The url must belong to the same domain as the parent extension.
The payload is optional, and is used to provide data to the popup dialog window
at startup. The payload will be returned to the dialog extension as the return
value of the call to the tableau.extensions.ui.initializeDialogAsync function.
If no payload is provided, you must indicate this with an empty string " ".
Specifies the options for the popup dialog window.
The dialogOptions has properties for width and height (in pixels) and a property for the dialog's style.
The dialog style can be a window, a modal dialog, or a modeless dialog. If style is not specified, window will be used.
You pass these properties to the displayDialogAsync function, as follows:
{width: number, height: number, dialogStyle: DialogStyle}
A promise that resolves when the dialog has been closed. It will contain a payload as a string provided by the dialog extension. The promise is rejected if the user manually closes the dialog window (for example, by clicking the 'X' in window). It is good practice to handle this error condition with a catch block, as in the following example.
tableau.extensions.ui.displayDialogAsync(popupUrl, defaultPayload, { width: 500, height: 500 }).then((closePayload) => {
//
// The promise is resolved when the dialog has been closed as expected, meaning that
// the popup extension has called tableau.extensions.ui.closeDialog() method.
// The close payload (closePayload) is returned from the popup extension
// via the closeDialog() method.
//
}).catch((error) => {
// One expected error condition is when the popup is closed by the user (meaning the user
// clicks the 'X' in the top right of the dialog). This can be checked for like so:
switch(error.errorCode) {
case tableau.ErrorCodes.DialogClosedByUser:
console.log("Dialog was closed by user");
break;
default:
console.error(error.message);
}
});A message to send.
The url of the dialog to send the message to. If not provided, the message will be sent to the parent extension.
// Sending a message from the dialog to the extension:
// extension code (listening for messages originating from the dialog)
tableau.extensions.ui.addEventListener(tableau.TableauEventType.DialogMessageReceived, (e) => {
console.log('Message received from dialog: ' + e.message);
})
tableau.extensions.ui.displayDialogAsync(popupUrl);
...
// dialog code (sending message to extension)
await tableau.extensions.initializeDialogAsync();
await tableau.extensions.ui.sendDialogMessageAsync('Hello from dialog!');
// Sending a message from the extension to the dialog:
// dialog code (listening for messages originating from the extension)
await tableau.extensions.initializeDialogAsync();
tableau.extensions.ui.addEventListener(tableau.TableauEventType.DialogMessageReceived, (e) => {
console.log('Message received from extension: ' + e.message);
})
...
// extension code (sending message to dialog)
tableau.extensions.ui.displayDialogAsync(popupUrl);
// waiting a bit for dialog to appear before sending message.
// notice the intentional omission of await in calls to displayDialogAsync.
// that's because if we await, we wont run any code after that line until the dialog closes and the promise returns.
setTimeout(() => tableau.extensions.ui.sendDialogMessageAsync('Hello from extension!', popupUrl), 1000);
The UI namespace contains methods that allow an extension to display a popup dialog window. A modal dialog can be useful in authentication or configuration scenarios, or when extra situational UI space is needed. Only one dialog can be displayed at a time per extension. Inside the popup dialog window, another extension can be loaded and run. This dialog extension will have full access to the functions provided by the Extensions API. One difference between the extension running in the popup dialog window and an extension running in the dashboard is that the popup dialog window must call the
initializeDialogAsync()method instead ofinitializeAsync()to initialize the extension.Note If you want to use a popup dialog window on Tableau Server, you need to let users know that their browser must be configured to allow popups.