Alert Widget

The Alert widget displays informational, warning, success, or error messages to users in your application interface. This widget is based on Element UI's alert component and provides various customization options.

Overview#Direct link to Overview

The Alert widget is a versatile notification component that can be used to:

• Display system messages and notifications
• Show validation feedback
• Communicate important information to users
• Provide contextual alerts based on user actions

Configuration Properties#Direct link to Configuration Properties

Basic Configuration#Direct link to Basic Configuration

Alert Type#Direct link to Alert Type

• Field: type
• Type: Dropdown selection
• Options:
  • primary - Blue themed alert (default)
  • success - Green themed alert for positive feedback
  • info - Blue themed alert for informational messages
  • warning - Orange/yellow themed alert for warnings
  • error - Red themed alert for errors and critical messages
• Description: Determines the visual appearance and semantic meaning of the alert

Title#Direct link to Title

• Field: title
• Type: Text input
• Required: Optional
• Description: The main heading text displayed at the top of the alert
• Note: Supports translation using the SF_translate filter

Description#Direct link to Description

• Field: description
• Type: Textarea
• Required: Optional
• Description: The main content/message body of the alert. Supports HTML content
• Default: "Description..." (placeholder)

Display Options#Direct link to Display Options

Closable#Direct link to Closable

• Field: closable
• Type: Switch (boolean)
• Default: false
• Description: When enabled, displays a close button allowing users to dismiss the alert

Show Icon#Direct link to Show Icon

• Field: showIcon
• Type: Switch (boolean)
• Default: false
• Description: When enabled, displays a contextual icon based on the alert type (info, success, warning, error)

Center#Direct link to Center

• Field: center
• Type: Switch (boolean)
• Default: false
• Description: Centers the alert content horizontally

Theme/Effect#Direct link to Theme/Effect

• Field: effect
• Type: Dropdown selection
• Options:
  • light - Light theme with subtle background
  • dark - Dark theme with bold background
• Default: light
• Description: Controls the visual intensity and background styling of the alert

Configuration Interface#Direct link to Configuration Interface

When configuring the Alert widget in the low-code platform, you'll find these options in the Global section of the widget configuration panel:

Step-by-Step Configuration#Direct link to Step-by-Step Configuration

1. Select Alert Type

   • Choose from the dropdown: Primary, Success, Info, Warning, or Error
   • This determines the color scheme and default icon

2. Set Display Options

   • Toggle Closable to allow users to dismiss the alert
   • Toggle Show Icon to display contextual icons
   • Toggle Center to center-align the content
   • Select Theme (Light/Dark) for visual intensity

3. Add Content

   • Enter a Title for the alert header
   • Add Description text for the main message body

Usage Examples#Direct link to Usage Examples

Basic Information Alert#Direct link to Basic Information Alert

Success Notification#Direct link to Success Notification

Error Alert#Direct link to Error Alert

Warning Alert#Direct link to Warning Alert

Styling and Themes#Direct link to Styling and Themes

Primary Theme#Direct link to Primary Theme

When using type: "primary", the alert automatically applies the primary-theme-alert CSS class for custom styling integration with your application's theme.

Visual Customization#Direct link to Visual Customization

• Light Effect: Subtle background with standard text
• Dark Effect: Bold background with high contrast text
• Icons: Automatically selected based on alert type when showIcon is enabled
• Centering: Content alignment can be controlled with the center option

Events and Interactions#Direct link to Events and Interactions

While not explicitly configured in the interface, the Alert widget supports the following events at the component level:

• onClose: Triggered when the alert is dismissed (if closable)
• onShow: Triggered when the alert is displayed

Best Practices#Direct link to Best Practices

When to Use Each Type#Direct link to When to Use Each Type

• Info: General information, tips, or neutral notifications
• Success: Successful operations, confirmations, positive feedback
• Warning: Cautions, non-critical issues, important notices
• Error: Failures, critical issues, validation errors
• Primary: Brand-specific alerts or custom themed messages

Accessibility Considerations#Direct link to Accessibility Considerations

• Use clear, concise titles and descriptions
• Ensure color is not the only way to convey meaning (use icons)
• Test with screen readers when using complex HTML in descriptions
• Consider auto-dismissal timing for closable alerts

Design Guidelines#Direct link to Design Guidelines

• Keep messages brief and actionable
• Use consistent alert types across your application
• Consider the visual hierarchy when placing alerts
• Use closable alerts for non-critical information
• Reserve non-closable alerts for critical system messages

Integration with Other Widgets#Direct link to Integration with Other Widgets

The Alert widget can be effectively combined with:

• Forms: For validation feedback and submission confirmations
• Buttons: To display action results
• Data Tables: For operation status messages
• Modals/Popups: For contextual notifications within dialogs

Technical Implementation#Direct link to Technical Implementation

The Alert widget is implemented using:

• Frontend: Element UI (el-alert component)
• Template Engine: EJS for server-side rendering
• Styling: CSS classes with theme support
• Localization: Built-in translation support via SF_translate

This widget seamlessly integrates with the platform's form validation, state management, and theming systems.