Hide list block if there is nothing to display!

Ask the community
,
1

Hey Folks! Is it possible hide a list block when there is nothing to display? I have a list block sitting in the details page. Sometimes however, the list block has nothing to show. i.e there are no child campaigns to display under the selected parent campaign.

I have tried various snippets from other similar questions. But to no avail. Hope you can help shed some light?

NOTE: I know that we can link and lookup a field in the users table, then set a visibility condition if empty. But in this case. It does not link to a user. It links to the parent campaign record and im hiding if there are 0 child linked records to display.

1 Like
3

There was a discussion here, it starts the List Block with 0 results until you search something.

Though you mention that there are not campaign to select, is there a URL you can share for me to see the setup?

4

@Suzie
I think what Luay means (and what I am also looking for) is a custom code to hide a list block if there is not content to show (right now the title of the block still shows). For example i have a list that is filtered based on a list-details block in the same page.

Right now it still shows the title of the block even when list is empty:
V

image
image1439×239 4.88 KB

1 Like
5

I see @flavi,

What if you write the title in the form and use the above mentioned code to hide the Form Title?

Just leave the list without title, I assume this should work.

6

This worked for me. I rewrote it as something generic, but please check out the instructions at the bottom to know how to edit it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    function hideIfEmpty(elementId) {
      const styleId = elementId + '-style';
      $("head").append(`<style id="${styleId}">#${elementId} {display: none;}</style>`);

      const targetNode = document.getElementById(elementId);
      const config = { attributes: true, childList: true, subtree: true };

      const callback = function(mutationsList, observer) {
        for(let mutation of mutationsList) {
          if (mutation.type === 'childList' && targetNode.childNodes.length > 0) {
            document.getElementById(styleId).remove();
            observer.disconnect();
          }
        }
      };

      const observer = new MutationObserver(callback);
      observer.observe(targetNode, config);
    }
  
    hideIfEmpty('your-block-id');
  });
</script>

How to edit this code:

  1. Copy the above script.
  2. Replace the string '**your-block-id**' in the **hideIfEmpty('your-block-id');** line with the actual id of the block on your Softr site you want to hide when it’s not populated. This is case-sensitive. For instance, if the id of the block is ‘my-special-block’, you would replace it like so: **hideIfEmpty('my-special-block');**.
  3. If you have multiple blocks you want to apply this function to, you can add more lines with the **hideIfEmpty()** function call, passing in the different ids. For example, if you have two blocks with ids ‘my-special-block’ and ‘my-other-block’, you’d add another line like this:
hideIfEmpty('my-special-block');
hideIfEmpty('my-other-block');
  1. Once you’ve edited the code, you can inject it into the <head> tag of your Softr page.

This code works by initially hiding the identified block, then continuously observing that block for changes. If the block gets populated (meaning child nodes are added), the code will remove the hiding CSS and the block will become visible. If the block remains empty, it will stay hidden.

7

Is there a way to only display a block if the filter set to the block returns results?

I’m trying to hide an Inbox block if there are no elements matching a filter and could really use some help :sweat_smile:

Thanks in advance! :v:

8

If I’m understanding your question correctly, the above code should work as it only displays once details begin to filter in. Similarly, Softr recently updated to include a hide block feature. Would this work for your needs? If not, I can see what I can do :slight_smile: