UX Framework: CI health badges component with simple server API

Client-Side Components/UX Client Script Include/CI health badges component/CiHealthApi.js

@@ -0,0 +1,32 @@
+// Script Include: CiHealthApi
+// Purpose: Return simple CI health data for a given sys_id.
+
+var CiHealthApi = Class.create();
+CiHealthApi.prototype = {
+  initialize: function() {},
+
+  getHealth: function(ciSysId) {
+    if (!ciSysId) throw 'ciSysId required';
+
+    // Example: pretend we have a table x_ci_health with scores
+    var gr = new GlideRecord('x_ci_health');
+    gr.addQuery('ci', ciSysId);
+    gr.orderByDesc('evaluated_at');
+    gr.setLimit(1);
+    gr.query();
+
+    if (!gr.next()) return { ok: false, message: 'No health data', score: 0, label: 'Unknown' };
+
+    var score = parseInt(gr.getValue('score'), 10) || 0;
+    var label = score >= 80 ? 'Good' : score >= 50 ? 'Warning' : 'Critical';
+
+    return {
+      ok: true,
+      score: score,
+      label: label,
+      evaluated_at: gr.getDisplayValue('evaluated_at')
+    };
+  },
+
+  type: 'CiHealthApi'
+};

Client-Side Components/UX Client Script Include/CI health badges component/README.md

@@ -0,0 +1,23 @@
+# CI health badges component (Now Experience)
+
+## What this solves
+Platform engineers want a quick visual of CI health. This Now Experience component fetches a CI’s health score and renders a compact badge: Good, Warning, or Critical.
+
+## Where to use
+- Now Experience / UI Builder component
+- Include `CiHealthApi` Script Include for server calls from an Action or Data Resource
+
+## How it works
+- Client component requests CI health via a simple server API (Script Include)
+- Displays a coloured badge with score and last evaluated time
+- Props: `ciSysId`
+
+## Configure
+- Ensure a health source exists for the CI class you test
+- Replace `CiHealthApi` logic if you use a custom health table
+
+## References
+- Now Experience framework  
+  https://www.servicenow.com/docs/bundle/zurich-employee-service/page/build/workspace-components/concept/now-experience.html
+- GlideAjax (if calling Script Include from client)  
+  https://www.servicenow.com/docs/bundle/zurich-api-reference/page/app-store/dev_portal/API_reference/GlideAjax/concept/c_GlideAjaxAPI.html

Client-Side Components/UX Client Script Include/CI health badges component/ci-health-badges.component.js

@@ -0,0 +1,43 @@
+// Now Experience component (simplified snippet)
+// Renders a badge based on CI health from CiHealthApi via GlideAjax.
+
+(function() {
+  // minimal component-like function for illustration inside repo
+  function renderBadge(targetEl, ciSysId) {
+    if (!ciSysId) {
+      targetEl.innerHTML = '<span>CI not specified</span>';
+      return;
+    }
+
+    var ga = new GlideAjax('CiHealthApi');
+    ga.addParam('sysparm_name', 'getHealth');
+    ga.addParam('sysparm_ciSysId', ciSysId);
+    ga.getXMLAnswer(function(answer) {
+      try {
+        var res = JSON.parse(answer);
+        if (!res.ok) {
+          targetEl.innerHTML = '<span>' + (res.message || 'No data') + '</span>';
+          return;
+        }
+        var cls = res.label === 'Good' ? 'badge-good' : res.label === 'Warning' ? 'badge-warn' : 'badge-crit';
+        targetEl.innerHTML =
+          '<span class="badge ' + cls + '">' + res.label + ' (' + res.score + ')</span>' +
+          '<small> Evaluated: ' + res.evaluated_at + '</small>';
+      } catch (e) {
+        targetEl.innerHTML = '<span>Failed to parse health data</span>';
+      }
+    });
+  }
+
+  // Example usage in a portal page widget:
+  // renderBadge(document.getElementById('ci-badge'), 'PUT_CI_SYS_ID');
+
+  // rudimentary styles for illustration
+  var style = document.createElement('style');
+  style.textContent = '.badge{padding:4px 8px;border-radius:6px;color:#fff;margin-right:6px}' +
+    '.badge-good{background:#2e7d32}.badge-warn{background:#f9a825}.badge-crit{background:#c62828}';
+  document.head.appendChild(style);
+
+  // expose for demo
+  window.renderCiHealthBadge = renderBadge;
+})();