Hide Table block if no results

Ask the community
,
1

I’ve added a feature request for this as other blocks have the option to hide if no results, but I’m wondering if there’s a workaround for table blocks in the mean time. Even if I turn off the no results message the table headline still displays and leaves a big gap in the page.

2

Hi Kristin,

This may be of interest: Hiding a Table Block If No Results Found

3

Thanks for the suggestion, Matthieu. I tried this but it doesn’t seem to be working unfortunately. I have 3 table blocks I’m trying to hide if no results. Seems like @nocodeking was having a similar issue.

Hopefully there is an alternative or this feature will be added soon. Seems like it’s been on the radar for a while. For now I’ve removed the Title and Subtitle from those blocks, but that’s less than ideal.

4

Support has proposed this code to hide the 4 tables. The only one that successfully hides is Table2 (the first one listed in the custom code). Any ideas as to what needs to be adjusted to make all 4 work? Thank you for taking a look. Desperate to get this working by Friday for clients to view. Or rethinking how to shift to cards instead of tables so I can hide as desired.

<script>
  const onRecords = (e) => {
    const table1 = document.getElementById('table2');
    if (e.detail && e.detail.length > 0) {
      table1.style.display = 'block';
    } else {
      table1.style.display = 'none';
    }
  };

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

<script>
  const onRecords = (e) => {
    const table1 = document.getElementById('table6');
    if (e.detail && e.detail.length > 0) {
      table6.style.display = 'block';
    } else {
      table6.style.display = 'none';
    }
  };

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

<script>
  const onRecords = (e) => {
    const table1 = document.getElementById('table1');
    if (e.detail && e.detail.length > 0) {
      table1.style.display = 'block';
    } else {
      table1.style.display = 'none';
    }
  };

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

<script>
  const onRecords = (e) => {
    const table1 = document.getElementById('table7');
    if (e.detail && e.detail.length > 0) {
      table7.style.display = 'block';
    } else {
      table7.style.display = 'none';
    }
  };

  window.addEventListener('get-records-table7', onRecords);
</script>
5

Hi Kristin,

Here are the updated scripts:

<script>
  window.addEventListener('block-loaded-table2', () => {
    const onRecords = (e) => {
      const table2 = document.getElementById('table2');
      if (e.detail && e.detail.length > 0) {
        table2.style.display = 'block';
      } else {
        table2.style.display = 'none';
      }
    };

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

<script>
  window.addEventListener('block-loaded-table6', () => {
    const onRecords = (e) => {
      const table6 = document.getElementById('table6');
      if (e.detail && e.detail.length > 0) {
        table6.style.display = 'block';
      } else {
        table6.style.display = 'none';
      }
    };

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

<script>
  window.addEventListener('block-loaded-table1', () => {
    const onRecords = (e) => {
      const table1 = document.getElementById('table1');
      if (e.detail && e.detail.length > 0) {
        table1.style.display = 'block';
      } else {
        table1.style.display = 'none';
      }
    };

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

<script>
  window.addEventListener('block-loaded-table7', () => {
    const onRecords = (e) => {
      const table7 = document.getElementById('table7');
      if (e.detail && e.detail.length > 0) {
        table7.style.display = 'block';
      } else {
        table7.style.display = 'none';
      }
    };

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

window.addEventListener('block-loaded-tableID', () => { was missing to make it work

6

And here is a merged script:

<script>
  const addTableEventListener = (tableId, loadEventName, getEventName) => {
    window.addEventListener(loadEventName, () => {
      const onRecords = (e) => {
        const table = document.getElementById(tableId);
        if (e.detail && e.detail.length > 0) {
          table.style.display = 'block';
        } else {
          table.style.display = 'none';
        }
      };

      window.addEventListener(getEventName, onRecords);
    });
  };

  addTableEventListener('table2', 'block-loaded-table2', 'get-records-table2');
  addTableEventListener('table6', 'block-loaded-table6', 'get-records-table6');
  addTableEventListener('table1', 'block-loaded-table1', 'get-records-table1');
  addTableEventListener('table7', 'block-loaded-table7', 'get-records-table7');
</script>
1 Like
7

Thank you, thank you, thank you!!! Worked perfectly! :clap: :blush: :clinking_glasses:

8

You’re welcome! (x3)