ALERT: Some images may not load properly within the Knowledge Base Article. If you see a broken image, please right-click and select 'Open image in a new tab'. We apologize for this inconvenience.

Custom Catalog 14.x Forms do not expand display after migrating to 17.3

book

Article ID: 199858

calendar_today

Updated On:

Products

CA Service Catalog

Issue/Introduction

Custom Service Catalog forms from 14.x do not work after upgrade to 17.3.  Forms did work in 14.x. These forms DO work from 17.3 Service Point. Only fieldset functions are are affected. The 17.3 forms are not responding to the expand, show, and hide function.  Noting that there may be a new presentation layer preventing the custom functions from working.

Environment

Release : 17.3

Component : CA SERVICE CATALOG

Resolution

Catalog functionality has changed between 14.1 and 17.x.  Basically, the DOM components are completely different and appear to be the cause of why the custom forms operate differently between the two releases of Catalog.

As part of 17.3 Forms Implementation, we will remove all the hidden fields from the DOM, so we will not be able to access these fields using CSS Selectors. Instead we should use _id attribute and Form APIs to perform operations. 

For Example: The function in the Custom script of Customer Form (note the section highlighted and in italics): 

resetAffected: function() {

            console.log("resetAffected");
            var accreq_self = ca_fdGetSelectedRadio(ca_fd.formId,'request_for_self');

            if (accreq_self == "accreq_self_yes") {
                ca_fdHideFields(ca_fd.formId,['affected_end_user_name_no_sap','affected_end_user_name','cost_cntr','cost_cntr_approver_no_sap']);
                ca_fdUnselectAllOptions(ca_fd.formId, 'affected_end_user_name_no_sap');
                ca_fdUnselectAllOptions(ca_fd.formId, 'cost_cntr')
                ca_fdUnselectAllOptions(ca_fd.formId, 'cost_cntr_approver_no_sap')
                ca_fdResetFields(ca_fd.formId, ['affected_cost_cntr']);
                ca_fdResetFields(ca_fd.formId, ['affected_cost_cntr_approver']);
                // ca_fdShowFields(ca_fd.formId,['cost_cntr_approver_no_sap']);
            }

            if (accreq_self == "accreq_self_no") {
                ca_fdHideFields(ca_fd.formId,['cost_cntr','affected_end_user_name']);
                ca_fdUnselectAllOptions(ca_fd.formId, 'affected_end_user_name_no_sap');
                ca_fdUnselectAllOptions(ca_fd.formId, 'cost_cntr')
                ca_fdUnselectAllOptions(ca_fd.formId, 'cost_cntr_approver_no_sap')
                ca_fdResetFields(ca_fd.formId, ['affected_cost_cntr']);
                ca_fdResetFields(ca_fd.formId, ['affected_cost_cntr_approver']);
                ca_fdShowFields(ca_fd.formId,['affected_end_user_name_no_sap']);
            }

            //var f_displays = document.querySelectorAll('.aeu');
            
           
 var f_display_ids = ['accreq_nouser','affected_end_user','affected_email','affected_phone','affected_location','affected_floor','affected_dept','affected_office_room','affected_cost_cntr','affected_cost_cntr_approver'];

            // Find '_id' and use to unhide field
            console.log("AEU class count- " + f_display_ids.length);
            for (cnt = 0; f_display_ids.length > cnt; cnt++) {
                f_id = f_display_ids[cnt];
                ca_fdSetTextFieldValue(ca_fd.formId, f_id, '');
                ca_fdShowField(ca_fd.formId, f_id);
            }
        }

 

In the above custom script present in Client Form, instead of this line (commented in the above block)

    var f_displays = document.querySelectorAll('.aeu');


It is better to add all the _ids field, instead of selecting from DOM,  as shown to show/hide the fields, specifying which fields need to be exposed.

   var f_display_ids = ['accreq_nouser','affected_end_user','affected_email','affected_phone','affected_location','affected_floor','affected_dept','affected_office_room','affected_cost_cntr','affected_cost_cntr_approver'];