2

I need a functionality to copy table data to clipboard. With locker enabled I don't have access to :

document.queryCommandSupported('copy')
document.execCommand('copy');

How else can I deliver this functionality. Will Flash work with lightning. I suppose not.

1
  • These functions are now exposed with LockerService enabled. Let me know if you see any issues using the APIs. Commented Nov 18, 2016 at 22:25

4 Answers 4

4

I have also faced the same issue. If you use Salesforce CLI to scan your code. It will say that document.execCommand('copy'); is not a secure document function.

Only possible solution I can think of is to use a prompt(window.prompt is not supported) with a input box which will show a input selected text and focused. There will be a message over input text 'Please press Ctrl+C to Copy' and on press 'Ctrl+C' prompt will close.

We have already implemented a prompt for our package but I am not sure how good will be the UX of this solution.

Please let me know your thoughts.

PS: ui:copy is not supported on salesforce. For supported APIs please go to https://your-org-domain.lightning.force.com/auradocs

1

I tried to do

var doc = document;
doc.queryCommandSupported('copy');
doc.execCommand('copy');

It doesn't gives me Lightning CLI errors and it executes fine. Will this work in this case.

0

The aura framework has a ui:copy event where you can handle when the user has copied content to the clipboard.

See here: http://documentation.auraframework.org/auradocs#reference?descriptor=ui:copy&defType=event

3
  • thanks I didn't see it however my use case is a bit different. I need to programatically execute copy to clipboard on a button click. Ultimately I want also to save the content as csv file as well. One step at a time...
    – user682217
    Commented Sep 2, 2016 at 15:25
  • 1
    @user682217 if you want to save data pragmatically then send it to server side action and generate CSV over there. Commented Dec 22, 2016 at 15:47
  • 1
    I think it is not supported any more, I could not find ui:copy
    – efirat
    Commented May 3, 2018 at 8:50
0

I have solved this issue by using hidden textarea element.

modalBody is the text that will be copied.

<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
    <p>{!v.modalBody}</p>

    <TEXTAREA ID="holdtext" style="width: 0px; height: 0px; opacity: 0;">
        {!v.modalBody}
    </TEXTAREA>
</div>
<footer class="slds-modal__footer">
    <lightning:button aura:id="copy" variant="neutral" label="Close" iconName="action:close" iconPosition="left" onclick="{! c.close }" />
    <lightning:button variant="brand" label="Copy" iconName="utility:copy_to_clipboard" iconPosition="left" onclick="{! c.copy }" />
</footer>

On the controller:

copy : function(component, event, helper) {
    var holdtxt = document.getElementById("holdtext");
    holdtxt.select();
    document.queryCommandSupported('copy');
    document.execCommand('copy');

    var source = event.getSource();
    source.set('v.label','COPIED!');

    setTimeout(function(){
        component.set("v.showModal", false);
    }, 1500);
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .