Script to Populate Dependency Fields with the help of custom Module


Requirement :

The onboarding form should include three interrelated fields: Department, Division, and Job Title.

• These fields must maintain a hierarchical relationship:
  
  

• Selecting a Department should filter and display only the Divisions associated with that Department.
• Selecting a Division should filter and display only the Job Titles linked to that Division.
  
  

• The data for Department, Division, and Job Title should be managed in separate custom modules.
• The onboarding form should dynamically look up values across these modules to ensure correct filtering.
• This setup ensures data consistency, hierarchical integrity, and prevents invalid field combinations.

    


Configuring Hierarchical Fields: Department → Division → Job Title

This setup ensures that the Division and Job Title fields in the onboarding form dynamically filter their values based on the selected Department and Division, maintaining consistency and data integrity.

1️⃣ Create Custom Modules

You’ll need to create three custom modules to manage the hierarchical data structure:

⚙️ Navigation: Go to Admin → Custom Modules → Create New Module
Add the fields listed above and ensure that field names remain consistent.

2️⃣ Create UDF Fields in the Onboarding Form

Add the following User Defined Fields (UDFs) to the Onboarding Form:

3️⃣ Add Script in Form Rules → Execute Script (on Form Load)

Paste the following script in the Form Rules → Execute Script section.
This script dynamically filters the dropdown values based on user selections.

const config = {

   dept: { field: "udf_sline_304", module: "cm_cddj", name: "sline_cdepartment", sub: "multi_cdivision" },

   div: { field: "udf_sline_305", module: "cm_divijb", name: "sline_cdivistion", sub: "multi_cjobtitle" },

   job: { field: "udf_sline_306" }

 };

 jQuery.ajax({

   url: `/api/v3/${config.dept.module}`,

   success: d => {

     const data = d[config.dept.module].map(r => ({ id: r.id, text: r.cm_fields[config.dept.name] }));

     $CS.element(config.dept.field).select2({ data });

   }

 });

 $CS.element(config.dept.field).on("change", function() {

   const id = $CS.element(config.dept.field).val();

   jQuery.ajax({

     url: `/api/v3/${config.dept.module}/${id}`,

     success: d => {

       const divs = d[config.dept.module].cm_fields[config.dept.sub].map(r => ({ id: r.name, text: r.name }));

       $CS.element(config.div.field).select2({ data: divs });

     }

   });

 });

 $CS.element(config.div.field).on("change", function() {

   const divName = $CS.getText(config.div.field);

   jQuery.ajax({

     url: `/api/v3/${config.div.module}`,

     data: { input_data: $CS.toJSONString({ list_info: { search_fields: { [`cm_fields.${config.div.name}`]: divName } } }) },

     success: d => {

       const jobs = d[config.div.module][0].cm_fields[config.div.sub].map(r => ({ id: r.name, text: r.name }));

       $CS.element(config.job.field).select2({ data: jobs });

     }

   });

 });

🧩 Configuration Notes

• Update the config variable in the script as per your module and field configurations.
• Ensure module and field names match exactly with your setup.
• This configuration ensures a hierarchical relationship between Department, Division, and Job Title.
  
  

If you need assistance in configuring this, reach out to the support for guidance.