New List Details Block (Item Details) - Hiding a Section?

Ask the community
1

On the “New” List Details Blocks, you can add Sections to divide your content. Is there a way to hide one of those sections based on a variable?

2

Hi,

Which variable exactly?

3

{Refund Status}. If it’s empty, hide the section.

4

Does this variable lie in the users table? (accessible with logged in user data) or is it coming from another table?
Is the data source Airtable?
Last one: is this variable a displayed field in Softr, in one of the sections of the item details block?

5

Yes, the data source is Airtable. {Refund Status} is a single select field.

It is in a table called Orders.

The list details block in question is on the Orders details page. The variable is visible on the section of this block that I’m trying to hide.

So no, it’s not available through Users.

6

Okay, and last question: the section to hide is the first one? the second one? (excluding the top section)

In the styles of the item details, the “container” option is enabled?

7

Not including the top section, it’s Section 4. Yes, the container option is enabled.

8

Okay so can you try to add this script in the header custom code of the page where the item-details block is:

Just change list-details1 by your list-details Id (it appears twice in the script)

<script>
const onRecord = (e) => {
    const recordData = e.detail;
    console.log(recordData);

    if (recordData.fields && recordData.fields["Refund Status"] === "") {
        const containers = document.querySelectorAll("#list-details1 .softr-fields-container");

        if (containers.length > 1) {
            containers[3].style.setProperty('display', 'none', 'important');
            
            const parentContainer = containers[3].parentElement;
            if (parentContainer) {
                parentContainer.style.setProperty('display', 'none', 'important');
            }
        }
    }
};

window.addEventListener('get-record-list-details1', onRecord);
</script>

And tell me if it worked (Sorry for all the questions, but coding in Softr is a bit harder than before as I need to use stable selectors)

Sorry I made a mistake it’s containers[3] - I updated the script above

1 Like
9

It was working, but then it stopped. However, I think it may be a cache issue with my browser. I’ll have time to look more into it tonight. Either way, thank you!!! You’re a genius!!!

1 Like
10

Thanks!

Just in case, to have an even more robust script:

I added window.addEventListener('block-loaded-list-details1', () => {
list-details1 to be replaced, again, by your list-details Id (so this time it appears 3 times)

It is used to be sure that list-details1 is loaded before doing anything.

I also removed unecessary checks

<script>
window.addEventListener('block-loaded-list-details1', () => {
    const onRecord = (e) => {
        const recordData = e.detail;
        console.log(recordData);

        if (recordData.fields && recordData.fields["Refund Status"] === "") {
            const containers = document.querySelectorAll("#list-details1 .softr-fields-container");

            const targetContainer = containers[3];
            if (targetContainer) {
                targetContainer.style.setProperty('display', 'none', 'important');
                
                const parentContainer = targetContainer.parentElement;
                if (parentContainer) {
                    parentContainer.style.setProperty('display', 'none', 'important');
                }
            }
        }
    };

    window.addEventListener('get-record-list-details1', onRecord);
});
</script>
1 Like
11

Thank you again so so much! For some reason the setProperty didn’t work, but when I changed it to display, it worked perfectly.

Thank you!!

<script>
window.addEventListener('block-loaded-list-details-order', () => {

    const onRecord = (e) => {
        const recordData = e.detail;

        if (recordData.fields && !recordData.fields["Refund Status"]) {
            const containers = document.querySelectorAll("#list-details-order .softr-fields-container");

            const targetContainer = containers[3];
            if (targetContainer) {
                targetContainer.style.display = 'none';
                
                const parentContainer = targetContainer.parentElement;
                if (parentContainer) {
                    parentContainer.style.display = 'none';
                }
            }
        }
    };

    window.addEventListener('get-record-list-details-order', onRecord);
});
</script>