Recruitment Marketing: Data Capture Form - How to create cascading picklists

[former_member193187]

Data capture form is an excellent tool which enables recruiting users to request additional information from leads, candidates, and employees, and use them for lead generation.

Currently data capture forms do not support cascading picklists, as stated in the SAP Note https://userapps.support.sap.com/sap/support/knowledge/en/3157993, however, this can be achieved by inserting JavaScript code in the Global Settings of the Career Site Builder

Before we proceed any further, I would like to let you know that basic HTML and JavaScript knowledge is required to perform the subsequent steps

STEP 0: Create Data Capture Form and Landing Page

I write this blog assuming you have created the data capture form and the associated landing page, hence naming this step as step 0.

If you need assistance in creating data capture form, I would recommend this step by step guide on how to create data capture form

STEP 1: Find the HTML Element ID for Parent and Child Picklist

You can find the element ID of the parent and child picklist by inspect option available in Google Chrome. In my example, the parent picklist is "Focus Group" and child picklist is "Focus Subgroup"

Reference Image for Parent and Child Picklist

To find the element id, right click on the landing page, in the Google Chrome browser, and then click on Inspect.

Inspect Element

When you hover on the parent picklist field, you will find the select tag highlighted. Note down the id value of the select tag. This value will be used in the JavaScript code later

Fetching the Element ID for Picklist

Use the above steps to find the Element ID for child picklist

STEP 2: JavaScript

The code below can be used to enable cascading picklists.

<script type="text/javascript">



var zArrLen,  zParentSelectedVal, zChildPicklistValue, zArrChildVal, zArrParentVal

var zPicklistMappingArray = new Array ()

// Update the below values with the Picklist ID obtained from previous step 

var zParentPicklistId = "property.cust_FocusArea.value";

var zChildPicklistId = "property.cust_FocusSubarea.value";

// Update the Parent Child Picklist codes here, use the format ["parent picklist code", "Child Picklist code"]

zPicklistMappingArray = [

                            ["FI","Compliance"],

                            ["HR","PY"]

                        ]

var zChildPicklistValues = document.getElementById(zChildPicklistId);

var  zchildPicklistIdLen   = zChildPicklistValues.length;

var zArrLen = zPicklistMappingArray.length;



function hideChildPicklists() {

   for(i = 0; i <zchildPicklistIdLen ; i++) {

      zChildPicklistValue = zChildPicklistValues[i];

      zChildPicklistValue.hidden = true;

      zChildPicklistValue.selected = false

      if (zChildPicklistValue.value == ""){

           zChildPicklistValue.selected = true

      }

   }

}

// Hide all childpicklist values on page load

hideChildPicklists();



document.getElementById(zParentPicklistId).onchange = function() { 

    hideChildPicklists();

    zParentSelectedVal= document.getElementById(zParentPicklistId).value;

     for(zArrCount = 0; zArrCount < zArrLen; zArrCount++){

            zArrParentVal =  zPicklistMappingArray[zArrCount][0]

            zArrChildVal = zPicklistMappingArray[zArrCount][1]

            if(zArrParentVal == zParentSelectedVal) {

                   for(i = 0; i <zchildPicklistIdLen ; i++) {

                           zChildPicklistValue = zChildPicklistValues[i];

                           if (zChildPicklistValue.value == zArrChildVal) {

                                    zChildPicklistValue.hidden = false;

                           }

                    }

              }

        }

} ;



</script>

Update the values of zParentPicklistId, zChildPicklistId with the ID obtained from the previous step

For the zPicklistMappingArray, update the values of parent and child picklist external code maintained in Picklist Center. The format to be used is:

[

   ["<parent picklist code 1>"],["<child picklist code 1>"],

   ["<parent picklist code 1>"],["<child picklist code 2>"],

   ["<parent picklist code 2>"],["<child picklist code 1>"],

   ["<parent picklist code 3>"],["<child picklist code 1>"],

   .

   .

   .

   ["<parent picklist code n>"],["<child picklist code n>"]

]

The values maintained in Picklist Center for my example are shown below:

Parent Picklist Value in Picklist Center

Child Picklist Value in Picklist Center

STEP 3: Update JavaScript in Career Site Builder

Once the code is updated add the code in the Career Site Builder under Appearance - Global - JavaScript - Footer JavaScript

 

Save the changes and the cascading picklist should work now on the Landing Page

Before: The child drop down shows all values irrespective of Parent value selected

After:  The child drop down shows only the values associated with the parent picklist

 

Things to Consider Before Implementing

• This technique involves use of the "ID" field in HTML page, if the ID changes due to SAP code updates then the JavaScript above would fail


• Any updates to values of the Picklist in SuccessFactors would have to be copied in the custom code written above


• Read the SAP note on inserting Custom code, before implementing this change

By following the steps above, you should be able to enable cascading picklists. The JavaScript code written can be used as is, however, feel free to optimize the code and share it in the comments for reference.

This is my first blog, please let me know if you would like me to provide more customizations in RMK.