Copy field data to clipboard

edited January 2019 in Questions
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?

Comments

  • edited January 2019
    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

  • edited January 2019
    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");      });      });
  • edited January 2019
    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>

  • edited January 2019
    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
Sign In or Register to comment.