Hide\show accordion based on field in display form

Rinu · January 19, 2020, 7:56am

Hi
in our display form we added an accordion, we are trying to expand or collapse the accordion based on value in a choice. Normal it works in new form if we select yes/no from the field. But what we are trying to show it on the display form based on the selection (yes/no) that are already made. Please see the attempt made so far.

As mentioned in the below form "Professional Indemnity", "Third party Liability", "Workers Compensation" are choices based on "yes" or "No" the form should show the accordion

if (fd.field('PI').value) {
fd.container('Accordion1').$children[0].open = true;
fd.container('Accordion1').$children[0].disabled = false;
$(fd.container('Accordion1').$children[0].$el).show();
} else {

        fd.field('PIWaiver').value = false;
        fd.field('PIIndemnity').value = false;
        fd.field('PINotice').value = false;
		fd.field('PICross').value = false;
		fd.field('PIComments').value = "";
		fd.field('PILimit').value = "";
							
                            
        fd.container('Accordion1').$children[0].open = true;
        fd.container('Accordion1').$children[0].disabled = false;
        $(fd.container('Accordion1').$children[0].$el).hide();
    }


    if (fd.field('PL').value) {
        fd.container('Accordion1').$children[1].open = true;
        fd.container('Accordion1').$children[1].disabled = false;
        $(fd.container('Accordion1').$children[1].$el).show();
    } else {
            
			
		fd.field('TPWaiver').value = false;
		fd.field('TPIndemnity').value = false;
		fd.field('TPNotice').value = false;
		fd.field('TPCross').value = false;
		fd.field('TPComments').value = "";
		
                            
        fd.container('Accordion1').$children[1].open = false;
        fd.container('Accordion1').$children[1].disabled = true;
        $(fd.container('Accordion1').$children[1].$el).hide();
    }
	

    if (fd.field('WC').value) {
        fd.container('Accordion1').$children[2].open = true;
        fd.container('Accordion1').$children[2].disabled = false;
        $(fd.container('Accordion1').$children[2].$el).show();
    } else {
                            
        fd.field('WCWaiver').value = false;
        fd.field('WCIndemnity').value = false;
        fd.field('WCNotice').value = false;
		fd.field('WCCross').value = false;
		fd.field('WCComments').value = "";
                            
        fd.container('Accordion1').$children[2].open = false;
        fd.container('Accordion1').$children[2].disabled = true;
        $(fd.container('Accordion1').$children[2].$el).hide();
    }



}

fd.field('PI').$on('change', enableOrDisable);
	fd.field('PL').$on('change', enableOrDisable);
fd.field('WC').$on('change', enableOrDisable);
enableOrDisable();

});

mnikitina · January 20, 2020, 1:37pm

Hello @Rinu,

The code to get the field values in a Display Form and New/Edit Forms are different.

To get the value of the field in a display form you need to use this code:

fd.field('Title').$el.innerText;

Rinu · January 21, 2020, 4:26am

Hi Mnikitha,

i tried it but still its the same.

Please see the full code used in display form

fd.spRendered(function() {

    function enableOrDisable() {


        if (fd.field('PI').$el.innerText=='Yes') {
            fd.container('Accordion1').$children[0].open = true;
            fd.container('Accordion1').$children[0].disabled = false;
            $(fd.container('Accordion1').$children[0].$el).show();
        } else {
                                
								
													                           
            fd.field('PIWaiver').value = false;
            fd.field('PIIndemnity').value = false;
            fd.field('PINotice').value = false;
			fd.field('PICross').value = false;
			fd.field('PIComments').value = "";
			fd.field('PILimit').value = "";
								
                                
            fd.container('Accordion1').$children[0].open = true;
            fd.container('Accordion1').$children[0].disabled = false;
            $(fd.container('Accordion1').$children[0].$el).hide();
        }
	

        if (fd.field('PL').$el.innerText=='Yes') {
            fd.container('Accordion1').$children[1].open = true;
            fd.container('Accordion1').$children[1].disabled = false;
            $(fd.container('Accordion1').$children[1].$el).show();
        } else {
                
				
			fd.field('TPWaiver').value = false;
			fd.field('TPIndemnity').value = false;
			fd.field('TPNotice').value = false;
			fd.field('TPCross').value = false;
			fd.field('TPComments').value = "";
			
                                
            fd.container('Accordion1').$children[1].open = false;
            fd.container('Accordion1').$children[1].disabled = true;
            $(fd.container('Accordion1').$children[1].$el).hide();
        }
		

        if (fd.field('WC').$el.innerText=='Yes') {
            fd.container('Accordion1').$children[2].open = true;
            fd.container('Accordion1').$children[2].disabled = false;
            $(fd.container('Accordion1').$children[2].$el).show();
        } else {
                                
            fd.field('WCWaiver').value = false;
            fd.field('WCIndemnity').value = false;
            fd.field('WCNotice').value = false;
			fd.field('WCCross').value = false;
			fd.field('WCComments').value = "";
                                
            fd.container('Accordion1').$children[2].open = false;
            fd.container('Accordion1').$children[2].disabled = true;
            $(fd.container('Accordion1').$children[2].$el).hide();
        }



    }

    fd.field('PI').$on('change', enableOrDisable);
		fd.field('PL').$on('change', enableOrDisable);
	fd.field('WC').$on('change', enableOrDisable);
    enableOrDisable();

});

});

mnikitina · January 21, 2020, 5:36pm

@Rinu,

Do you get any errors in the console? Could you please share the screenshot.

Rinu · January 22, 2020, 4:03am

here you go

mnikitina · January 22, 2020, 11:58am

@Rinu,

There were extra brackets in the code. Please use the following code.

fd.spRendered(function() {
	
        function enableOrDisable() {


            if (fd.field('PI').$el.innerText=='Yes') {
                fd.container('Accordion1').$children[0].open = true;
                fd.container('Accordion1').$children[0].disabled = false;
                $(fd.container('Accordion1').$children[0].$el).show();
            } else {
                                    
									
														                           
                fd.field('PIWaiver').value = false;
                fd.field('PIIndemnity').value = false;
                fd.field('PINotice').value = false;
				fd.field('PICross').value = false;
				fd.field('PIComments').value = "";
				fd.field('PILimit').value = "";
									
                                    
                fd.container('Accordion1').$children[0].open = true;
                fd.container('Accordion1').$children[0].disabled = false;
                $(fd.container('Accordion1').$children[0].$el).hide();
            }
		

            if (fd.field('PL').$el.innerText=='Yes') {
                fd.container('Accordion1').$children[1].open = true;
                fd.container('Accordion1').$children[1].disabled = false;
                $(fd.container('Accordion1').$children[1].$el).show();
            } else {
                    
					
				fd.field('TPWaiver').value = false;
				fd.field('TPIndemnity').value = false;
				fd.field('TPNotice').value = false;
				fd.field('TPCross').value = false;
				fd.field('TPComments').value = "";
				
                                    
                fd.container('Accordion1').$children[1].open = false;
                fd.container('Accordion1').$children[1].disabled = true;
                $(fd.container('Accordion1').$children[1].$el).hide();
            }
			

            if (fd.field('WC').$el.innerText=='Yes') {
                fd.container('Accordion1').$children[2].open = true;
                fd.container('Accordion1').$children[2].disabled = false;
                $(fd.container('Accordion1').$children[2].$el).show();
            } else {
                                    
                fd.field('WCWaiver').value = false;
                fd.field('WCIndemnity').value = false;
                fd.field('WCNotice').value = false;
				fd.field('WCCross').value = false;
				fd.field('WCComments').value = "";
                                    
                fd.container('Accordion1').$children[2].open = false;
                fd.container('Accordion1').$children[2].disabled = true;
                $(fd.container('Accordion1').$children[2].$el).hide();
            }



        }

        fd.field('PI').$on('change', enableOrDisable);
			fd.field('PL').$on('change', enableOrDisable);
		fd.field('WC').$on('change', enableOrDisable);
        enableOrDisable();
  });

Rinu · January 23, 2020, 4:40am

Yes that was it, thanks