Hide component based on field value in custom JS

[slimpens]

Hi,

Though I am an experienced Tadabase user, I have forgotten the JS code to hide a specific element based on a condition. I was also looking for the AI helper, but couldn’t find the solution.

So, on a details page, what is the code to do the following?

Whenever fieldvalue_3154 = Yes , hide element_3 and show element_5
Whenever fieldvalue_3154 = No , show element_3 and hide element_5

Could someone please help me?

[Kristen]

I always ask Chatgpt first for things like this.

I’m sure someone here can help but you may have a longer wait (we are in the middle of several holidays).

[SuiteUpstairs]

I think you are looking for this:

//Unhide a component
TB.showComponent(‘component_1’)

//Hide Component
TB.hideComponent(‘component_1’)

The code would look like this:

TB.render('component_5’, function(data) {
	if (fieldValue === “Yes”) {
  		TB.hideComponent('component_3’)
  		TB.showComponent('component_5’)
	}  else {
  		TB.hideComponent('component_5’)
  		TB.showComponent('component_3’)
	}
});

[slimpens]

@SuiteUpstairs

TB.render('component_5’, function(data) {
	if (fieldValue === “Yes”) {
  		TB.hideComponent('component_3’)
  		TB.showComponent('component_5’)
	}  else {
  		TB.hideComponent('component_5’)
  		TB.showComponent('component_3’)
	}
});

@Kristen ; I use ChatGPT, but since this is related to Tadabase, the output is difficult for me to convert to Tadabase code.

@SuiteUpstairs : I copied the code, but I only see errors? Could you please have a look?

You can edit the field value in the table to Yes and No
The field id of this radio button is: field_8231

The datatable is component 11
The component ID with the Yes text is 14
The component ID with the No text is 17

The code snippet on the custom JS part is below:

TB.render('component_11’, function(data) {
	if (fieldValue_8231 === “Yes”) {
  		TB.hideComponent('component_17’)
  		TB.showComponent('component_14’)
	if (fieldValue_8231 === “No”) {
  		TB.hideComponent('component_17’)
  		TB.showComponent('component_14’)
	}
});

What is going wrong?

[slimpens]

This is the solution, thanks to help from support
It’s based on a Select field with yes/ No

TB.render('component_3', function(data) {
    var fieldValue = data.record.field_1111;
    
    if (fieldValue && fieldValue.toString().toLowerCase() == 'no') {
        //TB.hideComponent('component_6');
        TB.showComponent('component_11');
        TB.hideComponent('component_10');
        console.log(fieldValue.toString().toLowerCase(),"no");
        
    }else{
        TB.showComponent('component_10');
        TB.hideComponent('component_11');
        console.log(fieldValue.toString().toLowerCase(),"yes");
    }
    
});