CET Developer Guides
Tutorial: Adopting the new UI ...

Tutorial: Integrating Message Banners

7min
Component Availability
Added
CET 15.5 Major and above


Before you start

It is highly recommended for you to review the following articles if you have not already done so, to ensure that you understand the types of message banners to create, and how to write banner messages like a pro.



Predefined message types

As mentioned in System status, there are a total of 4 standardized message types. To ensure a smooth creation process, we have predefined them as messageTypes which you can find their corresponding code mappings as follow:

Message type

Corresponding message type in code

Information

messageType.info

Warning

messageType.warning

Error

messageType.error

Success

messageType.success

Default

messageType.undefined

These standardized message types (excluding messageType.undefined ) when utilized, will automatically apply all relevant banner styles onto your message banners upon creation. Thus, no further customization work is required.

Creating message banners

Message banners can be placed in toolboxes to convey various types of information to users that is relevant to the toolbox itself. The positioning of these banners are not fixed, so you may place them in relevant toolbox sections as you see fit. However, they will always adhere to the toolbox's width by default.

Message banners are created using MessageLimbs which will be demonstrated below.

Standardized

Example information message banner
Example information message banner


To create a standardized message banner, firstly ensure that you have a LibraryLimb created, then append a MessageLimb within it. Ensure that the messageType parameter is specified with a message type, as listed above.

Additionally, the label parameter can be utilized to specify the banner's message.

Standard Syntax
Library Syntax
CM


Custom

In addition to standardized message banners, you can also create message banners with custom styles. This can be done by utilizing an alternative MessageLimb constructor without specifying the messageType parameter.

By creating a custom message banner, additional work is required to specify all the necessary supported customization parameters prior to library creation. However, the creation process remains the same as above.

To view the full list of customizations that are supported, please refer to MessageLimb, located in cm/core/library/libraryLimb.cm.

Updating message banners

We recognize the need to provide more state control on the message banners that already exist within your toolboxes. For example, updating an existing toolbox message banner with a new message, or transitioning from a message type to another.

Thus, various updating methods have been included and can be utilized (i.e., within callbacks) to achieve such behavior. With these methods, it reduces the need to introduce additional message banners to accommodate for multiple states, which could be troublesome to manage. Some example methods are as follow:

CM


To view the most updated list of methods available, please refer to MessageWindow, located in cm/core/toolbox/messageWindow.cm.