Hide or show blocks based on a record's attributes

When using list details blocks you may want to have the layout of your page vary based on some attribute from the current record, instead of the user.
For example, you may want to hide the booking form on an event’s page when a parameter called “event_status” is equal to “full” for that specific record. You can add the code below to your page’s (footer) custom code to do just that.

<script>
//Hide booking form if status is full
    
    document.addEventListener("DOMContentLoaded", function() {    
        var waitForData = setInterval(function () {
            if (typeof $ != 'undefined') {
                if (document.querySelectorAll('div[data-mappedto="event_status"][data-value="full" i]').length > 0) {
                    
                    var bookingForm = document.getElementById('form');

                    bookingForm.style.display = 'none';
                    
                    clearInterval(waitForData);
                }
            }
        }, 100);
    });
</script>

Parameters to edit :
event_status → Airtable name of the field where you condition resides.
full → value of the above field that triggers the hiding of the block
form → Softr id of the block you want to hide when the condition is met.

Note : some component bearing the content of your trigger field (here event_status) must be displayed on the page for that piece of code to work. If need be, you can display it in a button and toggle its visibility to hidden or collapse.

6 Likes

Dear Julien, thank you very much for sharing the custom code with the Community!

2 Likes

Excellent ! I was going to release a video on how to do it, without code, but the user experience was ridiculous :sweat_smile: (will change when action buttons will be released)
Thanks a lot, this is an important feature in my opinion

3 Likes

Thank you for this piece of code, is very very helpful in so many use cases.

2 Likes

Amazing! Is it possible to hide an an action button based on a row’s field value as well @Julien_Berawen ? Thanks!

Hi @rebeccajane , glad it can help :slight_smile:

You can apply it to any item that has a CSS id, so there should be no problem with an action button. It would probably look something like this :

                    var myActionButton = document.getElementById('action-button');

                    myActionButton.style.display = 'none';

where action-button is the id of the button you want to hide.

1 Like