Troubleshooting and Customization Guide for Service Portal Catalog ItemsIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 1. How to Hide the Submit Button for a Catalog Item in Service Portal Purpose To force users to use Add to Cart instead of the Submit button for specific catalog items. Procedure Clone the OOB Widget Open the SC Catalog Item widget: https://<instance>.service-now.com/sp_widget.do?sys_id=0fd6a6f247230200ba13a5554ee490b3Select Clone Widget. Modify the Widget Open the cloned widget → Open in Widget Editor.In the HTML template, locate the Submit button element. Original: <button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitted" ng-click="triggerOnSubmit()" class="btn btn-primary">{{submitButtonMsg}}</button> Updated:<button ng-hide="data.sys_id=='<sys_id of the catalog item>'" ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitted" ng-click="triggerOnSubmit()" class="btn btn-primary">{{submitButtonMsg}}</button> Change the placeholder <sys_id of the catalog item> with the sys_id of your catalog item. Associate the Widget with the sc_cat_item Page Navigate to Service Portal > Pages.Filter for ID is sc_cat_item.Open the page record.Select the Instance link next to SC Catalog Item. On the widget instance → Widget tab → change the widget to your cloned version. 2. How to Hide the Attachment Icon for a Specific Catalog Item Issue The attachment (paperclip) icon must be hidden for certain catalog items. Resolution Create a Macro Variable Open the catalog item.Add a new variable:Type: Macro Create a Custom Widget Navigate to Service Portal > Widgets → New. Add the following to the Client Controller:function() { var c = this; angular.element('label.ng-scope').hide();} Note: Adjust the selector as needed to target the attachment label more precisely. Attach the Widget to the Macro Variable Open the macro variable.Set the Widget field to the custom widget created above. 3. NullPointerException When Opening a Catalog Item in Service Portal Symptoms Catalog item or record producer fails to load.Error message: java.lang.NullPointerException Cause A reference variable points to a table that does not exist. In the variable’s Type Specifications tab, the table name appears as plain text instead of a selectable reference. Resolution Identify the variable causing the issue.Confirm whether the referenced table exists.Create the missing table or update the variable to reference a valid table. 4. Form Freezes on Submit with 500 Internal Server Error Symptoms Form freezes during submission. Browser console shows: 500 (Internal Server Error) message: "java.lang.ClassCastException: java.lang.Long cannot be cast to java.lang.String" Cause A catalog client script sets a Number value into a String variable field. Example of incorrect usage: var num = 5 * 9;g_form.setValue('string_type_variable', num); Resolution Convert the number to a string before setting the value: var num = 5 * 9; var str = num.toString(); g_form.setValue('string_type_variable', str); Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } All intended versions Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Please refer the individual issue column for more details Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } }