Hide Inbox Block If No Items To Display

Feature Requests
1

Can the inbox block be hidden like other list blocks if there are no items (results)?
Thank you!

2

Hi @Ben,

While this is untested, I wrote this custom solution just before the hide block feature came out. I believe it will work for your use case if you are able to adjust it for your block name. Please let me know if you have questions!

<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.

3

Thanks for the code @jelli! Will this affect the performance of the block (load time,…)?

1 Like
4

It shouldn’t impact it in a meaningful way. Essentially, the block is hidden until data is populated. So instead of seeing it try to fetch records and watching it load, you’ll only see it when it has data.

5

Nice! What are the chances of this breaking should Softr update this block,… etc.? I ask because it’s on my homepage.

6

It should be pretty low, but I’d suggest routine testing. Granted, I’d suggest that anyway as a best practice on websites.

7

That’s a lot of blocks to test :wink:

1 Like