Skip to Content (Press Enter)
UserImage.jpg
Ryan Rigby
1867Views
12Comments
Solved
Copy to clipboard button
Question

I am writing a traditional web app using OutSystems 11, and am working on a Windows 10 machine...

Hello,

I am trying to create a button that copies text from either a variable or an input textbox to the clipboard. I've done some reading, and it looks like I will need to write some javascript. It seems that the most popular way to do this involves using document.execCommand('copy'). Can someone help me figure out how to do this. I have limited javascript knowledge, and was having a hard time following other posts on the topic.

Thanks,

Ryan


0
0
21 May 2020
Copy Link
2016-04-22 00-29-45
Nuno Reis
 
MVP
Solution

I did this in Reactive, you are probably in Traditional.

It is even easier. You just need to write the Jscode on the button.

See solution in context
Copy1.oml
4
0
21 May 2020
Copy Link
UserImage.jpg
Ryan Rigby

Thank you! Your demo was very clear, and was exactly what I needed.

Nuno Reis wrote:

I did this in Reactive, you are probably in Traditional.

It is even easier. You just need to write the Jscode on the button.



0
0
22 May 2020
Copy Link
2024-12-18 16-06-42
Junaid Syed
2016-04-22 00-29-45
Nuno Reis
 
MVP

Hello Ryan.

You can create a simple JavaScript script.

  • Name the input.
  • Create an action with a JavaScript widget.
  • Give the Input Name to JavaScript
  • Done,


I attached a working example.

Copy.oml
0
0
21 May 2020
Copy Link
UserImage.jpg
Ryan Rigby

I get the following error. I believe it is because the app I am maintaining is based on the SilkUI framework, so I don't have the 'Run Client Action' or 'JavaScript' execution box features. In my environment, It think I need to run the javascript using the extended properties of a button. Can you show me how I could do that (or suggest another way)? Thanks.


Nuno Reis wrote:

Hello Ryan.

You can create a simple JavaScript script.

  • Name the input.
  • Create an action with a JavaScript widget.
  • Give the Input Name to JavaScript
  • Done,


I attached a working example.



1
0
21 May 2020
Copy Link
UserImage.jpg
Alex Feld

Nuno Reis wrote:

Hello Ryan.

You can create a simple JavaScript script.

  • Name the input.
  • Create an action with a JavaScript widget.
  • Give the Input Name to JavaScript
  • Done,


I attached a working example.

 

Hey Nuno, thanks for your great example. 

In your example you are using the input of textboxes, how is it possible to use variables as In1.

I tried it and get the error message: Cannot read property 'select' of null.

Thanks,

Alex

0
0
20 Oct 2020
Copy Link
2016-04-22 00-29-45
Nuno Reis
 
MVP
Solution

I did this in Reactive, you are probably in Traditional.

It is even easier. You just need to write the Jscode on the button.

Copy1.oml
4
0
21 May 2020
Copy Link
UserImage.jpg
Ryan Rigby

Thank you! Your demo was very clear, and was exactly what I needed.

Nuno Reis wrote:

I did this in Reactive, you are probably in Traditional.

It is even easier. You just need to write the Jscode on the button.



0
0
22 May 2020
Copy Link
2021-08-30 13-15-05
Adam Husník

Is there more general way of doing this? I mean f.e. copying from a variable or even from an JS input parameter instead of from input widget? I can't find any proper Outsystems JS guide so it is such a black box to me. (this didn't help me at all https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_and_Reactive_Apps_Using_JavaScript)

0
0
01 Jun 2021
Copy Link
UserImage.jpg
Tim Banning

I found another way to solve this by using JavaScript. In case it's useful to anyone in the future:

Create a Client Action with a mandatory input parameter TextLine. Then call the following Javascript code that also has an input parameter TextLine:


function copyTextToClipboard(text) {

  if (!navigator.clipboard) {

    return;

  }

  navigator.clipboard.writeText($parameters.TextLine);

}

copyTextToClipboard($parameters.TextLine)


7
0
04 May 2022
Copy Link
2020-06-18 23-58-03
Lucas FF Lopes 🚀
Champion

This solved my problem. Thanks. :)

0
0
19 Jul 2022
Copy Link
UserImage.jpg
Joseph Kuhn

This also did it for me. Thank you!

0
0
12 Sep 2022
Copy Link
UserImage.jpg
Morgan Kemp

This still works. 

0
0
28 Mar 2024
Copy Link
2022-02-09 08-51-59
Graham Walker

worked for me

0
0
22 Jan 2025
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.