Simple Example

The following example shows how to use alerts.

NOTE: Component instance properties are optional and can be omitted if the default settings are acceptable.

<div id="alertContainer1"></div>
<button type="button" class="button-sm button-info" id="commandShowAlert">
  Show Alert
</button>

webui.ready( () => {

  var alertContainer1 = ui("#alertContainer1").alertControl({
    position: "top-center",
    duration: 6000,
    transitionDuration: 1000,
    displayOrder: "ascending",
    width: "60rem",
    showHeader: true,
    inline: true,
    style: "outline-rounded",
    autoHide: false,
    showIcon: true,
    showClose: true
  });

  ui("#commandShowAlert").click( () => { 
    alertContainer1.showInfoAlert("Alert - " + new Date().toTimeString(), true);
  });

});

Alert Close Button

When an alert close button is selected the alert container will take care of closing the alert.

Alert Classes

The alert classes available are described below.

Functions

WebUI provides a set of standard JavaScript alert functions for displaying alerts - this means you don't have to write any HTML. The behaviour is controlled by the JavaScript initialisation as shown in the example above.

Function Arguments

Settings

Javascript settings available for the alert control.

Alert Customisation

Alerts can also be written inline using markup. Any of the WebUI styles and JavaScript functions can be used to create the style and behaviour required.

NOTE: Because manually created custom alerts are not controlled by the alert container additional JavaScript is required to close the alert.

Alert Close Button

The alert close button can include the class alert-cancel-button which will automatically adjust the color to match the alert theme specified.

<div class="alert alert-info-outline rounded-md hidden" role="alert" id="alert1">
  <div class="flex justify-content-space-between align-items-center height-xs-sm pad-left-md pad-right-md">
    <div><span class='text-bold'>Alert</span> - Configure behaviour, structure, and style.</div>
    <div class="alert-cancel-button alert-close" role="button"></div>
  </div>
</div>

<div class="row-spacing-md"></div>

<div class="alert alert-danger-outline rounded-md hidden" role="alert" id="alert2">
  <div class="flex justify-content-space-between align-items-center height-sm pad-left-md pad-right-md">
    <div class="alert-danger-icon"></div>
    <div><span class='text-bold'>Alert</span> - Configure behaviour, structure, and style.</div>
    <div class="alert-cancel-button alert-close" role="button"></div>
  </div>
</div>

<div class="row-spacing-md"></div>

<div class="alert alert-success rounded-md pad-xs pad-left-md pad-right-md hidden" role="alert" id="alert3">
  <div class="flex justify-content-space-between align-items-center">
    <div class="alert-success-icon"></div>
    <div class="alert-cancel-button alert-close" role="button"></div>
  </div>
  <div class="flex align-items-center">
    <div><span class='text-bold'>Alert</span> - Configure behaviour, structure, and style.</div>
  </div>
</div>

webui.ready( () => {

  ui("#alert1, #alert2, #alert3").fadeIn(1000);

  ui(".alert-close").click( function() { 
    var alert = ui(this).closest(".alert");
    alert.hide();
  });

});

Run-time Alert Updates

Settings specified for the alertControl instance can be updated programatically at run-time. See the following example, which updates the position and displayOrder settings. Use the restore button to revert the change.

<div class="row gap-md text-sm">
  <div class="col-fixed">
    <button id="alertUpdateShowCommand" class="button-sm menu-button-info">Show Alert</button>
  </div>
  <div class="col-fixed">
    <button id="alertUpdateCommand" class="button-sm menu-button-info">Update</button>
  </div>
  <div class="col-fixed">
    <button id="alertRestoreCommand" class="button-sm menu-button-info">Restore</button>
  </div>
</div>
  
      

webui.ready( () => {

  var alertContainer1 = ui("#alertContainer1").alertControl({
    position: "top-center",
    duration: 6000,
    transitionDuration: 1000,
    displayOrder: "ascending",
    width: "60rem",
    showHeader: true,
    inline: true,
    style: "outline-rounded",
    autoHide: false,
    showIcon: true,
    showClose: true
  });

  ui("#alertUpdateShowCommand").click( () => { 
    alertContainer1.showSuccessAlert("Alert - " + new Date().toLocaleTimeString(), true);
  });

  ui("#alertUpdateCommand").click( () => {
    alertContainer1.update({ position: "bottom-left", displayOrder: "descending" });
  });

  ui("#alertRestoreCommand").click( () => {
    alertContainer1.update({ position: "top-center", displayOrder: "ascending" });
  });

});

Functions

WebUI provides a single function that can be used to update the alert instance settings at runtime.

Function Arguments

Alert Event Callbacks

There are 4 event callbacks that can be used, ui.alert.show.before, ui.alert.show.after, ui.alert.hide.before, and ui.alert.hide.after. The following example shows how to setup the event callbacks.

NOTE: If custom alerts are created and controlled outside the alert container, as in the example above, the following events are not triggered.

webui.ready( () => {
  
  alertContainer1.on("ui.alert.show.before", (e) => {
    // Take some action
  });

  alertContainer1.on("ui.alert.show.after", (e) => {
    // Take some action
  });

  alertContainer1.on("ui.alert.hide.before", (e) => {
    // Take some action
  });

  alertContainer1.on("ui.alert.hide.after", (e) => {
    // Take some action
  });
          
});