Hide form-block if a list-block is displaying

Ask the community
1

Hi all,

My scenario is as follows :

  • I have a softr form that is being used as an intenal evaluation form on a list-details page
  • On that same page, I also have a list-block that displays the logged-in user’s evaluation for the details page they are on
  • The list-block is set to hide if empty

My ask:
I would like for my form block (#form1) to stay hidden if the list-block has content to display

In other words, the list-block and the form-block should not show simultaneously. If list-block shows, hide form block.

Any help would be appreciated :slight_smile:

2

Hi!

Here would be the code to do so (form1 and list1 to be changed if needed). To be inserted in the header or footer (check what is the fastest to render what you need)

<script>
    window.addEventListener('block-loaded-list1', () => {
        const onRecords = (e) => {
            if (!e.detail || e.detail.length === 0) {
                const form1Element = document.getElementById('form1');
                if (form1Element) {
                    form1Element.style.display = 'none';
                }
            }
        };

        window.addEventListener('get-records-list1', onRecords);
    });
</script>
3

Sorry I made a mistake, you want the opposite.

Here would be the code:

<script>
    window.addEventListener('block-loaded-list1', () => {
        const onRecords = (e) => {
            const list1 = e.detail;

            if (list1 && list1.length > 0) {
                const form1Element = document.getElementById('form1');
                if (form1Element) {
                    form1Element.style.display = 'none';
                }
            }
        };

        window.addEventListener('get-records-list1', onRecords);
    });
</script>
4

Haha I was just about to reply as I was testing, and made the change myself after some trial and error! Working now :slight_smile:

5

Can this be repurposed for a list-details block instead of a list-block?

Example:

  • If #list-details1 is displaying, hide #list-details14?
6

This one should do the trick:

<script>
    window.addEventListener('block-loaded-list-details1', () => {
        const onRecords = (e) => {
            const listDetails1Element = e.detail;

            if (listDetails1Element) {
                const listDetails14Element = document.getElementById('list-details14');
                if (listDetails14Element) {
                    listDetails14Element.style.display = 'none';
                }
            }
        };

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

I am having the issue that #list-details14 hides all the time now, even when #list-details1 is not displaying

9

I won’t be able to help on this one

10

Appreciate all your help so far!