Custom 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>

<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>

&lt;style&gt; a[data-element="button"][href=""]{ display: none!important; } &lt;/style&gt;
</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>

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>

Building Blocks

Add and Manage Users

Publishing

Application Settings

Integrations

How to get back to the previous dynamic page (with List detail block) without losing the record id parameter in the URL

How to hide the lines on the list and list detail blocks where the rows are empty on Airtable

How to set Gradient colors for your entire page’s background.

Hide the button if there is no link coming from Airtable. (href is empty)

Code for dividing the block with custom code block

Code for changing Charts colors

Making a video full width AUTOPLAY block

code that will allow to display always expended items from the “List with Columnar Sliding Cards Expanded” block.

For block’s background image

Translate the “Yearly” and “Monthly” options in the pricing block

Hide chart data refresh message

​How to get back to the previous dynamic page (with List detail block) without losing the record id parameter in the URL

​How to hide the lines on the list and list detail blocks where the rows are empty on Airtable

​How to set Gradient colors for your entire page’s background.

​How to get a prefilled URL with record ID and redirect it to the detail page after login.

​Hide the button if there is no link coming from Airtable. (href is empty)

​Code for dividing the block with custom code block

​Code for changing Charts colors

​Making a video full width AUTOPLAY block

​code that will allow to display always expended items from the “List with Columnar Sliding Cards Expanded” block.

​For block’s background image

​Translate the “Yearly” and “Monthly” options in the pricing block

​Create breadcrumbs so that the users can navigate across the different sections of the application.

​Hide chart data refresh message

​Hide the labels on a sign-in or sign-up form

How to get back to the previous dynamic page (with List detail block) without losing the record id parameter in the URL

How to hide the lines on the list and list detail blocks where the rows are empty on Airtable

How to set Gradient colors for your entire page’s background.

How to get a prefilled URL with record ID and redirect it to the detail page after login.

Hide the button if there is no link coming from Airtable. (href is empty)

Code for dividing the block with custom code block

Code for changing Charts colors

Making a video full width AUTOPLAY block

code that will allow to display always expended items from the “List with Columnar Sliding Cards Expanded” block.

For block’s background image

Translate the “Yearly” and “Monthly” options in the pricing block

Create breadcrumbs so that the users can navigate across the different sections of the application.

Hide chart data refresh message

Hide the labels on a sign-in or sign-up form