Custom Code Snippets
Browse the collection of commonly requested code snippets.
The following code snippets are not simple copy/pastes. Many of them need to be tweaked for your specific app and block names.
Code snippets mentioned here should be added to the page Settings -> Custom Code -> Code Inside Header, unless stated otherwise.
How to get back to the previous dynamic page (with List detail block) without losing the record id parameter in the URL
<script>
try {
const url = new URL(document.referrer);
const prevRecordId = url.searchParams.get('recordId');
if (prevRecordId && window.location.href.indexOf('?') < 0)
window.location.href = window.location.href + '?recordId=' + prevRecordId;
} catch (e) {}
</script>
How to hide the lines on the list and list detail blocks where the rows are empty on Airtable
<script>
const blockName = 'list-details1';
const fields = ['Field1', 'Field2'];
window.addEventListener('update-record', (e) => {
if (e.detail && e.detail.fields) {
const id = e.detail.id;
const tmpFields = Object.assign({}, e.detail.fields);
fields.forEach((field) => e.detail.fields[field] = e.detail.fields[field] || ' ');
setTimeout(() => {
if (window.records[id] && window.records[id].record) {
window.records[id].record.fields = tmpFields;
}
}, 1);
}
});
window.addEventListener('get-record-' + blockName, (e) => {
if (e.detail) window.dispatchEvent(new CustomEvent('update-record', { detail: e.detail }));
});
</script>
How to set Gradient colors for your entire pageโs background.
<style>
nav, section, footer {
background: linear-gradient(90deg, rgba(132,127,221,1) 0%, rgba(166,166,255,1) 35%, rgba(0,212,255,1) 100%)!important;
}
</style>
How to get a prefilled URL with record ID and redirect it to the detail page after login.
<script> try { const url = new URL(document.referrer); if (url.search && window.location.href.indexOf('?') < 0) window.location.href = window.location.href + url.search; } catch (e) {} </script>
Hide the button if there is no link coming from Airtable. (href is empty)
<script> <style> a[data-element="button"][href=""]{ display: none!important; } </style> </script>
Code for dividing the block with custom code block
<div class="divider"></div> <style> .divider { height: 1px; background-color: #fff; margin: 10px 0; } </style>
ย
Code for changing Charts colors
<script> window['chart1-colors'] = ['#FE8070', '#DD7E6B', '#EA9999', '#F4CCCC', '#24A37D', '#AEAEB5', '#E25B5B', '#FFF974', '#4BAEAE', '#E5E5EA', '#33E4EF', '#C9DAF2']; </script>
ย
Making a video full width AUTOPLAY block
<style> #BLOCKID .container { width: 100vw!important; max-width: unset; padding: 0; } </style>
code that will allow to display always expended items from the "List with Columnar Sliding Cards Expanded" block.
<script>
const onRecords = (e) => {
setTimeout(() => {
$('#list4 .horizontal-list-item').click()
}, 50);
};
window.addEventListener('get-records-list4', onRecords);
</script>
For blockโs background image
<style> #map1 section { background-image: url(https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=2000); } </style>
Translate the "Yearly" and "Monthly" options in the pricing block
<script>
window.addEventListener('block-loaded-pricing1', () => {
$("span:contains('Yearly')").text('aaa');
$("span:contains('Monthly')").text('bbb');
});
</script>
Create breadcrumbs so that the users can navigate across the different sections of the application.
ย
<ul class="stepNav fiveWide"> <li><span class = "stepNav-selected"><a href="https://louetta269.softr.app/project-info-select-project" title="">Project Info</a></span></li> <li class="selected"><a href="https://louetta269.softr.app/design-select-project" title="">Design & Plan</a></li> <li><a href="https://louetta269.softr.app/all-conversations" title="">Message Pros</a></li> <li><a href="https://louetta269.softr.app/compare-bids" title="">Compare Bids</a></li> <li><a href="https://louetta269.softr.app/project-check-out" title="">Check Out</a></li> </ul> <style> /* Base ------------------------------------------------------------------------- */ body { font: 14px/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; } /* Step Navigation ------------------------------------------------------------------------- */ .stepNav { height: 60px; position: relative; z-index: 0; list-style-type: none; padding: 0px; } /* z-index to make sure the buttons stack from left to right */ .stepNav li { float: left; position: relative; z-index: 4; } .stepNav li:nth-child(2) { z-index: 3; } .stepNav li:nth-child(3) { z-index: 2; } .stepNav li:nth-child(4) { z-index: 1; } .stepNav li:nth-child(5) { z-index: 0; } /* different widths */ .stepNav.threeWide li { width: 33.33%; } .stepNav.fourWide li { width: 25%; } .stepNav.fiveWide li { width: 20%; } /* step links */ .stepNav a { width: 100%; height: 60px; color: #717171; text-align: center; text-shadow: 0 1px 0 #fff; line-height: 60px; white-space: nowrap; border: 1px solid #cbcbcb; text-decoration: none; border-top-color: #dddddd; border-right: 0; background-color: #ffffff; float: left; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .stepNav a:after { content: ""; width: 42px; height: 42px; border-right: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; background-color: #ffffff; display: block; position: absolute; top: 8px; right: -22px; z-index: -1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .stepNav a:hover{ color: #ffffff; background-color: #ebb32c; &:after{ content: ""; width: 42px; height: 42px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; background-color: #ebb32c; display: block; position: absolute; top: 8px; right: -22px; z-index: -1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .stepNav-selected a { color: #ffffff; background-color: #ebb32c; &:after{ content: ""; width: 42px; height: 42px; border-right: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; background-color: #ebb32c; display: block; position: absolute; top: 8px; right: -22px; z-index: -1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } } </style>
ย
Hide chart data refresh message
<style> div[category='Chart'] span[class*='message'] { display: none!important; } </style>
ย
Hide the labels on a sign-in or sign-up form
Replace #user-accounts2
with the name of your block. Paste this code in the header of the sign-in/sign-up page.
<style> #user-accounts2 .form-input-label { display: none; } </style>
ย
ย
Did this answer your question?
๐
๐
๐คฉ