Hi all! Great news!
I managed to create an unofficial (Strictly done by myself: not the responsibility of Softr) tabs feature for Softr. A big thanks to Artur who helped me (at late nightđ) with completing and improving my javascript snippet!
For those who donât know what are tabs, and everybody else, Letâs not spoil it more than it needs. The demo is here: https://test-play.softr.app/hide-show-tabs?recordId=recZV04ZNE3pvMnKM
Everything is made with a CTA block with 3 buttons (you can have as many as you want), a JS snippet and the blocks I wanted to display. Nothing more.
Explanation
1) The Tabs
Made of one CTA block + one custom javascript inside a custom code block. Nothing more.
You can add or retrieve as many buttons as you want in your CTA block, you will just need to adapt the code accordingly.
To display blocks inside tabs, just add them vertically in the Softr studio. Donât worry, they wonât appear one below another in live environment. As an example, here is my setup in the Softr studio (see screenshot at the end of the post).
For a better UX, donât forget to add an action to all of your buttons. This action should be a âscroll to sectionâ. It should scroll to the same CTA block where the buttons are.
The JS snippet is the following one, to be inserted in a custom code block (reduce the padding top and the padding bottom of this block to the almost minimum to make it disappear, visually, from your page)
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("table1").style.display = "block";
document.getElementById("form1").style.display = "none";
document.getElementById("chart1").style.display = "none"
});
// This is being called when CTA block is rendered
window.addEventListener('block-loaded-cta3', () => {
console.log('CTA Block loaded');
// function for button click handler
const buttonClickHandler = (e) => {
if (e.target.closest('#cta3 a[data-element="button"]:nth-child(1)')) {
console.log('Click Button 1');
document.getElementById("table1").style.display = "block";
document.getElementById("form1").style.display = "none";
document.getElementById("chart1").style.display = "none";
}
if (e.target.closest('#cta3 a[data-element="button"]:nth-child(2)')) {
console.log('Click Button 2');
document.getElementById("form1").style.display = "block";
document.getElementById("table1").style.display = "none";
document.getElementById("chart1").style.display = "none";
}
if (e.target.closest('#cta3 a[data-element="button"]:nth-child(3)')) {
console.log('Click Button 3');
document.getElementById("chart1").style.display = "block";
document.getElementById("form1").style.display = "none";
document.getElementById("table1").style.display = "none";
}
};
//
document.body.addEventListener('click', buttonClickHandler);
});
</script>
Here, The first tab is not hidden on load, as it is quite classic from a UX point that the first tab should be visible. Of course if you want everything to be hidden, itâs possible by writing document.getElementById(âtable1â).style.display = ânoneâ instead of âblockâ.
The result will be this: https://test-play.softr.app/tab-features-only
Note that you can also use a JS snippet using Jquery. There will be a slight difference: you will be able to hide and show every block by clicking and re-clicking on the corresponding button + a nice slide effect.
The result will be this: https://test-play.softr.app/jquery-tabs-feature
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("table2").style.display = "none";
document.getElementById("form2").style.display = "none";
document.getElementById("chart2").style.display = "none";
});
// This is being called when CTA block is rendered
window.addEventListener('block-loaded-cta1', () => {
console.log('CTA Block loaded');
// function for button click handler
const buttonClickHandler = (e) => {
if (e.target.closest('#cta1 a[data-element="button"]:nth-child(1)')) {
console.log('Click Button 1');
$("#table2").toggle("slow");
if ($("#form2:visible").lenght);
$("#form2").hide();
if ($("#chart2:visible").lenght);
$("#chart2").hide();
}
if (e.target.closest('#cta1 a[data-element="button"]:nth-child(2)')) {
console.log('Click Button 2');
$("#form2").toggle("slow");
if ($("#table2:visible").lenght);
$("#table2").hide();
if ($("#chart2:visible").lenght);
$("#chart2").hide();
}
if (e.target.closest('#cta1 a[data-element="button"]:nth-child(3)')) {
console.log('Click Button 3');
$("#chart2").toggle("slow");
if ($("#form2:visible").lenght);
$("#form2").hide();
if ($("#table2:visible").lenght);
$("#table2").hide();
}
};
//
document.body.addEventListener('click', buttonClickHandler);
});
</script>
2) âOne pageâ apps enabled
The page with some fake projects (https://test-play.softr.app/hide-show-tabs?recordId=recZV04ZNE3pvMnKM) should take your attention as the list block and the list details block are inverted.
And everytime you reload the page, the same recordId in the Url parameter appears. This solution was found by David Coletta.
Here is the setup: add a list block of your choice. Below, add a list details block of your choice. In the custom code header of the page add this code:
<script>
if (!window.location.href.includes("/r/rec")) {
const urlParams = new URLSearchParams(window.location.search);
const recordId = urlParams.get('recordId');
if (!recordId) {
urlParams.set('recordId', "recZV04ZNE3pvMnKM")
window.history.replaceState({}, '', `${location.pathname}?${urlParams}`);
}
}
</script>
You will need to change ârecZV04ZNE3pvMnKMâ by the recordId you want to be shown each time a page is reloaded. That way, even if the user would land on the page without any recordId⌠The page would have one!
To find the ID of a record: go to your corresponding table in Airtable and add a formula field. Enter RECORDID() and thatâs it, all the records will have their ID visible.
Another thing: you can see that the blocks displayed in the Tabs have different data according to the project you select. Pretty easy to do: you just have to use the right conditional filters, linked to the list details block! Do just like the tabs feature didnât exist, the Softr pattern still works!
At the end, you will have a full project management with one page in Softr (add the page for data details in a modal, still a one page app from a final user perspective)
3) Leverage button clicks on your Softr app
Beyond giving you the ability to create a tabs feature, now you know how you can handle buttons of a CTA in Softr. So, be imaginative, Iâm sure some other use cases can be found!
4) Be imaginative X Javascript = huge possibilities
Talking about being imaginative, all this shows you that even if Softr can be limited some times, some ânot so bigâ workarounds can be found to improve it greatly.
Softr will have more and more long awaited features in the next weeks. Though, I strongly believe that our use of Softr will become more and more advanced. Javascript will always be needed
Oh! and of course if you want to use custom buttons inserted in an other custom code block, do it! The design can be improved, sure, but I wanted an easy solution made with native Softr components.
You can find custom buttons on shoelace.style or codepen.io or any other components library.
5) The story behind (if you care)
The workflow and the first draft of the JS snippet was made by myself since two weeks. The only thing that I couldnât find is how to handle a Softr CTA button. Just this, just pointing a button, it drove me crazy.
David Coletta tried to help me with a solution I couldnât understand (I am not a developer and I am learning javascript at a snailâs pace, so, cheers to David too and sorry for the disappointment that I am 
. Though if you want to insert it in Scissors, feel free!).
I tried a dozen of dev forums, couldnât find a solution. Even if Iâm super stubborn I had to cut it.
So I reached out to Artur during the day. He came back at almost midnight with a solution. âDedicationâ (Does he sleep? Not sure 
). Cheers to @artur !
If something unclear, just ask.
is 
He was so excited 
