Read-Only Mode - User Manual
Purpose
Read-Only Mode Banner Lite is a reusable OutSystems Reactive Web component that informs users when an application, screen, or record is read-only. It can also display a full-screen interaction blocker to prevent normal mouse and touch interaction with the screen.
Component Details
Module: ReadOnlyModeBannerLite
Public Block: ReadOnlyModeBanner
Database Required: No
Supported Modes: Banner, Card, Inline
Supported Themes: Info, Warning, Critical, Minimal
Important
The component provides a visual notice and an optional client-side interaction blocker. For reliable protection, important inputs and buttons should also be read-only or disabled, and create/update/delete Server Actions must validate the authoritative read-only state.
How to Add the Component
1. Add the dependency
- Open the consuming application in Service Studio.
- Open Manage Dependencies.
- Select the ReadOnlyModeBannerLite module.
- Add the ReadOnlyModeBanner public block.
- Apply the dependency changes.
2. Create the read-only state
Create a Boolean variable or use a server-controlled configuration value.
Example:
IsApplicationReadOnly = True
3. Place the block
- Use Banner mode in the main layout for application-wide read-only mode.
- Use Card mode for a screen, form, or finalized record.
- Use Inline mode for a compact section-level indicator.
4. Configure the block
Recommended strict configuration:
IsReadOnly = IsApplicationReadOnly
BlockScreenInteraction = True
Title = "Read-Only Mode"
Message = "You can view information, but changes are temporarily disabled."
DisplayMode = "Banner"
Theme = "Warning"
Position = "Top"
IsSticky = True
AllowDismiss = False
ActionText = ""
ActionUrl = ""
Input Reference
IsReadOnly: Boolean
Shows or hides the read-only component.
BlockScreenInteraction: Boolean
When True, a full-screen overlay blocks normal mouse and touch interaction. When False, the component acts only as a visual notice.
Title: Text
Main heading. Hidden automatically when blank.
Message: Text
Supporting explanation. Hidden automatically when blank.
DisplayMode: Text
Supported values: Banner, Card, Inline.
Theme: Text
Supported values: Info, Warning, Critical, Minimal.
Position: Text
Supported values: Top, Bottom. Used mainly in Banner mode.
IsSticky: Boolean
When True, Banner mode stays fixed while scrolling. When False, it stays in the normal layout.
AllowDismiss: Boolean
Shows the dismiss link when screen blocking is disabled. Dismissing the notice does not turn off the actual read-only state.
ActionText: Text
Optional action-link text, such as Contact Support or View Details.
ActionUrl: Text
Optional action destination. The action link appears only when both ActionText and ActionUrl are provided.
Screen-Blocking Behavior
IsReadOnly = False:
- Banner hidden
- Interaction blocker hidden
- Screen remains editable
IsReadOnly = True and BlockScreenInteraction = False:
- Read-only notice visible
- Screen remains interactive
- Useful as an informational warning
IsReadOnly = True and BlockScreenInteraction = True:
- Read-only notice visible above the page
- Interaction blocker covers the viewport
- Normal mouse and touch interaction is blocked
- Dismiss link should be hidden
Required Widget Classes
ReadOnlyWrapper: readonly-mode-wrapper
InteractionBlocker: readonly-interaction-blocker
ReadOnlyContainer: dynamic readonly-mode classes
ReadOnlyIcon: readonly-mode-icon
ReadOnlyContent: readonly-mode-content
ReadOnlyTitle: readonly-mode-title
ReadOnlyMessage: readonly-mode-message
ReadOnlyAction: readonly-mode-action
DismissLink: readonly-mode-dismiss
Recommended Visibility
ReadOnlyWrapper:
IsReadOnly
InteractionBlocker:
IsReadOnly and BlockScreenInteraction
ReadOnlyContainer:
InternalIsVisible and not IsDismissed
DismissLink:
AllowDismiss and not BlockScreenInteraction
Additional UI Enforcement
For better keyboard behavior and accessibility, apply the same read-only state to important widgets.
Examples:
Input.ReadOnly = IsApplicationReadOnly
SaveButton.Enabled = not IsApplicationReadOnly
EditButton.Visible = not IsApplicationReadOnly
DeleteButton.Enabled = not IsApplicationReadOnly
Server-Side Enforcement
Before any create, update, or delete action, check the authoritative read-only state on the server.
Conceptual flow:
If application is read-only
Raise an exception:
"Changes are currently disabled because the application is in read-only mode."
Else
Continue the create, update, or delete operation
Do not rely only on a Boolean supplied by the browser. Read the authoritative state from a Site Property, configuration entity, environment setting, permission rule, or another server-controlled source.
Common Usage Examples
Application Data Freeze:
Critical Processing Window:
Title = "Data Freeze Active"
Message = "Changes are prohibited during the year-end processing window."
Theme = "Critical"
Finalized Record:
Title = "Record Locked"
Message = "This record has been finalized and cannot be modified."
DisplayMode = "Card"
Theme = "Info"
BlockScreenInteraction = False
Compact Indicator:
Title = "Editing Disabled"
Message = ""
DisplayMode = "Inline"
Theme = "Minimal"
Best Practices
- Use one read-only state for the banner, widgets, and server enforcement.
- Use Banner mode for application-wide restrictions.
- Use Card or Inline mode for finalized records or individual sections.
- Keep AllowDismiss set to False during strict blocking.
- Use Critical theme only when editing is strictly prohibited.
- Explain why editing is disabled and, when possible, when it will resume.
- Do not use this component as a replacement for access control or authorization.
Version 1.0.0
- Added ReadOnlyModeBanner public block.
- Added Banner, Card, and Inline modes.
- Added Info, Warning, Critical, and Minimal themes.
- Added Top and Bottom banner positioning.
- Added Sticky and Normal banner behavior.
- Added optional full-screen interaction blocker.
- Added optional action and dismiss links.
- Added responsive styling and demo-screen support.