Skip to content

Commit 939013b

Browse files
committed
df
1 parent 6ec39d4 commit 939013b

File tree

3 files changed

+177
-4
lines changed

3 files changed

+177
-4
lines changed
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# 💡 Dynamic Field Helper — Smart Tooltips for Form Fields
2+
3+
### Overview
4+
5+
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.
6+
7+
It’s a plug-and-play enhancement designed for developers and admins who want to improve usability and reduce confusion across complex forms.
8+
9+
---
10+
11+
### ✨ Features
12+
13+
- 🧩 **Automatic Tooltips** — Adds ⓘ icons beside important field labels
14+
-**Dynamic Data Source** — Pulls tooltip data from GlideAjax or static JSON config
15+
- 🧠 **No Form Edits** — Works across all forms dynamically
16+
- 🎨 **Lightweight & Clean Design** — Subtle hover animations and color themes
17+
- 🔒 **Scoped-Safe** — Works seamlessly in scoped or global applications
18+
19+
---
20+
21+
### 🛠️ Installation
22+
23+
1. Navigate to **System UI → UI Scripts → New**
24+
2. Name it **`dynamic_field_helper`**
25+
3. Paste the following code:
26+
```js
27+
// (See full script in the code file)
28+
```
29+
4. Mark as ✅ Active and ✅ Global
30+
31+
5. Include it in forms or client scripts (or globally via UI Policy)
32+
33+
### 🔧 Optional: Dynamic GlideAjax Version
34+
35+
For fully dynamic field tips, add a Script Include named FieldHelpProvider (Client Callable):
36+
37+
``
38+
39+
var FieldHelpProvider = Class.create();
40+
FieldHelpProvider.prototype = {
41+
getHelpText: function() {
42+
var result = {
43+
short_description: "Provide a short summary of the issue.",
44+
category: "Select the most relevant category for routing."
45+
};
46+
return JSON.stringify(result);
47+
},
48+
type: 'FieldHelpProvider'
49+
};
50+
51+
``
52+
53+
### 💡 Use Cases
54+
55+
Service Catalog forms that confuse end-users
56+
57+
Complex HR or Finance forms with many custom fields
58+
59+
Developer sandboxes where multiple admins need field context
Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
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+
})();
Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
//This Fix scripts is to clean up multiple record errors
2-
// Navigate to Scripts-Background
3-
// Past the script and update the place holder variable value: table name, field, and value etc.
4-
// Also advisable to validate the row count the //gr.getRowCount() and remove from codebase.
1+
*************
2+
This script will query the group table and look for groups with inactive members. The script will replace the inactive manager with the oldest active member of the group.
3+
4+
Logs: If no active members are there in group //gs.info("Group " + grp.name + " does not have any active user");
5+
6+
After manager is replaced : gs.info("Group " + inactiveMgrGrp.name + " manager changed to " + getOlderGroupMember(inactiveMgrGrp).name);
7+
8+
*************

0 commit comments

Comments
 (0)