Success Confirmation Confetti Component User Documentation
OutSystems O11 Reactive Web Component
1. Component Overview
The Success Confirmation Confetti Component is a reusable OutSystems O11 UI Block used to show a modern success confirmation banner with optional confetti animation.
Use this component after successful actions such as:
Save completed
Submit completed
Approval completed
Record created
Process completed
Redirect after success
The component supports two display modes:
Banner + Confetti Blast
Banner Only
2. Component Name
ConfirmationConfetti
The screenshots below show the expected user experience for both supported display modes.
This mode displays only the centered success confirmation banner without triggering the confetti blast.
Figure 1: Success banner displayed without confetti blast.
Banner with Confetti Blast
This mode displays the success confirmation banner along with the confetti blast animation.
Figure 2: Success banner displayed with confetti blast.
4. Input Parameters
Use the following input parameters:
IsVisible
MessageType
Title
Message
IconText
DurationMs
ParticleCount
AutoHide
EnableConfettiBlast
ConfettiBlastType
5. Input Descriptions
IsVisible:
Shows or hides the success confirmation banner. Set to True to display the banner.
MessageType:
Defines the message style. For this component, always use Success.
Title:
Main title displayed on the success confirmation banner.
Message:
Short description displayed below the title.
IconText:
Icon or emoji displayed at the top of the confirmation banner.
DurationMs:
Duration of the animation in milliseconds. Example: 1800 means 1.8 seconds.
ParticleCount:
Number of confetti particles shown during the animation.
AutoHide:
Automatically hides the confirmation banner after the animation duration when set to True.
EnableConfettiBlast:
When True, shows the success banner with confetti. When False, shows only the success banner without confetti.
ConfettiBlastType:
Controls the direction and style of the confetti blast. Supported values are Side, Center, Top, Bottom, Fountain, and Random.
6. Recommended Default Values
IsVisible = False
MessageType = "Success"
Title = "Success"
Message = "Your action was completed successfully."
IconText = "✅"
DurationMs = 1800
ParticleCount = 90
AutoHide = True
EnableConfettiBlast = True
ConfettiBlastType = "Center"
7. Success Message Examples
Save Success
Title = "Saved successfully"
Message = "Your changes have been saved."
Submit Success
Title = "Submitted successfully"
Message = "Your request has been submitted."
IconText = "🎉"
ConfettiBlastType = "Side"
Approval Success
Title = "Approved successfully"
Message = "The request has been approved."
IconText = "👍"
Banner Only Success
Title = "Updated successfully"
Message = "The information has been updated."
EnableConfettiBlast = False
8. How to Add the Component on a Screen
Step 1: Create Local Variables
Create these local variables on the parent screen:
ShowConfirmation : Boolean
ConfirmationTitle : Text
ConfirmationMessage : Text
ConfirmationIcon : Text
ShowConfettiBlast : Boolean
BlastType : Text
Recommended default values:
ShowConfirmation = False
ConfirmationTitle = ""
ConfirmationMessage = ""
ConfirmationIcon = "✅"
ShowConfettiBlast = True
BlastType = "Center"
Since this component only supports success messages, pass the MessageType directly as:
Step 2: Place the Block on the Screen
Place the ConfirmationConfetti block near the bottom of the screen structure.
Screen
├── Main Content
├── Forms / Buttons / Lists
└── ConfirmationConfetti
Avoid placing it inside:
Form
Table
List
Popup
Tabs
Accordion
Container with overflow hidden
Container with fixed height
Step 3: Map Block Inputs
IsVisible = ShowConfirmation
Title = ConfirmationTitle
Message = ConfirmationMessage
IconText = ConfirmationIcon
EnableConfettiBlast = ShowConfettiBlast
ConfettiBlastType = BlastType
9. Show Success Banner with Confetti
Use this after a successful action.
Assign
ConfirmationTitle = "Saved successfully"
ConfirmationMessage = "Your changes have been saved."
ShowConfirmation = True
Result:
Success banner is shown
Confetti blast is shown
10. Show Success Banner Only
Use this when you want to show only the success banner without confetti.
ConfirmationTitle = "Updated successfully"
ConfirmationMessage = "The information has been updated."
ShowConfettiBlast = False
Confetti blast is not shown
11. Reset After Animation
The component should expose this event:
OnAnimationFinished
Use this event to reset the parent screen variable.
ConfirmationConfettiOnAnimationFinished
Logic:
This allows the banner and confetti to run again next time.
12. Redirect After Success Animation
If you want to show the success animation first and then redirect the user, do not redirect immediately after setting:
Instead, redirect from:
Create Local Variables
ShouldRedirectAfterConfetti : Boolean
TargetRecordId : Identifier
Save Action Example
SaveOnClick
├── Call Save Action
└── Assign
ConfirmationMessage = "Taking you to the details page..."
ConfirmationIcon = "🎉"
ShouldRedirectAfterConfetti = True
Do not add the destination immediately after this.
OnAnimationFinished Logic
├── Assign
│ ShowConfirmation = False
│
└── If ShouldRedirectAfterConfetti = True
│ ShouldRedirectAfterConfetti = False
└── Destination
TargetScreen
Recommended values for redirect scenario:
DurationMs = 1400
ParticleCount = 70
13. Recommended Duration and Particle Count
Normal Success:
Redirect After Success:
Celebration Success:
DurationMs = 2200
ParticleCount = 130
Banner Only:
ParticleCount = 0
14. Best Practices
Do
Use short and clear titles:
Saved successfully
Submitted successfully
Approved successfully
Updated successfully
Use short messages:
Your changes have been saved.
Your request has been submitted.
Taking you to the details page...
Use confetti for important successful actions:
Submit success
Approval success
Record creation
Process completion
Use banner only for small updates:
Inline update
Minor save
Auto-save success
Avoid
Do not redirect immediately after:
Avoid this:
Assign ShowConfirmation = True
Destination TargetScreen
Avoid very long durations:
DurationMs = 5000
Recommended range:
1400 to 2200
15. Final Recommended Setup
Use this configuration for most screens:
16. Summary
This component is used only for success messages.
Recommended behavior:
Important success action → Success banner + confetti
Small success action → Success banner only
Redirect after success → Show success animation first, then redirect from OnAnimationFinished
Final recommended default: