|
| 1 | +/** |
| 2 | + * Dynamic Field Helper (UI Script) |
| 3 | + * Author: Abhishek Aggarwal |
| 4 | + * Description: |
| 5 | + * Adds smart tooltip icons beside form field labels to help users understand field purpose or business rules dynamically. |
| 6 | + * |
| 7 | + * Usage: |
| 8 | + * 1. Create this as a UI Script named "dynamic_field_helper" |
| 9 | + * 2. Include it on forms or global UI Scripts |
| 10 | + * 3. Define field tips via system property, script include, or inline config below |
| 11 | + */ |
| 12 | + |
| 13 | +(function () { |
| 14 | + // Config: fallback if GlideAjax not used |
| 15 | + var fallbackHelp = { |
| 16 | + short_description: |
| 17 | + "Provide a clear, concise summary of the issue or request.", |
| 18 | + assignment_group: "Group responsible for resolving this record.", |
| 19 | + priority: "Determines urgency based on impact and severity.", |
| 20 | + u_project_code: "Auto-filled based on the selected department.", |
| 21 | + u_estimated_cost: "Enter total expected amount in INR.", |
| 22 | + }; |
| 23 | + |
| 24 | + /** |
| 25 | + * Fetch dynamic help content using GlideAjax (optional) |
| 26 | + * Create a Script Include (Client Callable) named 'FieldHelpProvider' if you want to pull help dynamically. |
| 27 | + */ |
| 28 | + function fetchHelpData(callback) { |
| 29 | + try { |
| 30 | + if (typeof GlideAjax === "undefined") { |
| 31 | + callback(fallbackHelp); |
| 32 | + return; |
| 33 | + } |
| 34 | + |
| 35 | + var ga = new GlideAjax("FieldHelpProvider"); |
| 36 | + ga.addParam("sysparm_name", "getHelpText"); |
| 37 | + ga.addParam("sysparm_table", g_form.getTableName()); |
| 38 | + ga.getXMLAnswer(function (response) { |
| 39 | + if (!response) { |
| 40 | + callback(fallbackHelp); |
| 41 | + return; |
| 42 | + } |
| 43 | + try { |
| 44 | + var parsed = JSON.parse(response); |
| 45 | + callback(parsed || fallbackHelp); |
| 46 | + } catch (e) { |
| 47 | + callback(fallbackHelp); |
| 48 | + } |
| 49 | + }); |
| 50 | + } catch (err) { |
| 51 | + console.error("DynamicFieldHelper: Fetch error", err); |
| 52 | + callback(fallbackHelp); |
| 53 | + } |
| 54 | + } |
| 55 | + |
| 56 | + /** |
| 57 | + * Core function to add tooltips |
| 58 | + */ |
| 59 | + function addTooltips(helpData) { |
| 60 | + Object.keys(helpData).forEach(function (field) { |
| 61 | + var labelEl = document.querySelector(`label[for='${field}']`); |
| 62 | + if (labelEl && !labelEl.classList.contains("dfh-active")) { |
| 63 | + labelEl.classList.add("dfh-active"); |
| 64 | + var icon = document.createElement("span"); |
| 65 | + icon.innerHTML = " ⓘ"; |
| 66 | + icon.title = helpData[field]; |
| 67 | + icon.className = "dfh-tooltip-icon"; |
| 68 | + labelEl.appendChild(icon); |
| 69 | + } |
| 70 | + }); |
| 71 | + } |
| 72 | + |
| 73 | + /** |
| 74 | + * Inject CSS for styling (auto once) |
| 75 | + */ |
| 76 | + function injectStyle() { |
| 77 | + if (document.getElementById("dfhStyle")) return; |
| 78 | + var style = document.createElement("style"); |
| 79 | + style.id = "dfhStyle"; |
| 80 | + style.textContent = ` |
| 81 | + .dfh-tooltip-icon { |
| 82 | + cursor: help; |
| 83 | + color: #2563eb; |
| 84 | + font-weight: bold; |
| 85 | + margin-left: 4px; |
| 86 | + transition: all 0.2s ease-in-out; |
| 87 | + } |
| 88 | + .dfh-tooltip-icon:hover { |
| 89 | + color: #1d4ed8; |
| 90 | + transform: scale(1.2); |
| 91 | + } |
| 92 | + `; |
| 93 | + document.head.appendChild(style); |
| 94 | + } |
| 95 | + |
| 96 | + // Initialize |
| 97 | + function init() { |
| 98 | + if (typeof g_form === "undefined") return; // not a form |
| 99 | + injectStyle(); |
| 100 | + fetchHelpData(function (data) { |
| 101 | + addTooltips(data); |
| 102 | + }); |
| 103 | + } |
| 104 | + |
| 105 | + if (document.readyState === "loading") { |
| 106 | + document.addEventListener("DOMContentLoaded", init); |
| 107 | + } else { |
| 108 | + init(); |
| 109 | + } |
| 110 | +})(); |
0 commit comments