Copy to Clipboard functionality similar to the Color Palette Block

[Lea_Marolt_Sonn]

Hi!

I’m curious if anyone know how to implement a copy-to-clipboard in an Airtable Block that’s similar to how this Color Palette works, https://support.airtable.com/hc/en-us/articles/115013249087-Color-palette-block .

I’m hoping to make different lines of text clickable to facilitate fast copy & pasting of code snippets.

[Kasra]

Hi! This might be helpful: GitHub - nkbt/react-copy-to-clipboard: Copy-to-clipboard React component

You can use that in your custom block. Since this thread is in the “Scripting block” category, just want to clarify that it’s not currently possible to use external packages in the scripting block.

[Greg_F]

That is helpful for custom blocks.

In case someone is doesn’t known too much about coding from the package above you need:

import {CopyToClipboard} from 'react-copy-to-clipboard';

<CopyToClipboard text={variableToCopy}> 

                <Button icon="clipboard"  maxWidth="20">

                Copy this

                </Button>

            </CopyToClipboard>

That makes it pretty straightforward to copy text to the clipboard.

[Mike_Pennisi]

I’ve relocated this post to the “Custom Blocks Beta” category so that it’s easier for others to find.

[Jess_Databases]

Hey there! Resuscitating this old post here with the hopes I can get some help with coding a copy button. Thanks in advance for looking into it.

I'm using Airtable to generate a large block of text, and it would be amazing if I could use a Button field to click and copy that specific cell to the clipboard.

I was able to find on this same forum a script that takes a cell as the input and then copies it into another cell.

I thought I could, instead of copying the cell content to another cell, simply copy it to the clipboard. The script is below.

It seems, though, that there is no clipboard access on the scripting block...

// Change this name to use a different table
let table = base.getTable("Teachers");

// This script is run from a button field &will use the button's record
let record = await input.recordAsync('Select a record to use', table);

if (record) {
// You can use record.getCellValue("Field name") to access
let oldValue = record.getCellValueAsString("Custom First Name");

let newValue = oldValue;
output.text(newValue);

await table.updateRecordAsync(record,{"Test": newValue});
} else {
output.text('No record was selected');
}

So I tried the solution above from @Greg_F but my React coding chops are non-existent, and I'm unable to get the cell value into the code itself.

Below is the error message I'm getting and the code I'm trying. Super barebones.

Any tips? Thanks so much in advance 

import {initializeBlock} from '@airtable/blocks/ui';
import React from 'react';
import {CopyToClipboard} from 'react-copy-to-clipboard';

function HelloWorldApp() {
// YOUR CODE GOES HERE

<CopyToClipboard text={Message}>

<Button icon="clipboard" maxWidth="20">

Copy this

</Button>

</CopyToClipboard>
return <div>Hello world ‌🚀‌</div>;

}

initializeBlock(() => <HelloWorldApp />);

[Greg_F]

@Jess_Databases Gosh this is an old one! 

Looking at this quickly it was referring to coding Custom Blocks - like with VS code and whole set up on you local machine.  If you are trying to use the regular Scripting block in the UI (Web window) it does not allow to use React.

[Jess_Databases]

Thanks for the info!

Yes, and the Scripting block doesn't seem to allow for manipulating the clipboard... hence trying Custom Blocks.

Would you know off-hand if one can use the input from an Airtable record into a Custom Block?

Basically, what I'm trying to do is click the Copy button and copy the contents of the Message cell to the clipboard.

Thanks so much!

[Greg_F]

@Jess_Databases  hmm I am thinking that you could have the button trigger the custom block and have the custom block run the some code. 

You could test if does anything: navigator.clipboard.writeText("text to copy");

However the main question is that you seem to be copying some sort of message "Hi..." why copy paste it? why not send directly where it should go?

[Jess_Databases]

Hi Greg,

I agree it would be better if clicking the button would send the message directly to the recipient, as opposed to copy-pasting it somewhere else. The reason we have to do it is that we are pasting the message into the message field of an in-site messaging system, and in most cases, personalizing the message before sending it.

Airtable will generate the basic skeleton of the message, which would be pasted in the message field, personalized, to be then sent out.

I added the js line to the index.js file in the custom Block project, set up a button to trigger this block, but unfortunately it doesn't seem that the text is being copied to the clipboard 😞

I changed Hello World to different things, and it gets updated right away on the Airtable interface, which means there is communication between this code and the Airtable interface. Below is an example of how I set it up.

Thoughts?

Thanks so so much!

import {initializeBlock} from '@airtable/blocks/ui';
import React from 'react';

function HelloWorldApp() {
    // YOUR CODE GOES HERE
    
    return <div>Hello world 123123</div>;
    navigator.clipboard.writeText("text to copy");

}

initializeBlock(() => <HelloWorldApp /> );

[Greg_F]

Yeah... that is not going to work this way...   it is a bit more complicated than that. Also return ends a function so nothing beyond is accessible. Cant remember if navigator is accessible  in custom blocks. Too tied up on projects  too check. if you would be interested in hiring me building up a custom block send me DM or message here: https://www.business-automated.com/contact-us