Modal alert
Creates a warning that alerts users about something important and prompts them to take
the appropriate action before closing the alert window.
Configuration properties
Under Configuration, set or modify the appearance and behavior properties for the view.
- Screen size
- A configuration property that has the Screen Sizes icon
beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
- Theme definitions
- Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for the Modal alert view are shown in the following
table:
Appearance configuration property | Description | Data type |
---|---|---|
Color style | Specifies the color and icon for the modal alert. The colors correspond to variables in the specified theme. | String |
Button label | The label of the button inside the modal alert. The default label is OK. | String |
Help | The text that is displayed in the alert. You can use basic html tags, for
example, <b></b> . Note: This property is in the
General properties tab.
|
Example
As an example, say you want to display a warning dialog which the user must close before they can return to the main screen. Typically, the dialog would be loaded programmatically but for demonstration purposes you use a button to launch the dialog.- Open the client-side human service that you are working with.
- In the Starting page of your UI, drag a Modal alert view and a Button view onto the editor.
- Select the Modal alert view on the canvas, and click
Properties
to set the properties of the view:
- Under Color style to Warning, and specify Close for the Button label. , set
- Under General, enter the following text in the
Help field:
This text appears inside the <b>Modal alert</b>
- Under Visibility, set the visibility to Hidden.
- Select the Button view, and click Properties
) to set the properties of the view:
- Under General, specify Alert as the button label.
- Under Color style to Warning and the width to 100%. , set
- Under Events, configure the on click event so
that the modal alert is loaded when the button is clicked. Enter the following code in the
on click event:
Tip: Modal_Alert1 is the control ID of the modal alert view that you created. To get the control ID, go to the page.${Modal_Alert1}.setVisible(true);
- At run time, a browser opens showing the Alert button:
- Click the Alert button. The modal alert appears:
- Click Close. The modal alert closes.
Events
Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.The Modal alert view has the following
types of event handlers:
- On load. Activated when the page loads. For example:
me.setVisible(true)
- On close Activated when the Modal alert button is clicked. For example:
${Text}.setText("Modal alert is closed")
- On show. Activated when the Modal alert is opened,
for example
me.setText("Modal alert is open...");
Methods
For more information about the available methods, see the Modal alert JavaScript API.
Additional resources
For information about how to create a coach or page, see Building coaches.
For information about standard properties
(General, Configuration,
Positioning, Visibility, and HTML
Attributes), see View properties.