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 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:
Table 1. Appearance configuration properties for Modal alert
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.
  1. Open the client-side human service that you are working with.
  2. In the Starting page of your UI, drag a Modal alert view and a Button view onto the editor.
  3. Select the Modal alert view on the canvas, and click Properties Properties icon to set the properties of the view:
    • Under Configuration > Appearance, set Color style to Warning, and specify Close for the Button label.
    • 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.
  4. Select the Button view, and click Properties Properties icon) to set the properties of the view:
    • Under General, specify Alert as the button label.
    • Under Configuration > Appearance, set Color style to Warning and the width to 100%.
    • 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:
      ${Modal_Alert1}.setVisible(true);
      Tip: Modal_Alert1 is the control ID of the modal alert view that you created. To get the control ID, go to the Configuration > General page.
  5. At run time, a browser opens showing the Alert button:
    A button with a yellow back ground with the label Alert.
  6. Click the Alert button. The modal alert appears:
    Modal alert displays the Close button on half the width of the window.
  7. 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.