Open a dialog from within a custom integration.
[Custom integrations](🔗) can open a dialog. A dialog cannot be configured as a standalone integration and must be opened from a custom integration. In the configuration of these integrations, some properties can be included to be used for the dialog, such as the dialog title. The dialog can for example be used to pick a value for a field from a list.
The same [client library](🔗) that is used for integrations can be used for dialogs. The dialog is opened by the Bloomreach Content application and gets a header bar with a title and a button to close the dialog. The dialog will be shown in an iframe.
Opens a modal dialog. See the table below for the keys this object can contain. Returns a promise. The behavior of the promise depends on how the dialog is closed (see `
ui.dialog.close()` and `
ui.dialog.cancel()`). When a dialog is already open the promise is rejected directly with the error code "DialogExists" to prevent nested dialogs.
Returns a promise that resolves with the options object of the current open dialog. The code running in the dialog can use this to, for example, get the current value of the field passed in the options. When no dialog is open, the promise is rejected with error code "IncompatibleParent".
Closes the open modal dialog and resolves the Promise returned by ui.dialog.open() with the given value. When no dialog is open, the Promise is rejected with error code "IncompatibleParent".
Closes the open dialog and rejects the Promise returned by ui.dialog.open() with error code "DialogCanceled". When no dialog is open, the Promise is rejected with error code "IncompatibleParent".
### Dialog Options
The following dialog options are available:
|Column Title||Column Title|
|`||The size of the dialog. Choice from DialogSize enum: 'small', 'medium' or 'large'. Default is 'medium'.|
|`||The title text of the dialog.|
|`||The URL for the iframe in the dialog, loading the dialog. The URL can either be absolute or relative to the URL of the integration.|
## Code Example
This example adds a dialog to the [Document Field Integration example](🔗). Instead of setting the field value directly, the button in the integration opens a dialog, and clicking on a button inside the dialog sets the field value.
The HTML for this integration is very similar to the one in the [Document Field Integration example](🔗): it renders a button and loads the appropriate scripts:
The script is also a variation on the one from the [Document Field Integration example](🔗), replacing the `
setFieldValueButton()` method with a new method `
dialogButton()`. This method enables the button, configures the dialog, and adds an event listener to the button to open the dialog when the button is clicked. It then waits for a response from the dialog and uses it to set the field value:
The dialog itself also needs an HTML file, which is very similar to index.html: it renders a button and loads the appropriate scripts:
The script for the dialog adds a 'click' event listener to the button inside the dialog to close the dialog and return the value "Hello Dialog":