System Notice Bar Lite - User Manual
Purpose
System Notice Bar Lite is a reusable, non-blocking notice component for OutSystems Reactive Web applications. It displays informational, success, warning, or error messages while allowing users to continue working in the application.
Component Details
Module: SystemNoticeBarLite
Public Block: SystemNoticeBar
Database Required: No
Supported Notice Types: Info, Success, Warning, Error
Supported Positions: Top, Bottom
How to Add the Component
1. Add the dependency
- Open the consuming application in Service Studio.
- Open Manage Dependencies.
- Select the SystemNoticeBarLite module.
- Add the SystemNoticeBar public block.
- Apply the dependency changes.
2. Create a visibility variable
On the screen or layout where the notice will be used, create a Boolean local variable.
Example:
ShowSystemNotice = False
3. Place the block
- Place SystemNoticeBar in the main layout for application-wide notices.
- Place the block on a screen for screen-specific notices.
- Sticky notices remain fixed at the top or bottom while scrolling.
- Normal notices remain within the page layout.
4. Map the block inputs
Recommended warning-notice configuration:
IsVisible = ShowSystemNotice
Title = "Known Issue"
Message = "Report exports may take longer than expected."
NoticeType = "Warning"
Position = "Top"
IsSticky = True
AllowDismiss = True
AutoHide = False
AutoHideSeconds = 5
ShowIcon = True
Input Reference
IsVisible: Boolean
Shows or hides the notice.
Title: Text
Optional notice heading. Hidden automatically when blank.
Message: Text
Main message displayed to users.
NoticeType: Text
Supported values: Info, Success, Warning, Error.
Position: Text
Supported values: Top and Bottom.
IsSticky: Boolean
When True, the notice remains fixed while scrolling. When False, the notice stays in the normal page layout.
AllowDismiss: Boolean
Shows or hides the manual dismiss link.
AutoHide: Boolean
When True, the notice hides automatically after the configured duration.
AutoHideSeconds: Integer
Auto-hide duration in seconds. Recommended minimum: 3 seconds. Values below 1 should fall back to 5 seconds.
ShowIcon: Boolean
Shows or hides the notice-type icon.
Notice Type Guidance
Info:
Use for general announcements, updates, or neutral information.
Success:
Use for completed deployments, successful actions, or confirmations.
Warning:
Use for known issues, planned maintenance, or temporary impact.
Error:
Use for unavailable services, failed operations, or important problems.
Visibility and Dismiss Flow
The block uses these local variables:
- InternalIsVisible
- IsDismissed
InitializeNotice should set:
InternalIsVisible = IsVisible
IsDismissed = False
DismissNotice should set:
InternalIsVisible = False
IsDismissed = True
The main notice container should use:
Visible = InternalIsVisible and not IsDismissed
Auto-Hide Behavior
When AutoHide is enabled, StartAutoHide waits for AutoHideSeconds and then calls HideNoticeAfterDelay.
HideNoticeAfterDelay should set:
The unused AutoHideTimerId variable is not required in Version 1 and should be deleted.
Common Usage Examples
Deployment Success:
Title = "Deployment Complete"
Message = "Version 1.4.2 was deployed successfully."
NoticeType = "Success"
AutoHide = True
Known Issue:
Service Error:
Title = "Service Unavailable"
Message = "Customer lookup is temporarily unavailable."
NoticeType = "Error"
Position = "Bottom"
AllowDismiss = False
Testing Checklist
- Info notice uses the blue theme.
- Success notice uses the green theme.
- Warning notice uses the orange theme.
- Error notice uses the red theme.
- Top and Bottom positions work.
- Sticky mode remains fixed while scrolling.
- Normal mode remains in the page layout.
- Blank title is hidden.
- Icon hides when ShowIcon is False.
- Dismiss link hides when AllowDismiss is False.
- Dismiss action hides the notice.
- Auto-hide works when enabled.
- Auto-hide duration is respected.
- Notice updates when inputs change.
- Mobile layout remains readable.
Best Practices
- Keep notice titles and messages short and clear.
- Use Success with auto-hide for temporary confirmation messages.
- Keep Warning and Error notices visible until dismissed when the information is important.
- Use Sticky mode for application-wide notices.
- Use Normal mode for section-specific messages.
- Avoid showing multiple sticky notice bars at the same time.
Forge Short Description
System Notice Bar Lite is a reusable OutSystems component for displaying non-blocking Info, Success, Warning, and Error notices. It supports top or bottom positioning, sticky behavior, optional icons, dismissal, and automatic hiding.
Version 1.0.0
- Added SystemNoticeBar public block.
- Added Info, Success, Warning, and Error themes.
- Added Top and Bottom positioning.
- Added Sticky and Normal modes.
- Added optional icon and dismiss action.
- Added optional auto-hide behavior.
- Added responsive styling and demo-screen support.