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


mvp_badge
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

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.



mvp_badge
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

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.



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

mvp_badge
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

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.



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)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.