Notification Component

1. Overview
2. Key Features
3. Configuration Properties
- Base Properties
- Component Specific Properties
4. Configuration Examples
6. API Reference

1. Overview

The NOTIFICATION component displays contextual messages to users with different contexts (info, success, warning, error). It supports rich text formatting via Markdown, string interpolation, and can be made closable by users.

🛝 Use the Dynamic Form Playground to see the Notification component in action and try out different configurations

2. Key Features

Four context styles: info, success, warning, error
Markdown formatting support in messages (bold, italic, underline, links, lists)
Translation and string interpolation support
User-closable notifications

3. Configuration Properties

Base Properties

Property	Type	Required	Description
`type`	`'NOTIFICATION'`	Yes	Specifies the field type as NOTIFICATION.
`id`	`string`	Yes	Unique identifier for the notification. Used for ACL path when closing.
`renderName`	`string`	No	Optional name added as `data-render-name` attribute to locate the rendered element in the DOM.
`testId`	`string`	No	Test identifier for automated testing. Set as `data-testid` attribute.
`acl`	`array`	No	Access control rules for notification visibility. Each rule has `state` (`'hidden'`, `'visible'`) and optional `condition` (Filtrex expression).
`spacing`	`string`	No	Margin spacing before next field: `'NONE'` (0px), `'XS'` (8px), `'S'` (16px), `'M'` (24px), `'L'` (32px), `'XL'` (48px), `'XXL'` (64px).

Component Specific Properties

Property	Type	Required	Description
`context`	`string`	Yes	The styling context of the notification (e.g., info, success, warning, error).
`message`	`string`	Yes	The message of the notification. It can be fully static or a string containing a jsonPath expression. The static content will be translatable. Use Markdown for formatting: - Italic: `text` or `_text_` - Bold: `text` - Bold Italic: `*text*` - Strikethrough: `~~text~~` - Underline: `:u[text]` - Links: `[text](url)`
`closable`	`boolean`	No	Whether the notification can be closed by the user. Defaults to true if not specified.
`closeButtonLabel`	`string`	No	Custom label for the close button. If not provided, a default label based on the context will be used.
`title`	`string`	No	The title of the notification. It can be fully static or a string containing a jsonPath expression. The static content will be translatable.
`visibleIf`	`string`	No	An optional jsonPath expression or PFE_EXPRESSION condition that dictates whether this notification will be visible

4. Configuration Examples

Basic Info Notification

{
  "id": "infoNotification",
  "type": "NOTIFICATION",
  "context": "info",
  "message": "This is an informational message for the user."
}

Warning Notification with Title

{
  "id": "warningNotification",
  "type": "NOTIFICATION",
  "context": "warning",
  "title": "Important Notice",
  "message": "Please review your information carefully before submitting."
}

Error Notification (Not Closable)

{
  "id": "errorNotification",
  "type": "NOTIFICATION",
  "context": "error",
  "message": "There was an error processing your request.",
  "closable": false
}

Success Notification with Dynamic Content

{
  "id": "successNotification",
  "type": "NOTIFICATION",
  "context": "success",
  "title": "Registration Complete",
  "message": "Thank you, {$.personalInfo.firstName} {$.personalInfo.lastName}! Your registration was successful."
}

Notification with Markdown Formatting

{
  "id": "formattedNotification",
  "type": "NOTIFICATION",
  "context": "info",
  "title": "Documentation",
  "message": "Please read the **important** information:\n\n- First point with *emphasis*\n- Second point with :u[underline]\n- Visit our [website](https://example.com)\n- Go to [next page](page://second-page)"
}

6. API Reference

For complete API documentation, see DfNotificationConfig.

For Aquila component documentation and design guidelines, see Notifications - Aquila Design System.