Copy field data to clipboard

Tami Lust

Is there a way to code a button so that when pushed the value of one field from a model is copied to the clipboard?

Bill McCullough

Tami,

Take a look at this tip on copying to the clipboard.  It shows how to code some JavaScript to get content from an input field.  I think this will get you started.

http://www.jstips.co/en/javascript/copy-to-clipboard/

Thanks,

Bill

Tami Lust

Bill,

Thank you for your response.Below is the code that I have written so far. I don't get any errors but I also don't get the field contents to the clipboard. 
Can you see the error of my ways?

var element = arguments[0],  $ = skuid.$;       // Copy to clipboard example     //Click Button $( document ).ready(function()     {   $('#copybutton').click(function() {  console.log ("Clicked");            // Clicked       // Select the contents  x = document.getElementsByClassName("generatedURL")[0].innerText;   console.log ("Element" + x);         // Copy to the clipboard   document.execCommand('copy');   console.log ("Copied");      });      });

Bill McCullough

Tami,

I think the select() function only works when the field is in Edit mode.  I don't think you will be able to set this up to work when the page loads.

Here is a working sample page.

Thanks,

Bill

<skuidpage personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="Contact" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Contact">
<fields>
<field id="RecordTypeId"/>
<field id="Name"/>
<field id="LastName"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<grid uniqueid="sk-kwc-257">
<divisions>
<division behavior="flex" minwidth="100px" ratio="1">
<components>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Contact" uniqueid="sk-kwX-232" mode="edit">
<columns>
<column width="100%" uniqueid="sk-kwX-228">
<sections>
<section title="Contact Details" uniqueid="sk-kwX-229" collapsible="no">
<fields>
<field uniqueid="sk-laD-258" id="LastName"/>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
</division>
<division behavior="fit" verticalalign="top">
<components>
<buttonset model="Contact" uniqueid="sk-kwg-272">
<buttons>
<button type="multi" label="Copy Name to Clipboard" uniqueid="sk-kwh-277" icon="sk-icon-clone">
<actions>
<action type="custom" snippet="copyName"/>
</actions>
</button>
</buttons>
</buttonset>
</components>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
</components>
<resources>
<labels/>
<javascript>
<jsitem location="inlinesnippet" name="copyName" cachelocation="false">var params = arguments[0],
$ = skuid.$;
document.querySelector('#sk-laD-258 &gt; div:nth-child(1) &gt; input').select();
document.execCommand('copy');
</jsitem>
</javascript>
<css/>
<actionsequences uniqueid="sk-kwG-113"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>

Bill McCullough

Tami,

A post script to my reply...The reason the select() function works with the field in Edit mode is that the function only supports selecting text from <input> fields.

Here is a link that shows how to copy any string by creating an input element and appending it to your page in a position where it won't show.

https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f

Thanks,

Bill