A lightweight, reactive drag-and-drop Web Block to copy text or input values to the device clipboard with modern browser API support, fallbacks, and customizable feedback UI.

🌟 Key Features

• ⚡ Zero Dependencies: Built using native Web APIs (navigator.clipboard & fallback document.execCommand).
• 📱 Cross-Platform Support: Works seamlessly across Reactive Web, Progressive Web Apps (PWA), and Native Mobile apps (iOS & Android).
• 🎨 Fully Customizable UI: Use the built-in copy/success button or insert your own custom button/icon inside the block placeholder.
• 🔔 Built-in Visual Feedback: Automatically toggles visual icon state ("Copied!") and triggers native OutSystems success toast notifications.
• 🔒 Secure Context Ready: Full fallback handling for non-HTTPS or iframe environments where browser security blocks clipboard access.
• 📢 Reactive Event Handlers: Fires OnCopySuccess and OnCopyError events so parent screens can react with custom logic.

💻 Compatibility

📖 User Manual & Integration Guide

1. Component Reference

📥 Block Input Parameters

📤 Block Events

2. Step-by-Step How-To Guide

Use Case 1: Simple Input Copy Button

Copying text from an Input field on a screen.

1. Open your Reactive Screen in Service Studio.
2. Add a CopyToClipboard block right next to your Input Widget.
3. In the Block properties pane, set:
   • TextToCopy = MyInputVariable
4. Publish and test!

Use Case 2: Custom Icon / Button UI inside Placeholder

Using your own custom UI design inside the block slot.

1. Drag the CopyToClipboard block onto your canvas.
2. Set TextToCopy = "Your Text Here".
3. Look at the block's CustomButtonSlot placeholder on the canvas.
4. Drag your own custom Button, Icon, or Link into CustomButtonSlot.
5. Your custom UI will now trigger the copy action on click automatically.

Use Case 3: Copying Data from a Table Row

Adding a "Copy API Key" or "Copy Order ID" button inside a Table row.

1. Inside a Table column cell, drag the CopyToClipboard block.
2. Set TextToCopy = GetOrders.List.Current.Order.OrderNumber.
3. Set ShowFeedbackMessage = True.
4. Users can now copy row data directly with a single click.

🔍 Troubleshooting & FAQ

Q: Why is copying failing on my local network / HTTP site?

A: Modern browsers restrict navigator.clipboard access to Secure Contexts (HTTPS) or localhost. This component automatically detects non-secure environments and uses an internal fallback mechanism (document.execCommand), but for production applications, HTTPS is strongly recommended.

Q: Can I copy rich text or HTML?

A: This block is optimized for plain text, API keys, URLs, and code snippets. To copy rich HTML formatting, extend the internal JavaScript node to use ClipboardItem.

Q: How can I customize the "Copied!" notification styling?

A: You can set ShowFeedbackMessage = False and handle the OnCopySuccess event on your parent screen to show custom popups, tooltips, or notifications.

📄 License & Contribution

• Distributed under the MIT License. Free for commercial and non-commercial use in any OutSystems application.
• Contributions, bug reports, and feature suggestions are welcome on the OutSystems Forge repository page!