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
info, success, warning, error| 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' (40px), 'XXL' (48px). |
Note: This component does not support the columnSpan property and always spans the full width of the form (12 columns).
| 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 |
{
"id": "infoNotification",
"type": "NOTIFICATION",
"context": "info",
"message": "This is an informational message for the user."
}{
"id": "warningNotification",
"type": "NOTIFICATION",
"context": "warning",
"title": "Important Notice",
"message": "Please review your information carefully before submitting."
}{
"id": "errorNotification",
"type": "NOTIFICATION",
"context": "error",
"message": "There was an error processing your request.",
"closable": false
}{
"id": "successNotification",
"type": "NOTIFICATION",
"context": "success",
"title": "Registration Complete",
"message": "Thank you, {$.personalInfo.firstName} {$.personalInfo.lastName}! Your registration was successful."
}{
"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)"
}For complete API documentation, see DfNotificationConfig.
For Aquila component documentation and design guidelines, see Notifications - Aquila Design System.