1. Defining the Action in UI Design

• Open your project on the Kuika platform.
• Go to the UI Design module and select the relevant screen.
• Create a button such as ‘Copy’.

• Select the button and add the Device > Copy To Clipboard action from the + ADD ACTION menu according to the desired trigger event (Initial Actions, OnClick, OnBlur, etc.).

3. Configure Action Parameters

• Value: Specify the text or data to be copied to the clipboard.
• This value can be taken from sources such as Fixed, Form Component, Current, Action Result, and can be linked via the Symbol Picker.
• Click the SAVE button to complete the process.

A user may want to send an invitation link created in the application to a friend. In this case, the link text can be copied to the clipboard via a button.

Adding a Copy Link Action for the User

Enter the

• UI Design module and drag and drop a Button element from the Elements panel on the left side.
• In the Properties panel, enter a phrase such as ‘Copy Link’ in the Label section of the button.
• Select the relevant button and add the + ADD ACTION menu: OnClick → Device → Copy to Clipboard action.

Configuring the Copy to Clipboard Action

• Value: The link to be copied to the clipboard.
  
  • Example (static value): https://kuika.com/invite?user=123
  • Example (dynamic value): inviteData.link
  • If the link will be dynamically retrieved from a data source (e.g. a record from an API):
    
    • The button should be located in a form or detail page linked to a data source.
    • An object such as inviteData should contain the relevant record information.
    • In this case, a binding can be made to the Value field as ‘inviteData.link’.
    • This allows links specific to each user or each record to be copied to the clipboard.

With this configuration, when the user clicks the button, the specified link is copied to the clipboard and the user can share it by pasting it elsewhere.

• Dynamic Text Copying: User inputs from form components, process results, or generated dynamic links can be transferred to the clipboard.
• Post-Copying Notification: You can display a warning or toast message along with the action to notify the user that the text has been copied.
• Copy Sensitive Information: Data such as passwords, tokens, or system information can be displayed and copied only by authorised users.

Technical Risks

• Empty Data: If the data to be copied is empty, a meaningful warning should be displayed to the user.
• Mobile Compatibility: The action only works in web applications. Different solutions may be required for mobile devices.
• Browser Permissions: In some browsers, copying may be restricted for security reasons. The ‘Copy’ action must be triggered directly by user interaction (click).

The ‘Copy to Clipboard’ action is a fast and effective solution to simplify information sharing for users in your application. With its simple structure, high user experience, and wide range of applications, it is an action that can be used in almost any project.