diff --git a/Client-Side Components/Client Scripts/Mandatory Field Highlighter/README.md b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/README.md new file mode 100644 index 0000000000..b8218122aa --- /dev/null +++ b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/README.md @@ -0,0 +1,44 @@ +# Mandatory Field Highlighter + +## Use Case / Requirement +Highlight mandatory fields that are empty by showing error messages, making it easier for users to identify which required fields need to be completed. + +## Solution +Two client scripts that work together: +1. **onLoad script**: Shows error messages for empty mandatory fields when form loads +2. **onChange script**: Updates error messages in real-time as users fill fields +3. Uses proper ServiceNow methods instead of DOM manipulation + +## Implementation +1. **Create onLoad script**: + - New Client Script, Type: onLoad + - Copy code from `script.js` + - Apply to desired table + +2. **Create onChange script(s)**: + - New Client Script, Type: onChange + - Copy code from `onChange.js` + - **Important**: Replace `'FIELD_NAME'` with actual field name (e.g., 'priority') + - Create separate onChange scripts for each mandatory field you want to validate + - Set the "Field name" in the client script form to the specific field + +## Files +- `script.js`: onLoad client script for initial highlighting +- `onChange.js`: onChange template script for real-time updates + +## Example Usage +For priority field onChange script: +```javascript +var fieldName = 'priority'; // Replace FIELD_NAME with 'priority' +``` + +For category field onChange script: +```javascript +var fieldName = 'category'; // Replace FIELD_NAME with 'category' +``` + +## Notes +- Uses `g_form.showFieldMsg()` and `g_form.hideFieldMsg()` methods +- Follows ServiceNow best practices (no DOM manipulation) +- Works with standard ServiceNow forms +- Create one onChange script per mandatory field for best results \ No newline at end of file diff --git a/Client-Side Components/Client Scripts/Mandatory Field Highlighter/onChange.js b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/onChange.js new file mode 100644 index 0000000000..85a0b31cc6 --- /dev/null +++ b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/onChange.js @@ -0,0 +1,20 @@ +function onChange(control, oldValue, newValue, isLoading) { + if (isLoading) { + return; + } + + // This onChange script should be applied to specific mandatory fields + // Replace 'FIELD_NAME' with the actual field name you want to validate + // Example: For priority field, replace with 'priority' + var fieldName = 'FIELD_NAME'; // TODO: Replace with actual field name + + if (g_form.isMandatory(fieldName)) { + if (!newValue || newValue === '') { + // Show error message for empty mandatory field + g_form.showFieldMsg(fieldName, 'This field is required', 'error'); + } else { + // Hide error message when field is filled + g_form.hideFieldMsg(fieldName); + } + } +} \ No newline at end of file diff --git a/Client-Side Components/Client Scripts/Mandatory Field Highlighter/script.js b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/script.js new file mode 100644 index 0000000000..98889fa14a --- /dev/null +++ b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/script.js @@ -0,0 +1,28 @@ +function onLoad() { + // Highlight mandatory fields that are empty using proper ServiceNow methods + highlightMandatoryFields(); + + function highlightMandatoryFields() { + var allFields = g_form.getFieldNames(); + + for (var i = 0; i < allFields.length; i++) { + var fieldName = allFields[i]; + + // Check if field is mandatory and visible + if (g_form.isMandatory(fieldName) && g_form.isVisible(fieldName)) { + var fieldValue = g_form.getValue(fieldName); + + if (!fieldValue || fieldValue === '') { + // Show warning message for empty mandatory fields + g_form.showFieldMsg(fieldName, 'This field is required', 'error'); + } else { + // Clear any existing field messages + g_form.hideFieldMsg(fieldName); + } + } + } + } + + // Store function globally so onChange scripts can call it + window.updateMandatoryHighlighting = highlightMandatoryFields; +} \ No newline at end of file