Category
tip
This is an example of what we will be doing:
Step 1: In airtable
You should have a field containing the data you want the user to copy. In my case it's named
live.Then add the following formula to a field named
live_copy-button:'<div class="parent"><div class="left">' & {live} & '</div> <div class="right"> <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg> </div> </div>'Step 2: In SOFTR
Link a list details block or a list block to the
live_copy-button field we just created, set it as single line text.In the page custom code footer, add the following code (adapting CSS as you like):
<style>
.parent{
display: flex;
position: relative;
font-size: 12px;
font-weight: bold;
}
.left{
border: 2px solid;
border-right:none;
border-radius:10px;
border-bottom-right-radius:0;
border-top-right-radius:0;
padding: 5px 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.right{
border: 2px solid;
cursor:pointer;
border-radius:10px;
border-left:none;
border-bottom-left-radius:0;
border-top-left-radius:0;
padding: 5px 10px;
background-color: #FFA500;
}
</style>Followed by this script
<script>
document.addEventListener("DOMContentLoaded", function() {
const existCondition = setInterval(function() {
if ($('#copy-page').length) {
const text = document.querySelector(".left");
const button = document.querySelector(".right");
function copyText() {
navigator.clipboard.writeText(text.innerText).then((t) => {});
}
button.addEventListener("click", copyText);
clearInterval(existCondition);
}
}, 100);
});
</script>Publish your app and you should have a working copy-to-clipboard button!
