Message Area

The Message Area component is a container that displays message blocks. These blocks are useful for providing end users information about tasks to be completed, alerting them about actions to be taken, or displaying other pertinent information about the page.

Using the Message Area

The main purpose of the Message Area component is to display message blocks—which can be used to give the user information about the page they are on, the records they are working with, or any other subject the builder deems necessary. These message blocks can be dismissed by the user if Show close icon is enabled; otherwise they remain displayed until cleared by a component action.

Add a Message Area component to the page. Default message blocks can be added to the component by clicking Add Message Block on the component within the canvas. However, this component is primarily manipulated through component actions—which can be used to create new message blocks or clear all currently displayed blocks.

Message Areas themselves cannot be styled beyond standard spacing attributes, but each message block may use its own style variant.

Component actions

Component actions are available using Run component action.

Show message block

Creates a new message block within the selected Message Area, with standard message block properties available.

Clear message blocks

Closes all message blocks currently displayed within the selected Message Area.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Component properties

General tab [[]]

  • Model:
    • None: Select this to add message block content without referencing context or using merge syntax.
    • [Specific models]: All models within the page will be listed as options. To utilize context—for example, to reference a particular field—select a model.

Advanced tab [[]]

  • Unique ID Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]

  • Margin: Sets a component’s margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click border-all All.
    • To set margins for each side individually, click border-separate Separate.

    Margin values can be set to any configured spacing variable for the page’s design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Display logic tab [[]]

Standard render condition options are available.

Nested elements

Message Block properties
General tab [[]]

  • Title: Determines the bold text at the top of a message block. Not compatible with merge syntax. Can contain also contain HTML if the Allow HTML property is enabled.

  • Description: Determines the full message, beneath the title, within the message block. Compatible with merge syntax, which may utilize context if a model is set on the Message Area component. Can contain also contain HTML if the Allow HTML property is enabled.

  • Allow HTML: Determines HTML rendering behavior for Title and Description contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

    Enabled:

    This text is important

    Disabled:

    <strong>This text is important</strong>

  • Icon: Determines which icon is displayed beside the message block’s title and description. Defaults to an Information icon.

  • Show close icon: Determines whether or not a close icon is displayed at runtime—allowing end users to dismiss message blocks within the component. If unchecked, the only way to dismiss the message block is via the Clear Message Blocks component action. Unchecked by default.

Advanced tab [[]]
  • Unique ID Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    Note

    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

Context tab [[]]

Context condition options available.