Log in to AnswerLog in to Follow
UserImage.jpg
Ryan Rigby
420Views
8Comments
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
2016-04-22 00-29-45
Nuno Reis
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.

See solution in context
Copy1.oml

2
0
21 May 2020

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
2016-04-22 00-29-45
Nuno Reis
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

0
0
21 May 2020

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

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
2016-04-22 00-29-45
Nuno Reis
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

2
0
21 May 2020

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

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

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)


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