Components

Alert Banner

14min

Alert banners are used to inform users of important system-wide events. They should be relevant to the user and as minimally disruptive as possible. In general, they should follow the guidelines specified in System status﻿.
Component Availability
Improved
CET 15.5 Major and above
﻿
﻿
Alert banner types
Utilization of these types should follow the guidelines specified in System status﻿. 
Information
Information alert banner
﻿
Warning
Warning alert banner
﻿
Error 
Error alert banner
﻿
Usage guidelines
When to use
Information
﻿Type of alert banner
There is an update available
﻿Information alert banner﻿
The user is in an read-only state
﻿Information alert banner﻿
The trial ends in X days
﻿Information alert banner﻿
The trial have ended
﻿Warning alert banner﻿
There is low disk space
﻿Warning alert banner﻿
A background task have stopped working
﻿Error alert banner﻿
Errors in the graphics
﻿Error alert banner﻿
Information from manufacturers, for example webinars or price increases.
No alert banner, use notification.
Error when user have performed an action
No alert banner, use dialog message instead. 
No stacking
Only one message should be visible at a time. 
Do:
﻿
Don't:
﻿
Actionable
Alert banners needs to be actionable, when possible, there should be buttons to make it easier for the user to address the issue.
Placement
Alert banners are placed in the top of the window, below the application menu. 
Overflow
Use short sentences as possible, but when overflow is needed, for example when the user makes the windows smaller, the text should continue on a new line. 
﻿
Dismissal
Banners are persistent by default, the user needs to perform an action, or to select to close the banner to be able to dismiss the banner. To dismiss, use the X icon to the right of the banner. Please avoid using buttons labeled "Close" or "Dismiss". 
﻿
Specifications
﻿
Severity icon
Text
Action button (optional)
Update buttons (optional)
Dismiss button
Code
To create an alert banner, create an instance of the NotifyMessage class:
CM
{
    NotifyMessage message(// Specify a unique identifier / key
			              id="uniqueKey",
			              // To specify the banner type
			              notifyType=returnCode.info,
			              // A place to store some data
			              dataObj=null);
    
    // To specify text message
    message.addText(text="Text about what have happened");
    
    // To specify a buttton with no callbacks.
    message.addButton(text="Action button",
		      callback=f(Control c, NotifyButtonArgs args) {
			  // Add your own callback logic here.

			  // Remove alert banner.
			  notifyHandler("cet").remove("uniqueKey");
		      });
    
    // To specify a buttton with a callback that dismisses the banner.
    message.addButton(text="Update now", callback=function updateNowCB);
    
    // To specify a buttton that closes the banner on click.
    message.addButton(text="Update on next restart", closeAfterClick=true);
    
    // Push the notification to the CET banner system
    notifyHandler("cet").addNew(message);
}

/**
 * Update now callback.
 */
private void updateNowCB(Control c, NotifyButtonArgs args) {
    // Add your own callback logic here.

    // Remove alert banner.
    notifyHandler("cet").remove("uniqueKey");
}

{
    NotifyMessage message(// Specify a unique identifier / key
			              id="uniqueKey",
			              // To specify the banner type
			              notifyType=returnCode.info,
			              // A place to store some data
			              dataObj=null);
    
    // To specify text message
    message.addText(text="Text about what have happened");
    
    // To specify a buttton with no callbacks.
    message.addButton(text="Action button",
		      callback=f(Control c, NotifyButtonArgs args) {
			  // Add your own callback logic here.

			  // Remove alert banner.
			  notifyHandler("cet").remove("uniqueKey");
		      });
    
    // To specify a buttton with a callback that dismisses the banner.
    message.addButton(text="Update now", callback=function updateNowCB);
    
    // To specify a buttton that closes the banner on click.
    message.addButton(text="Update on next restart", closeAfterClick=true);
    
    // Push the notification to the CET banner system
    notifyHandler("cet").addNew(message);
}

/**
 * Update now callback.
 */
private void updateNowCB(Control c, NotifyButtonArgs args) {
    // Add your own callback logic here.

    // Remove alert banner.
    notifyHandler("cet").remove("uniqueKey");
}
﻿
The notifyType argument allows you to specify the type of alert banner. 
The dataObj argument lets you pass an object that can be accessed in callbacks through NotifyButtonArgs 
For the full list of constructor options, please refer to cm/win/notify/notifyMessage.cm. 
Figma
﻿
﻿

Information	Type of alert banner
There is an update available	Information alert banner
The user is in an read-only state	Information alert banner
The trial ends in X days	Information alert banner
The trial have ended	Warning alert banner
There is low disk space	Warning alert banner
A background task have stopped working	Error alert banner
Errors in the graphics	Error alert banner
Information from manufacturers, for example webinars or price increases.	No alert banner, use notification.
Error when user have performed an action	No alert banner, use dialog message instead.

Updated 24 Sep 2024

Components

Message Banner