Make a quick vote 🗳 ️How do you refer to SuiteCRM extensions: add-ons or plug-ins? Click here to have your say 👈

Showing form based on drop down selection

Hello,

I was wondering if it as possible to show a form based on a drop down selection?

On a contact record, I have lots of custom fields that relate to that contact. We sell mobile phone contracts, but the system is also used by other parts of the business.

I was wondering if I could put a drop down menu on the contacts page, that asks the agent if this particular contact is a mobile customer. If they select he’s, then the custom fields are displayed.

Many thanks in advance for your help.

Is the fields within a tab or just a selected few fields?

To achieve this you will need to include Javascript into the page to show or hide fields when there is a change on the dropdown.
What I did below is created a new field that is the dropdown called ‘type_of_customer_c’ and placed this on my EditView display via Studio.

I then created a new panel called ‘Mobile Form’ with all the fields that would be in this section of the record.

Once those fields are added, displayed, and deployed via Studio we then need to add the javascript and functionality to this particular module.

You will need to edit one file (custom/modules/<MODULE_NAME>/metadata/editviewdefs.php) and create a new js file (e.g. contact_edit_java.js) and place it where you wish to place it (I placed mine in custom/include/javascript/contact_edit_java.js)

In the editviewdefs.php find your dropdown that will initate the functionality (mine was type_of_customer_c). Add the additional parameters of ‘displayParams’ (if not already there).

9 =>
        array (
          0 =>
          array (
            'name' => 'type_of_customer_c',
            'studio' => 'visible',
            'label' => 'LBL_TYPE_OF_CUSTOMER',
              'displayParams' =>
                  array(
                      'field' =>
                          array(
                              'onChange' => 'checkMobileForm()',
                          ),
                  ),
          ),
          1 => '',
        ),

Now your index may be differen tthan mine (the number 9) so don’t edit anything else, just insert the following like above:


'displayParams' =>
                  array(
                      'field' =>
                          array(
                              'onChange' => 'checkMobileForm()',
                          ),
                  ),

Still in the editviewdefs you will need to call the newly created js file. Just before ‘useTabs’ (which is close to the top) insert the includes array if not already there.


'includes' =>
            array (
                0 =>
                    array (
                        'file' => 'custom/include/javascript/contact_edit_java.js',
                    ),
            ),

After this we need to create a new js file within custom/include/javascript/ called contact_edit_java.js (or the name you choose).

Within this js file you will create the function to hide and display your mobile related panel.


function checkMobileForm(){
    var value = document.getElementById("type_of_customer_c").value;
    if(value == 'mobile'){
        document.getElementById("detailpanel_2").style.display = 'block';
    }
    else{
        document.getElementById("detailpanel_2").style.display = 'none';
    }
}
checkMobileForm();

NOTE - you will need to find the id of your panel viewing the page’s source code as you may have more panels created than I have. So your id maybe 3, 4 or 5.

ONce that is done, Quick Repair and Rebuild will clear your cache and should bring in the new javascript and initate the function when you select and change the dropdown.

Hope this helps.

1 Like

Hi,

Let’s say I have two sections; Product Issue and Compatibility Issue. I also have a drop down called Support Type that is blank but has the two sections (Product Issue and Compatibility Issue) as a choice.

If I select Product Issue from Support Type, I would like Compatibility Issue section to not only disappear but the fields within it to no longer be mandatory (I’d imagine there would be a bug where it wouldn’t let me save the call as the fields would still be expecting a value despite disappearing from the form).

Sir this is not working for me please help me i also want to do the same scenario.

Hello,

I applied the above. When I click and change “type_of_customer_c” dropdown menu, that’s working. No problem but when I open the form for the first time, it’s not working and gives an error

“var value = document.getElementById(“type_of_customer_c”).value;”

How can i fix it? I want the panel hidden while the form is opening.

I don’t have php and js knowledge so waiting for your help :slight_smile: