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.

  • These functions are now exposed with LockerService enabled. Let me know if you see any issues using the APIs. – TrevorBliss Nov 18 '16 at 22:25
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

  • 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 Sep 2 '16 at 15:25
  • 1
    @user682217 if you want to save data pragmatically then send it to server side action and generate CSV over there. – Saurabh Mishra Dec 22 '16 at 15:47
  • I think it is not supported any more, I could not find ui:copy – efirat May 3 '18 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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.