Copy string to ClipBoard via UDButton

Hey Everyone,

Does anyone have or know of a way to have a UDButton Onclick copy to the clipboard?

I have a use case where I want to provide a value to the user but not display it just provide the ability to copy it to their clipboard.

I tried Set-Clipboard, and it does work in a standalone PS terminal, doesn’t work so well in UD.

thanks!

This is kinda tricky. You would need to force the clipboard copy to happen in the browser via JavaScript: https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery

It’s possible using something like UDHelmet or a custom control but would be a bit of a hack. I’d propose that we introduce a new cmdlet, like Set-UDClipboard and does all that magic for you.

Set-UDClipboard sounds like the cmdlet for me :slight_smile:

should I submit a feature request in github?

That would be great. Thank you!

Done - https://github.com/ironmansoftware/universal-dashboard/issues/1190

1 Like

Alright, another PR ready.

Should be in the nightly release soon, as long as our lord and saviour @adam approves.

1 Like

All I can say is WOW!

Cant wait to give this a go.

I have started testing the Set-UDClipboard in the latest nightly build and I dont think its working.

I can see the -toastOnSuccess toast but nothing is copied to the clipboard.

New-UDColumn -Content {
   New-UDButton -Floating -Icon clipboard -OnClick {
    Set-UDClipboard -Data "hellocopy" -toastOnSuccess -toastOnError
  } 
}

And when I go to a local PS terminal and run Get-Clipboard nothing is there.

image

Hi @mylabonline,
Any Javascript errors in the dev console in your browser?

I dont see anything out of the ordinary.

below is the developer console

Also when I look at the Network Developer Tab, I see the websocket message when I click the button to copy to clipboard, I also see the text value “hellocopy” but nothing copied to clipboard.

@adam i set copy to clipboard button in the antd library using
import { useClipboard } from 'use-clipboard-copy'

this is the button in the lib
maye you can use it

1 Like

the set-udclipboard uses plain ol’ javascript to create an invisible element with the relative data.
As long as you’re not getting an error message during the creation of this element it should work unless your browser settings restrict clipboard access etc?

Which browser are you using? I admit, i only tested it on Chrome, however the javscript should function on all newer browser, from IE8+ i believe.

I’m using Chrome as well - Nothing is being blocked as I can go to other websites that have JS copy and it works as expected.

see the example site below - In the screen snip you can see the webpage, and when I click the Copy button the result is the copy text. Also, notice in the Console Debug there is an Action and Trigger… this never appears in the UD site Console.

https://clipboardjs.com/

Hi again @mylabonline
I’ll check the set-udclipboard in the morning.
Ill update you :slight_smile:

Actually let me spend some time looking into my Dashboard… Just to make sure it was an issue with the cmdlet I added the button and Set-UDClipboard to the default poshud site in the nightly build module folder and it works.

So I have no idea why it does not work in my dashboard… I will have to pull it apart. Will post back when I find something.

Hmmm I think I found the issue - When the Button that is triggering the Copy clipboard cmdlet is in a Modal the copy does not work. When I move the button with the copy outside of a modal to display on the page the copy works.

Any idea why this wont work in a Modal?

Hi @mylabonline,
Apologies for the late response.

I’ve replicated the issue and opened an issue for it on github.


I need to check if the javascript part actually runs, i’ll get to it when i have a chance and keep you posted :slight_smile:

3 Likes

This issue seems to have reappeared in 2.10.2 of PowerShell Universal (or somewhere between 2.7.2 and 2.10.2).
We were using New-UDClipboard in a modal, which has stopped working after an update to 2.10.2 and is now returning the error “Cannot bind argument to parameter ‘Data’ because it is an empty string” in a toast.