how to Show fields upon choice selection?

[Gudu]

Hello Dear Developers,

I am stuck in showing fields basically there is a gap in between fields and due to which the form not looks good.

Could anyone please guide me here?

The actual form looks like the above one. 

Here are my requirement. 

1. When the form loads, only Please Select choice list value should be visible.

2. When select , Application Onboarding -  Reason for change and reason for offboarding should not be visible.

3. When Application Offboarding selected - Reason for change should not be visible.

4. When Update Request selected, Reason for offboarding should not be visible. 

What i Tried is as below

1. Tried to achieve this by using UI policy but the issue is that , when i select back to back choices then the fields are not populating correctly , sometimes it's showing blank. 

2. So i thought of to achieve this by client script

Sharing the screenshot here for your reference . Although i achieved this but the space issue is coming here.

The code i have written is showing here.

function onChange(control, oldValue, newValue, isLoading) {

   if (isLoading || newValue == '')

    {

  g_form.setVisible('select_the_cmdb_application',false);

  g_form.setVisible('application_status',false);

  g_form.setVisible('app_short_name',false);

  g_form.setVisible('app_long_name',false);

  g_form.setVisible('app_owner',false);

  g_form.setVisible('application_prime',false);

  g_form.setVisible('vp',false);

  g_form.setVisible('de_prov_snow_queue',false);

  g_form.setVisible('sox',false);

   g_form.setVisible('reason_for_offboarding',false);

  g_form.setVisible('reason_for_change',false);

  g_form.setVisible('additional_information',false);

    }

     // return;

//   var app = g_form.getValue('please_select');

//    if(app =='application_onboarding')

    if(newValue == 'application_onboarding')

   {

    //alert("abc");

    g_form.setVisible('select_the_cmdb_application',true);

    g_form.setVisible('application_status',true);

    g_form.setVisible('app_short_name',true);

    g_form.setVisible('app_long_name',true);

    g_form.setVisible('app_owner',true);

    g_form.setVisible('application_prime',true);

    g_form.setVisible('vp',true);

    g_form.setVisible('de_prov_snow_queue',true);

    g_form.setVisible('sox',true);

    g_form.setVisible('additional_information',true);

    //g_form.setDisplay('reason_for_offboarding',true);

    //g_form.setDisplay('reason_for_change',true);

   }

  else if(newValue == 'update_request')

     {

    g_form.setVisible('select_the_cmdb_application',true);

    g_form.setVisible('application_status',true);

    g_form.setVisible('app_short_name',true);

    g_form.setVisible('app_long_name',true);

    g_form.setVisible('app_owner',true);

    g_form.setVisible('application_prime',true);

    g_form.setVisible('vp',true);

    g_form.setVisible('de_prov_snow_queue',true);

    g_form.setVisible('sox',true);

    g_form.setVisible('reason_for_change',true);

    //g_form.setDisplay('reason_for_change',true);

     }

 else if(newValue == 'application_offboarding')

   {

    g_form.setVisible('select_the_cmdb_application',true);

    g_form.setVisible('application_status',true);

    g_form.setVisible('app_short_name',true);

    g_form.setVisible('app_long_name',true);

    g_form.setVisible('app_owner',true);

    g_form.setVisible('application_prime',true);

    g_form.setVisible('vp',true);

    g_form.setVisible('de_prov_snow_queue',true);

    g_form.setVisible('sox',true);

    g_form.setVisible('reason_for_offboarding',true);

   }

   else

   {

    return false;

  }

//    if(oldValue =='update_request' && newValue == 'application_onboarding')

//    {

//  //alert(oldValue);

//  g_form.setVisible('reason_for_change',false);

//    }   

}

The issue is here as below sharing on the screenshot.

1> at the time of page load , the page looks like below

When i select , application onboarding it looks like below 

When i select applicaiton offboarding 

Application offboarding came in the existing space.

When i select update request, the page looks like this.

Here also there is a gap above addition information and i want to fill this gap when i select anyone of the choice whether it is application onboarding, offboarding or update request. 

Also i tried here, g_form.setDispaly() is not working. 

Could anyone please suggest here , whether this function is working on catalog or not . somewhere i read this that this function is depriciated. 

If yes then how can we resolve this space issue , due to which the page looks odd.

[anshul_goyal]

Hello @Gudu,

Use the setDisplay method instead of the setVisible method, as setDisplay eliminates the spacing between fields on the form.

Please mark my response as Accepted and Helpful for future references.

Thanks

[Chaitanya ILCR · Accepted solution]

Hi @Gudu ,

you setDisplay instead of setVisible method

function onChange(control, oldValue, newValue, isLoading) {

    if (isLoading || newValue == '') {
        g_form.setDisplay('select_the_cmdb_application', false);
        g_form.setDisplay('application_status', false);
        g_form.setDisplay('app_short_name', false);
        g_form.setDisplay('app_long_name', false);
        g_form.setDisplay('app_owner', false);
        g_form.setDisplay('application_prime', false);
        g_form.setDisplay('vp', false);
        g_form.setDisplay('de_prov_snow_queue', false);
        g_form.setDisplay('sox', false);
        g_form.setDisplay('reason_for_offboarding', false);
        g_form.setDisplay('reason_for_change', false);
        g_form.setDisplay('additional_information', false);

    }

    // return;

    //   var app = g_form.getValue('please_select');
    //    if(app =='application_onboarding')

    if (newValue == 'application_onboarding')

    {
        //alert("abc");
        g_form.setDisplay('select_the_cmdb_application', true);
        g_form.setDisplay('application_status', true);
        g_form.setDisplay('app_short_name', true);
        g_form.setDisplay('app_long_name', true);
        g_form.setDisplay('app_owner', true);
        g_form.setDisplay('application_prime', true);
        g_form.setDisplay('vp', true);
        g_form.setDisplay('de_prov_snow_queue', true);
        g_form.setDisplay('sox', true);
        g_form.setDisplay('additional_information', true);
        //g_form.setDisplay('reason_for_offboarding',true);
        //g_form.setDisplay('reason_for_change',true);
    } else if (newValue == 'update_request') {

        g_form.setDisplay('select_the_cmdb_application', true);
        g_form.setDisplay('application_status', true);
        g_form.setDisplay('app_short_name', true);
        g_form.setDisplay('app_long_name', true);
        g_form.setDisplay('app_owner', true);
        g_form.setDisplay('application_prime', true);
        g_form.setDisplay('vp', true);
        g_form.setDisplay('de_prov_snow_queue', true);
        g_form.setDisplay('sox', true);
        g_form.setDisplay('reason_for_change', true);
        //g_form.setDisplay('reason_for_change',true);

    } else if (newValue == 'application_offboarding') {
        g_form.setDisplay('select_the_cmdb_application', true);
        g_form.setDisplay('application_status', true);
        g_form.setDisplay('app_short_name', true);
        g_form.setDisplay('app_long_name', true);
        g_form.setDisplay('app_owner', true);
        g_form.setDisplay('application_prime', true);
        g_form.setDisplay('vp', true);
        g_form.setDisplay('de_prov_snow_queue', true);
        g_form.setDisplay('sox', true);
        g_form.setDisplay('reason_for_offboarding', true);

    } else {
        return false;
    }

    //    if(oldValue =='update_request' && newValue == 'application_onboarding')
    //    {
    //  //alert(oldValue);
    //  g_form.setDisplay('reason_for_change',false);
    //    }   
}

Please mark my answer as helpful/correct if it resolves your query.

Regards,
Chaitanya