Clipboard copy

Flow
1

Is there a way, when clicking on a context item, to copy some text to the clipboard?

2
3

Hi Tatu, how are you ?

Wouldn’t it be ideal to update the tutorial ? with the new copy ?

window.copyToClipboard = async (str) => {
if (navigator.clipboard && navigator.clipboard.writeText) {
    try {
      await navigator.clipboard.writeText(str);
      console.log(“Copied!”);
      return;
    } catch (err) {
      console.warn("Failed xxx: ”, err);
    }
  }
}
4

You are correct that it uses on old API which is not supported by all browsers. So a bit related to this Clipboard API · Issue #17703 · vaadin/flow · GitHub, i.e. Asynchronous Clipboard API should be now supported by all browsers. And that means that we could potentially add utility API in Flow now and deprecate this older JavaScript workarounds.

1 Like
5

There is also an addon in the directory, that might help: Clipboard for Flow - Vaadin Add-on Directory

2 Likes
6

I save it like this to clipboard

 Button buttonCopy= new Button("Copy Data", VaadinIcon.COPY.create());
        buttonCopyOrderData.addClickListener(buttonClickEvent -> {
            UI.getCurrent().getPage().executeJs("navigator.clipboard.writeText($0)", textField.getValue());
        });
1 Like
7

For me, this add-on works on Android but not iPhone. If it doesn’t work on iPhone it’s a no-go.