Copy to clipboard custom code

Custom Coding
1

Hey guys, here is a custom code to add a “copy to clipboard” feature to your table block. You will need to add it to the page Settings → Custom Code → Footer section → Save → Publish:

<script>
window.addEventListener('get-records-table1', (e) => {
    setTimeout(() => {
        document.body.addEventListener('click', (e) => {
            if (e.target.closest('#table1 .right')) {
                let copyText = e.target.parentNode.querySelector('.left');
                copyText.select();
                copyText.setSelectionRange(0, 99999);
                document.execCommand('copy')
            }
        });
    }, 50);
});
</script>

Also, here is another custom code for the Airtable formula field:

'<div class="parent"><input class="left" type="text" value="text to copy"/><button class="right">click to copy</button></div>'
1 Like
2

In addition, you can use the same formula but this custom code If you need to add copy to clipboard on List Details block instead of Table block.

<script>
window.addEventListener('get-record-list-details1', (e) => {
    setTimeout(() => {
        document.body.addEventListener('click', (e) => {
            if (e.target.closest('#list-details1 .right')) {
                let copyText = e.target.parentNode.querySelector('.left');
                copyText.select();
                copyText.setSelectionRange(0, 99999);
                document.execCommand('copy')
            }
        });
    }, 50);
});
</script>
2 Likes
3

Here is a full code I created for sharing a tally form, it includes a little styling and also that the text changes from “copy”, to “copied!” once clicked.

Here is how it looks:)

Screenshot 2023-04-12 at 12.47.22
Screenshot 2023-04-12 at 12.47.22848×196 12.3 KB 

<style>
.parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.left {
  flex: 1;
  padding: 10px;
  border-radius: 20px;
  border: none;
}

.right {
  padding: 10px 20px;
  background-color: #fae5c6;
  color: #333;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

.right:hover {
  background-color: #e0cba7;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('.right');
  var input = document.querySelector('.left');

  button.addEventListener('click', function() {
    input.select();
    document.execCommand('copy');
    button.innerHTML = 'Copied!';
  });
});
</script>

<div class="parent">
  <input class="left" type="text" value="https://getclickable.co"/>
  <button class="right">Copy link</button>
</div>
1 Like
4

Please excuse my coding ignorance.

I added the code to the footer section, but I don’t see the “copy to clipboard” option anywhere on the page, or as an option to add on the list details. Are there any further steps to do this?
Thanks

5

Hey @erikm3103, thank you very much for sharing your code with the community :heart:

6

Hey @TJ-Pitchstr, you should do slight adjustments to the above-shared code by adding your block ID to it wherever you see “list-details1” written in the code (change “list-details1” to your block ID).

7

Thanks Marine. I did the above but still nothing changed. I’m sorry I need to be spoon-fed the instructions. Is there any other steps to be taken after the code is inserted into the footer section of the page settings? My block name is list-details3, so I just replaced the 1 with a 3.

8

Dear @TJ-Pitchstr, no worries about asking questions. Then, please send your app URL so that we can check and provide you with a solution.

9

Thanks @Marine.Hovhannisyan the app is on app.Pitchstr.com and the email support@softr.io has been added as a collaborator. Thanks for your help

10

Hi @TJ-Pitchstr thank you for the access and apologies for not noticing your response earlier. May I know, whether it is the list details block in /applicant-details page and If so, which field the formula is mapped to. In addition, I would kindly ask you provide a screenshot of your formula field in Airtable table either here or there is an open chat I just noticed, you can also send it there. :slightly_smiling_face:

11

Thanks @Maria. I need the “copy to clipboard” for a link to the page called “job spec”. I’m not sure if the formula is needed, but I created a field called Page URL in the Positions table in Airtable based on a discussion thread in another topic. I don’t have access to that formula now but support@softr.io is also added to my Airtable base.

12

Hi @TJ-Pitchstr formula should be added to your Airtable table
<div class="parent"><input class="left" type="text" value="text to copy"/><button class="right">click to copy</button></div> that is connected to your list details block and If want to copy a single value for all the records on that block you can simply use formula field and change text to copy to the value that needs to be copied (e.g. <div class="parent"><input class="left" type="text" value="https://studio.softr.io"/><button class="right">click to copy</button></div>) or If you need to copy different values for each record you can use long text in Airtable and insert this formula for every record by replacing text to copy in it to the values that you need to copy.
Last step would be connecting the formula/or long text field to our rich text field on your block since you already have the code inserted to Page Settings> Custom Code>Footer section. So this is just a 3-step process( formula, custom code, field mapping). Let me know should you have any questions :slightly_smiling_face:

13

Thanks @Maria , sorry I only now got the chance to try the solution you provided. I inserted the above script in formula format and it gave me an error message (even tried the example you gave). As for the “long text” format you mentioned, I would have to add that manually to each record? I don’t think that works for me.
I’m not sure if I explained the use case. It is as follows:
My users will create a job through a form on another page called “Add Job” on my app. After the job is created, the user goes to the “Job Spec” page for that created job. Here, I need a button, visible only to my logged in user, that will copy the link to that page, for that specific job (that unique record), to the clipboard to be shared on LinkedIn or other job boards, so that candidates apply for that job.
So the link will be unique for each record and the value should be created when that job record is created in Airtable.
Hopefully I was able to explain my use case. Thanks for your help.

14

Hi @TJ-Pitchstr
So for your use case, I modified the formula a bit and currently it looks like this:

IF({url}, '<div class="parent"><input class="left" type="text" value="' &

CONCATENATE("", {url}) & '"/><button class="right">click to copy</button></div>', "")

If you need to copy the value of Page URL field for example from your Airtable table, then simply replace url field to that one in the formula

IF({Page URL}, '<div class="parent"><input class="left" type="text" value="' &
CONCATENATE("", {Page URL}) & '"/><button class="right">click to copy</button></div>', "")

Please, insert this into a formula field and use it instead of long text field and then map this formula field to our rich text field on the dynamic block.

Each time, your Page URL formula generates a new url, the copy to clipboard formula value will be changed accordingly and hence, you will copy the respective url.

FYI, your Recruiter user group is not correctly configured. Instead of text field try to use Single select or Multi select field in Airtable and have Recruiter as an option so that you can create your User group accordingly.( e.g. with the following condition Logged in User Type is Recruiter)

Hope this helps :slightly_smiling_face:

15

@Maria Yes!!! that worked perfectly. This will help recruiters post the record on job board to receive applications.

I need one more thing, going back to your previous response for copying a link. one for all records. The formula you shared wasn’t working as a formula field. Is it missing something?

<div class="parent"><input class="left" type="text" value="https://studio.softr.io"/><button class="right">click to copy</button></div>

It did the job as a “long text”, but I can’t enter it manually every time a record is created. Let me know if there is a solution for that, otherwise, I can insert it as a hidden field when the record is created, because it’s one link for all records.

Thanks

16

Hi @TJ-Pitchstr no need to add a different url each time manually. That is why I asked to insert this formula that takes the value of Page URL field that you have in your table once a new url is generated with every submission.


IF({Page URL}, '<div class="parent"><input class="left" type="text" value="' &
CONCATENATE("", {Page URL}) & '"/><button class="right">click to copy</button></div>', "")

If you need to copy another value from another field just replace Page URL-s in the formula with the field that you need

Untitled
Untitled462×1178 71.1 KB

17

@Maria yes that part was perfect. I want to add another copy button to copy another URL, but this time only one URL for all records.
The use case is I want the user who created the record (recruiter) to invite external users (hiring managers) to sign up and view the record. The invite link for the hiring managers is https://app.pitchstr.com/hiring-manager-signup. This is a separate sign up link that automatically marks the user signing up in the “hiring managers” user group.

<div class="parent"><input class="left" type="text" value="https://studio.softr.io"/><button class="right">click to copy</button></div>

This is why the formula shared initially would be perfect for me, only it’s giving me an error message, so I want to know if I’m missing something.

Thanks,

18

Hi @TJ-Pitchstr. Sorry about that, I just updated Marine’s formula.
It was missing ‘’
So here is the updated one

'<div class="parent"><input class="left" type="text" value="text to copy"/><button class="right">click to copy</button></div>'

1 Like
19

Perfect! thanks @Maria & @Marine.Hovhannisyan . Sorry for the never-ending requests. It all works now

20

@TJ-Pitchstr Awesome. You are very welcome😊