We have built an custom app for a customer which hide/show the ticket fields based on the confirguration set in the Iparam page. The portal has 200+ of custom dropdown fields and custom text fields. In iparams page we will set if dropdown value is selected need to show certain custom fields. Likewise we have parent,child and sub-child dropdown fields for example custom_X,custom_Y,custom_Z and custom_W is a dropdown custom field.
if user selects custom_X value as X1(dropdown value) we need to show custom_Z. if user selects X2 we need to show custom_Y.And for custom_Z field user select Z1 need to show custom_W
custom_X (X1)->custom_Z (Z1)->custom_W. Based on user selection we need to show custom field. if user change X1 to X2 then we need to null the values of custom_Z and custom_W
and to hide it,then need to show custom_Y field.
function selectedcustomFields(iparams, eventData, custom_field) {
let checked = [],
allCustomFields = [];
for (var key in iparams) {
if (eventData[key] && eventData[key].old) {
// To avoid recresive loop checked keys had been pushed
checked.push(key)
for (i = 0; i < iparams[key].length; i++) {
allCustomFields = allCustomFields.concat(iparams[key][i].fields)
}
// To avoid duplication
allCustomFields = UniqueArrayCreator(allCustomFields);
checked = UniqueArrayCreator(checked);
//debugger;
// Using old event value we had taken field Array now the array length will be incressed.
// when selected fields meets object keys so loop extends so it will touch the sub child
for (let i = 0; i < allCustomFields.length; i++) {
if (checked.indexOf(allCustomFields[i]) === -1 && iparams[allCustomFields[i]]) {
checked.push(allCustomFields[i])
for (j = 0; j < iparams[allCustomFields[i]].length; j++) {
allCustomFields = allCustomFields.concat(iparams[allCustomFields[i]][j].fields)
}
allCustomFields = UniqueArrayCreator(allCustomFields);
checked = UniqueArrayCreator(checked);
}
}
console.log(allCustomFields)
allCustomFields.forEach(SelectedFields => {
custom_field.forEach(fields => {
if (fields.name == SelectedFields) {
if (fields.type == "custom_date" || fields.type == "custom_number") {
emptyFields(fields.name)
setTimeout(() => {
hideFields(fields.name)
}, 200)
} else if (fields.type == "custom_text") {
textEmptyFields(fields.name)
setTimeout(() => {
hideFields(fields.name)
}, 200)
} else {
NullFieds(SelectedFields)
setTimeout(() => {
hideFields(SelectedFields)
}, 200)
}
}
})
})
}
}
}
const showFields=(field) =>client.interface.trigger("show", {id: `${field}`})
const hideFields=(field)=>client.interface.trigger("hide", {id: `${field}`})
const NullFieds=(field)=>client.interface.trigger("setValue", {id: `${field}`,value: "--"})
const emptyFields=(field)=> client.interface.trigger("setValue", {id: `${field}`, value: null})
const textEmptyFields=(field)=>client.interface.trigger("setValue", {id: `${field}`,value: " "})
The app is taking more time to loop through all the conditions and so the customer is experiencing delay in hiding or showing the fields and some times the app is not receiving the values from event.helper.getData(); using this event only we can capture user had changed or not. Could you please suggest us a better approach to make the app process the conditions faster.