JS to Show/Hide Components Depending on Multiple Data Fields

App Development
1

Howdy Tada Team-

Could use some of the @Chem magic fingers with Javascript (@tim.young advised to post in the community vs. a support ticket)

Background
I would like certain form components to be shown (all others are hidden) depending on field block 64 (Facility Type) and field block 62 (Special Conditions).

For example, current example shown on the page has “Healthcare” and Surgery, Anesthetizing Location options showing. I would like to show component 35 and hide 32, 28, and 38.

I have used the following javascript but it does not address what other fields are showing on the page but rather if there are no record entries made. Maybe this will be a good starting point.


TB.render('component_21', function(data) {    
    if (data.records === undefined || data.records.length > 0) {
        TB.hideComponent('component_15');// any code here will run when evaluation has been completed
        TB.hideComponent('component_18');// aany code here will run when evaluation has been completed
    } else {
        TB.hideComponent('component_21');// any code here will run when evaluation has NOT been completed
    }
});
TB.render('component_18',function(data){ // Wait for form to laod
    data.ele.find('.af-form-submit').click(function(){ // Find the submit button and add a click event
        setTimeout(function(){
            location.reload(); // Reload the page
        },1000) // Reload the page
    }); // End Click event
}); // End TB.render function

Any help would be greatly appreciated.

Adam

1 Like
3

Hey @SafetyUniversity :wave: it’s good to hear from you! :smiley:

Let’s try this, first, add the class of “hide” as an “Additional CSS class” in all of the form component settings.

Add CSS Class
Add CSS Class1192×632 50.2 KB

Then, add the following JavaScript.

var DETAIL_COMPONENT_ID = "component_ID";
var FACILITY_TYPE = "field_64";
var SPECIAL_CONDITION = "field_62";
var COMPONENT_TO_SHOW = "component_35";

TB.render(DETAIL_COMPONENT_ID, function(data) {
    if(data.record[FACILITY_TYPE] === "Healthcare"){
        if(data.record[SPECIAL_CONDITION] === "Surgery" && data.record[SPECIAL_CONDITION] === "Anesthetizing Location"){
            TB.showComponent(COMPONENT_TO_SHOW);
        }
    }
});
4

Thanks much @Chem. I changed the entire process around to make a different approach work. I appreciate the follow up, however. I thought I flagged this posting to be removed…if I missed that I apologize for your wasted time.

Adam