Dynamic Field Helper — Auto Tooltip Enhancer for Forms

Client-Side Components/UI Scripts/Dynamic Field Helper/readme.md

@@ -0,0 +1,59 @@
+# 💡 Dynamic Field Helper — Smart Tooltips for Form Fields
+
+### Overview
+
+The **Dynamic Field Helper** is a lightweight ServiceNow **UI Script** that automatically adds contextual tooltips beside form field labels, helping users understand each field’s purpose, business rules, or dependencies — without modifying individual forms.
+
+It’s a plug-and-play enhancement designed for developers and admins who want to improve usability and reduce confusion across complex forms.
+
+---
+
+### ✨ Features
+
+- 🧩 **Automatic Tooltips** — Adds ⓘ icons beside important field labels
+- ⚡ **Dynamic Data Source** — Pulls tooltip data from GlideAjax or static JSON config
+- 🧠 **No Form Edits** — Works across all forms dynamically
+- 🎨 **Lightweight & Clean Design** — Subtle hover animations and color themes
+- 🔒 **Scoped-Safe** — Works seamlessly in scoped or global applications
+
+---
+
+### 🛠️ Installation
+
+1. Navigate to **System UI → UI Scripts → New**
+2. Name it **`dynamic_field_helper`**
+3. Paste the following code:
+   ```js
+   // (See full script in the code file)
+   ```
+4. Mark as ✅ Active and ✅ Global
+
+5. Include it in forms or client scripts (or globally via UI Policy)
+
+### 🔧 Optional: Dynamic GlideAjax Version
+
+For fully dynamic field tips, add a Script Include named FieldHelpProvider (Client Callable):
+
+``
+
+var FieldHelpProvider = Class.create();
+FieldHelpProvider.prototype = {
+getHelpText: function() {
+var result = {
+short_description: "Provide a short summary of the issue.",
+category: "Select the most relevant category for routing."
+};
+return JSON.stringify(result);
+},
+type: 'FieldHelpProvider'
+};
+
+``
+
+### 💡 Use Cases
+
+Service Catalog forms that confuse end-users
+
+Complex HR or Finance forms with many custom fields
+
+Developer sandboxes where multiple admins need field context

Client-Side Components/UI Scripts/Dynamic Field Helper/script.js

@@ -0,0 +1,110 @@
+/**
+ * Dynamic Field Helper (UI Script)
+ * Author: Abhishek Aggarwal
+ * Description:
+ * Adds smart tooltip icons beside form field labels to help users understand field purpose or business rules dynamically.
+ *
+ * Usage:
+ * 1. Create this as a UI Script named "dynamic_field_helper"
+ * 2. Include it on forms or global UI Scripts
+ * 3. Define field tips via system property, script include, or inline config below
+ */
+
+(function () {
+  // Config: fallback if GlideAjax not used
+  var fallbackHelp = {
+    short_description:
+      "Provide a clear, concise summary of the issue or request.",
+    assignment_group: "Group responsible for resolving this record.",
+    priority: "Determines urgency based on impact and severity.",
+    u_project_code: "Auto-filled based on the selected department.",
+    u_estimated_cost: "Enter total expected amount in INR.",
+  };
+
+  /**
+   * Fetch dynamic help content using GlideAjax (optional)
+   * Create a Script Include (Client Callable) named 'FieldHelpProvider' if you want to pull help dynamically.
+   */
+  function fetchHelpData(callback) {
+    try {
+      if (typeof GlideAjax === "undefined") {
+        callback(fallbackHelp);
+        return;
+      }
+
+      var ga = new GlideAjax("FieldHelpProvider");
+      ga.addParam("sysparm_name", "getHelpText");
+      ga.addParam("sysparm_table", g_form.getTableName());
+      ga.getXMLAnswer(function (response) {
+        if (!response) {
+          callback(fallbackHelp);
+          return;
+        }
+        try {
+          var parsed = JSON.parse(response);
+          callback(parsed || fallbackHelp);
+        } catch (e) {
+          callback(fallbackHelp);
+        }
+      });
+    } catch (err) {
+      console.error("DynamicFieldHelper: Fetch error", err);
+      callback(fallbackHelp);
+    }
+  }
+
+  /**
+   * Core function to add tooltips
+   */
+  function addTooltips(helpData) {
+    Object.keys(helpData).forEach(function (field) {
+      var labelEl = document.querySelector(`label[for='${field}']`);
+      if (labelEl && !labelEl.classList.contains("dfh-active")) {
+        labelEl.classList.add("dfh-active");
+        var icon = document.createElement("span");
+        icon.innerHTML = " ⓘ";
+        icon.title = helpData[field];
+        icon.className = "dfh-tooltip-icon";
+        labelEl.appendChild(icon);
+      }
+    });
+  }
+
+  /**
+   * Inject CSS for styling (auto once)
+   */
+  function injectStyle() {
+    if (document.getElementById("dfhStyle")) return;
+    var style = document.createElement("style");
+    style.id = "dfhStyle";
+    style.textContent = `
+      .dfh-tooltip-icon {
+        cursor: help;
+        color: #2563eb;
+        font-weight: bold;
+        margin-left: 4px;
+        transition: all 0.2s ease-in-out;
+      }
+      .dfh-tooltip-icon:hover {
+        color: #1d4ed8;
+        transform: scale(1.2);
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  // Initialize
+  function init() {
+    if (typeof g_form === "undefined") return; // not a form
+    injectStyle();
+    fetchHelpData(function (data) {
+      addTooltips(data);
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();