Environment Badge Lite - Forge Documentation
1. Short Summary
Environment Badge Lite is a lightweight OutSystems Reactive Web component that displays the current environment name such as DEV, SIT, UAT, PREPROD, PROD, DEMO, or any custom value. It helps teams quickly identify the environment and avoid accidental testing or data changes in the wrong system.
2. Component Details
Component Name: Environment Badge Lite
Module Name: EnvironmentBadgeLite
Public Block: EnvironmentBadge
Recommended Demo Screen: EnvironmentBadgeDemo
Database Required: No
Target App Type: Reactive Web App
Primary Users: Developers, QA teams, testers, support teams, release teams, and SRE teams
3. Key Features
- Shows environment name on every screen
- Supports DEV, SIT, UAT, PREPROD, PROD, and custom environment names
- Display modes: Badge, Ribbon, Watermark, CornerTag
- Positions: TopLeft, TopRight, BottomLeft, BottomRight
- Optional hide-in-production behavior
- Environment-based default colors
- Optional custom background and text colors
- Optional animation
- Lightweight CSS-driven implementation
- No database or server action required
4. Block Inputs
EnvironmentName: Text
Example: DEV, SIT, UAT, PREPROD, PROD, DEMO
DisplayMode: Text
Supported values: Badge, Ribbon, Watermark, CornerTag
Position: Text
Supported values: TopLeft, TopRight, BottomLeft, BottomRight
Note: Position is ignored for Watermark mode because watermark is centered.
HideInProduction: Boolean
If True and EnvironmentName is PROD, the badge is hidden.
CustomBackgroundColor: Text
Optional CSS color value. Example: #111827
CustomTextColor: Text
Optional CSS color value. Example: #FFFFFF
EnableAnimation: Boolean
Enables or disables subtle animation.
5. Display Modes
Badge:
A small floating badge. Best for DEV, SIT, and UAT.
Ribbon:
A full-width ribbon at the top or bottom. Best for UAT, PREPROD, and demo environments.
Watermark:
A large transparent centered environment label. Best for testing environments and screenshots.
CornerTag:
A compact corner label. Best for internal, admin, and pre-production apps.
6. Recommended Defaults
EnvironmentName = Site.EnvironmentKey
DisplayMode = Badge
Position = BottomRight
HideInProduction = True
CustomBackgroundColor = ""
CustomTextColor = ""
EnableAnimation = True
7. Default Environment Colors
DEV: Blue
SIT: Purple
UAT: Orange
PREPROD: Red/Orange
PROD: Green
CUSTOM: Slate/Gray
Suggested CSS colors:
DEV = #2563EB
SIT = #7C3AED
UAT = #F59E0B
PREPROD = #DC2626
PROD = #16A34A
CUSTOM = #334155
8. How to Integrate into Any App
Step 1: Add Dependency
Open the consumer app in Service Studio, go to Manage Dependencies, select EnvironmentBadgeLite, and add the EnvironmentBadge block.
Step 2: Add Site Property
Create a Site Property in the consumer app:
Name: EnvironmentKey
Data Type: Text
Example values: DEV, SIT, UAT, PREPROD, PROD
Step 3: Place Block in Main Layout
Add the EnvironmentBadge block to the app main layout so it appears across all screens.
Recommended placement:
Header
EnvironmentBadge
MainContent
Footer
Step 4: Configure Block Inputs
Use this recommended configuration:
DisplayMode = "Badge"
Position = "BottomRight"
9. Example Configurations
DEV Badge:
EnvironmentName = DEV
Expected result: Blue DEV badge at bottom-right.
UAT Ribbon:
EnvironmentName = UAT
DisplayMode = Ribbon
Position = TopRight
Expected result: Orange UAT ENVIRONMENT ribbon at top.
SIT Watermark:
EnvironmentName = SIT
DisplayMode = Watermark
Expected result: Large transparent SIT watermark centered on screen.
PREPROD Corner Tag:
EnvironmentName = PREPROD
DisplayMode = CornerTag
Expected result: PREPROD tag at top-right.
Production Hidden:
EnvironmentName = PROD
Expected result: Badge is hidden in production.
Custom Badge:
EnvironmentName = DEMO
Position = BottomLeft
CustomBackgroundColor = #111827
CustomTextColor = #FACC15
Expected result: DEMO badge with custom colors.
10. Testing Checklist
- DEV badge appears correctly
- SIT badge appears correctly
- UAT badge appears correctly
- PREPROD badge appears correctly
- PROD badge hides when HideInProduction is True
- PROD badge appears when HideInProduction is False
- Badge mode works
- Ribbon mode works
- Watermark mode works
- CornerTag mode works
- All positions work for Badge and CornerTag
- Custom colors work
- Animation can be enabled or disabled
- Watermark does not block page clicks
- Badge appears across screens when placed in layout
11. Troubleshooting
Badge does not appear:
Check EnvironmentName, HideInProduction, visibility condition, CSS classes, and whether CSS is loaded.
Watermark does not appear:
Check DisplayMode = Watermark and ensure runtime classes include env-badge-watermark.
PROD badge does not appear:
If HideInProduction = True, this is expected. Set HideInProduction = False to show it.
Custom colors do not apply:
Ensure CustomBackgroundColor and CustomTextColor are valid CSS color values.
12. Best Practices
- Use Site.EnvironmentKey instead of hardcoded values
- Use uppercase environment names such as DEV, SIT, UAT, PREPROD, PROD
- Keep HideInProduction = True by default
- Use Badge mode for DEV and SIT
- Use Ribbon mode for UAT or PREPROD
- Use Watermark mode only where strong visibility is required
- Avoid watermark mode in PROD
13. Forge Short Description
Environment Badge Lite is a lightweight OutSystems component that displays a visible environment indicator such as DEV, SIT, UAT, PREPROD, or PROD. It supports badges, ribbons, watermarks, corner tags, configurable positions, default environment colors, custom colors, optional animation, and hide-in-production behavior.
14. Forge Detailed Description
Environment Badge Lite helps OutSystems teams clearly identify which environment they are using across Reactive Web applications. It is useful for developers, testers, QA teams, support teams, release teams, and SRE teams working across multiple environments.
The component is lightweight, CSS-driven, easy to integrate, and does not require database setup. It supports multiple display modes, configurable positions, environment-based default colors, custom colors, subtle animation, and production-safe visibility options.
15. Version Notes
Version 1.0.0
- Initial release
- Added EnvironmentBadge block
- Added Badge, Ribbon, Watermark, and CornerTag modes
- Added configurable positions
- Added default environment colors
- Added custom background and text colors
- Added optional animation
- Added hide-in-production behavior
- Added demo screen support
16. Future Enhancements
- Static entity for environment configuration
- Admin screen for theme management
- Role-based visibility
- Auto-detect environment helper
- Icon support
- Theme presets
- Screenshot-friendly watermark options