Dialogue Message Bar

Introduction

Adding a message bar to a dialogue allows for the display of alert or informational messages to users. This message section does not affect the data since it is not part of the command parameters or mutations.

In this example, we will see how to add a message bar to a dialogue that allows a user to change their language. We will then customize its title, main message, and background colour based on the type defined in the JavaScript code.

Step-by-step instructions

1. Add a Field for the Message Bar in the Dialogue

To display a message bar, a dedicated field must be added to the dialogue. This field will not be referenced as a command parameter; it will serve only for display purposes and will have no impact on the data.

In this example, the field will be named "messageBar".

2. Define the MessageBar Component

In the attributes of the messageBar field, add the following value to COMPONENT ID:

@esm/components/web/MessageBar

3. Configure the Message Bar Properties in JavaScript

The properties of the message bar must be defined in JavaScript within the PROPS section.

Example Code:

return {
  description: "You are about to change the user's correspondence language: " + data.name,
  type: "warning",
  title: "ATTENTION"
}

• description: Contains the main message displayed in the bar. It can include dynamic values, such as the user's name (data.name).

• type: Defines the bar’s background colour. Two options are available:

  • "info" (grey, default colour)

  • "warning" (yellow)

• title (optional): Adds a bold and larger-sized title inside the message bar.

4. OPTIONAL: Add a Label

As shown in the previous step, a label can be added to the messageBar field, to display text above the bar. Unlike the title, this label will not be bold and will be of the same size as the description. It is also possible to hide the label using the "Hide Label" option in the message bar properties.

Conclusion

Customizing a message bar in dialogues helps improve user communication by making important messages more visible and engaging. By adding a title, a main message, and adjusting the background color, the message bar can be tailored to better suit different contexts. With a simple JavaScript modification, it's easy to enhance the default design and ensure key information stands out effectively.