How do I hide a card component when the result (content) is 0

I have a tasks card component, I would only like to show when there are any active tasks. This is part of a dashboard.

Is that possible? Is there some JavaScript for that?

See for something similar: Hide Component based on "no records" in table

@mdykstra @tim.young @Chem

I use this JS to hide components based on a field value, and it works well. The field containing the value has to be on the page, so I just hide it if necessary.

TB.render('component_XX', function(data) {    
  	fieldValue = data.record.field_123;
  	   if(fieldValue === "0"){
  	       TB.hideComponent('component_XX');
  	   }
  	   
  	   });

Thanks @mdykstra I think I almost understand.
But how can I find out the field number in the card component?
Developer tools of the browser didn’t help me to identify the identifier of the field.

image

Ahh. I see. I don’t know if my JS will work as it required an actual field. I’m sure @Chem could tell you how to do this with his genius level of JS. Sorry!

@Peter
You can find the field slug of a field in the Data Builder. Click on the the Data Table, navigate to the Fields tab, click the settings tab in the top right corner, and check off “Show Field Slug”.

@Sara I understand how to find the fields in a table.

My question is about the field in the CARD-component. Does this content display field relate to the field in the table?

in this case I count the number of records in a table, and the answer to this query is displayed in the card component

A long shot, because I have not enough knowledge about this stuff.
I gave the card component a css class of “field123”.
Then I found something about innerhtml on the internet.

No surprise it didn’t work, but I thought nice try anyway:

TB.render('component_103', function(data) {    
  	fieldValue = document.getElementById("field123").innerHTML;
  	   if(fieldValue === "0"){
  	       TB.hideComponent('component_103');
  	   }
});

@Peter it’s actually a bit simpler than that.

TB.render('component_103', function(data) {
    var total = data.record.val;
    if(total == 0){
        TB.hideComponent(data.objId);
    }
});
2 Likes

Thanks for the solution. I give a bit more context for anyone who reads this. How you can use this feature.

On the application landing page, I have some information components:

  1. You have x tasks active - A click on the component will bring you to the task list
  2. You have x leaves to approve - A click on the card will bring you directly to the approvals list.

Both tasks and approvals are linked to the logged-in user. And within the component, I filter either the tasks or the approvals for the logged-in user. So, these components give very personalized information.

This is information in our organization which is mainly interesting for managerial employees, but most employees won’t have either tasks nor approvals to do. So, they don’t need to see the information.
The screen remains more simple and clean when you can hide unnecessary information.

I have ideas for more, like number of mandatory procedures to read, and so on.
I am very happy with this solution.

1 Like