DialogHub
Controls system dialogs. Extends MessageHub.
- Module:
platform-core - Source: platform-core/ui/platform/dialog-hub.js
- Web Link:
/services/web/platform-core/ui/platform/dialog-hub.js - Status:
stable - Group:
platform
Basic Usage
If you are using the standard Dirigible view configuration, dialog support is automatically enabled.
If the view is expected to work outside the platform, then you must include platformDialogs in your view:
const exampleView = angular.module('exampleView', [
'blimpKit',
'platformView',
'platformDialogs'
]);
If you are making a custom view, you can include the API using the web link above.
To initialize it:
const dialogHub = new DialogHub();
<body>
<dialogs></dialogs>
</body>
Note
Use the dialogs tag only if the view is expected to work outside Dirigible.
Functions
| Function | Description | Returns |
|---|---|---|
| showAlert(AlertObject) | Opens an alert dialog. | Promise |
| onAlert(handlerFunc) | Registers a listener. Triggered when an alert dialog should be shown. Returns a function to unregister the listener. | function |
| showDialog(DialogObject) | Opens a dialog. | Promise |
| onDialog(handlerFunc) | Registers a listener. Triggered when a dialog should be shown. Returns a function to unregister the listener. | function |
| showBusyDialog(message) | Opens a dialog. | - |
| onBusyDialog(handlerFunc) | Registers a listener. Triggered when a busy dialog should be shown. Returns a function to unregister the listener. | function |
| closeBusyDialog() | Closes the current busy dialog. | - |
| showFormDialog(FormObject) | Opens a form dialog. | Promise |
| onFormDialog(handlerFunc) | Registers a listener. Triggered when a form dialog should be shown. Returns a function to unregister the listener. | function |
| showWindow(WindowObject) | Opens a dialog window. | Promise |
| onWindow(handlerFunc) | Registers a listener. Triggered when a dialog window should be shown. Returns a function to unregister the listener. | function |
Typedefs
- AlertObject :
Object - DialogObject :
Object - FormItem :
Object - FormObject :
Object - WindowObject :
Object
Note
Params in square brackets are optional.
AlertTypes : Object
Properties
| Param | Type | Description |
|---|---|---|
| Confirmation | string |
Confirmation type. |
| Error | string |
Error type. |
| Success | string |
Success type. |
| Warning | string |
Warning type. |
| Information | string |
Information type. |
AlertObject : Object
Properties
| Param | Type | Description |
|---|---|---|
| title | string |
The title for the alert. |
| message | string |
The message that will be displayed inside the alert. |
| [type] | string |
The type of the alert. See 'AlertTypes'. |
| [preformatted] | boolean |
Newline formatting of the message. If set to true, text will be displayed as-is without formatting it. Defaults to false. |
| [buttons] | Array.<Object> |
List of objects, describing a button. The object must contain an 'id', 'label' and optionally 'state' (See ButtonStates). |
DialogObject : Object
Properties
| Param | Type | Default | Description |
|---|---|---|---|
| [header] | string |
The header of the dialog. | |
| title | string |
The title for the dialog. | |
| [subheader] | string |
The subheader of the dialog. | |
| message | string |
The message that will be displayed inside the dialog. | |
| [preformatted] | boolean |
Newline formatting of the message. If set to true, text will be displayed as-is without formatting it. Defaults to false. | |
| [buttons] | Array.<Object> |
List of objects, describing a button. The object must contain an 'id', 'label' and optionally 'state' (See ButtonStates). | |
| [closeButton] | boolean |
true |
Should the dialog have a close button in the title bar. Defaults to true. |
FormItem : Object
A form item can describe several types of form inputs. Some properties are common for all and some are type specific.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| controlType | 'input' | 'textarea' | 'checkbox' | 'radio' | 'dropdown' |
Type of input. Common property. | |
| label | string |
Label for the input. Common property. | |
| [value] | string | number | object |
Value of the input. Common property. | |
| type | 'text' | 'password' | 'number' | 'date' | 'color' | 'email' | 'tel' | 'time' | 'url' | 'datetime-local' |
Type for the input. Specific to the 'input' control type. | |
| [placeholder] | string |
Placeholder text for the 'input', 'textarea' and 'dropdown' control types. | |
| [required] | boolean |
Sets the input as required. Common for all control types except 'checkbox'. | |
| [disabled] | boolean |
Sets the input as disabled. Common for all control types. On 'radio', it disables all options. | |
| [focus] | boolean |
Sets the input as focus, once the dialog appears. Common for all control types except 'checkbox', 'radio' and 'dropdown'. | |
| [maxlength] | number |
Maximum character length for the input. Common for the 'input' and 'textarea' control types. | |
| [minlength] | number |
Minimum character length for the input. Common for the 'input' and 'textarea' control types. | |
| [max] | number | string |
Maximum value for the input. Only for the 'input' control of the 'number', 'date', 'time' and 'datetime-local' types. | |
| [min] | number | string |
Minimum value for the input. Only for the 'input' control of the 'number', 'date', 'time' and 'datetime-local' types. | |
| [rows] | number |
3 |
Number of rows. Only for the 'input' control of the 'textarea'. |
| [step] | number |
Value step for the input. Only for the 'input' control of the 'number' type. | |
| [inputRules] | Object |
Validation rules for the input. The 'excluded' array can contain strings that the input should not match. The 'patterns' array can contain regex expressions for validating the input. Common for the 'input' and 'textarea' control types. | |
| [submitOnEnter] | boolean |
If the user hits the enter key, while this input is focused, the form will get submitted. Valid only for the 'input' control type. | |
| options | Array.<{label: string, value: (string|number)}> |
Options for the control type 'dropdown'. | |
| [errorMsg] | string |
The error hint that will be displayed, when the selected value is invalid. Common for all control types except 'checkbox' and 'radio'. | |
| [enabledOn] | Object |
Enables a control based on the state of another control. The 'key' property is the id of the target control. The 'value' is the value of the target control. If you only provide the key, it will get enabled when the target control has any valid value. If you also provide the value, it will get enabled when the target control's value matches. | |
| [disabledOn] | Object |
Same as 'enabledOn' but with an opposite effect. | |
| [visibleOn] | Object |
Same as 'enabledOn' but instead of disabling/enabling the control, it will show/hide it. | |
| [hiddenOn] | Object |
Same as 'visibleOn' but with an opposite effect. |
FormObject : Object
Properties
| Param | Type | Description |
|---|---|---|
| [header] | string |
The header of the dialog. |
| title | string |
The title for the dialog. |
| [subheader] | string |
The subheader of the dialog. |
| form | Object.<string, FormItem> |
Object containing form item definitions. The key for each definition is used as id. |
| [submitLabel] | string |
Label for the submit button. |
| [cancelLabel] | string |
Label for the cancel button. |
| [width] | string |
Custom width for the window. This maps to the CSS width propery. |
| [height] | string |
Custom height for the window. This maps to the CSS height propery. |
| [maxWidth] | string |
Custom max width for the window. This maps to the CSS max-width propery. |
| [maxHeight] | string |
Custom max height for the window. This maps to the CSS max-height propery. |
| [minWidth] | string |
Custom min width for the window. This maps to the CSS min-width propery. |
| [minHeight] | string |
Custom min height for the window. This maps to the CSS min-height propery. |
WindowObject : Object
Properties
| Param | Type | Default | Description |
|---|---|---|---|
| [hasHeader] | boolean |
true |
If the dialog should have a header. |
| [header] | string |
The header of the dialog. | |
| [title] | string |
The title for the window. Use this only when providing a custom path, instead of widnow id. | |
| [subheader] | string |
The subheader of the dialog. | |
| [id] | string |
ID of the view that should be opened inside the dialog window. Alternatevly, you can use 'path' instead and provide a direct URL. | |
| [path] | string |
When showing a custom view, you can provide a direct URL. | |
| [params] | Object |
Parameters that will be provided as a 'data-parameters' attribute that the view can read. | |
| [width] | string |
"95%" |
Custom width for the window. This maps to the CSS width propery. |
| [heigh] | string |
"90%" |
Custom height for the window. This maps to the CSS height propery. |
| [maxWidth] | string |
"1280px" |
Custom max width for the window. This maps to the CSS max-width propery. |
| [maxHeight] | string |
"768px" |
Custom max height for the window. This maps to the CSS max-height propery. |
| [minWidth] | string |
Custom min width for the window. This maps to the CSS min-width propery. | |
| [minHeight] | string |
Custom min height for the window. This maps to the CSS min-height propery. | |
| [callbackTopic] | string |
Callback topic for when the window has been closed. | |
| [closeButton] | boolean |
true |
Should the dialog have a close button in the title bar. |
Example
dialogHub.showFormDialog({
title: "What's your nickname?",
form: {
'nick': {
label: 'Nickname',
controlType: 'input',
type: 'text',
placeholder: 'Current nickname',
submitOnEnter: true,
focus: true,
required: true
},
},
submitLabel: 'Submit',
cancelLabel: 'Cancel'
}).then((form) => {
if (form) {
console.log(form['nick']);
}
});
For a full example you can look at sample-platform.