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 docid\ f2u u kmhqhnlidgry57f alert banner types utilization of these types should follow the guidelines specified in system status docid\ f2u u kmhqhnlidgry57f information background colour brand primary 100 (#e7f0f7) border colour brand primary 600 (base) (#306b97) text & icon colours brand primary 900 (#233f57) hyperlink colour brand primary 600 (base) (#306b97) warning background colour semantic warning 50 (#fffaeb) border colour semantic warning 200 (#fedf89) text & icon colours semantic warning 900 (#792e0e) hyperlink colour brand primary 600 (base) (#306b97) error background colour semantic error 100 (#fce7d8) border colour semantic error 600 (base) (#ca391c) text & icon colours semantic error 900 (#73221b) hyperlink colour brand primary 600 (base) (#306b97) usage guidelines when to use information t t ype of alert banner there is an update available information alert banner information alert banner the user is in an read only state information alert banner information alert banner the trial ends in x days information alert banner information alert banner the trial have ended warning alert banner warning alert banner there is low disk space warning alert banner warning alert banner a background task have stopped working error alert banner error alert banner errors in the graphics error alert banner 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" anatomy 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"); } 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