show-me-confetti
Reactive icon

Show me Confetti

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded
 on 14 October 2025
 by 
0.0
 (0 ratings)
show-me-confetti

Show me Confetti

Documentation
1.0.1
  • 💡 Usage

    1. Drag and drop
      Add the ConfettiBlock to any screen in your app.

    2. Trigger it
      Call the ShowMeTheConfetti client action from a button, event, or screen logic to launch confetti.

    3. Celebrate!
      Watch colorful confetti burst into the air. 🎉

  • ⚙️ Alternatively (Manual Setup)

    If you prefer to add confetti directly to your app without using the block:

    1. Add the confetti loader script
      Include this snippet in a Script block

      if (typeof confetti === 'undefined') { var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js'; script.onload = function() { window.confettiReady = true; }; document.head.appendChild(script); } else { window.confettiReady = true; }
    2. Add the launch script
      Then, in your OnReady or OnClick event, use:

      function launchConfettiWhenReady() { if (window.confettiReady) { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); } else { setTimeout(launchConfettiWhenReady, 100); } } launchConfettiWhenReady();

1.0.0
  • 💡 Usage

    1. Drag and drop
      Add the ConfettiBlock to any screen in your app.

    2. Trigger it
      Call the ShowMeTheConfetti client action from a button, event, or screen logic to launch confetti.

    3. Celebrate!
      Watch colorful confetti burst into the air. 🎉

  • ⚙️ Alternatively (Manual Setup)

    If you prefer to add confetti directly to your app without using the block:

    1. Add the confetti loader script
      Include this snippet in a Script block

      if (typeof confetti === 'undefined') { var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js'; script.onload = function() { window.confettiReady = true; }; document.head.appendChild(script); } else { window.confettiReady = true; }
    2. Add the launch script
      Then, in your OnReady or OnClick event, use:

      function launchConfettiWhenReady() { if (window.confettiReady) { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); } else { setTimeout(launchConfettiWhenReady, 100); } } launchConfettiWhenReady();