🎨 Now Experience UI Framework in ServiceNow

🌐 Introduction

The Now Experience UI Framework is ServiceNow’s modern front-end development framework used to build reusable, fast, and responsive components for the ServiceNow platform.

• Based on web standards (Web Components) and JavaScript ES6+.

• Allows developers to create custom experiences beyond traditional forms and lists.

• Powers Agent Workspace, Employee Center, and custom portals.

💡 Key Benefit: It brings consumer-grade UI/UX to enterprise applications in ServiceNow.

📑 Core Concepts

🔹 Components

• The building blocks of Now Experience UI.

• Created as Custom Web Components (using now-cli).

• Examples: custom buttons, widgets, dashboards.

🔹 Now Experience UI Builder

• A drag-and-drop interface for creating workspaces, portals, and pages.

• Place components on layouts.

• No-code/low-code customization.

🔹 Data Binding

• Components connect to data sources like tables, records, or APIs.

• Example: A “My Approvals” widget pulling tasks assigned to the logged-in user.

🔹 Theming

• Customize branding (colors, fonts, styles).

• Aligns with organizational UI guidelines.

⚡ Developer Tools

🔹 Now CLI (Command Line Interface)

• Tool to generate and manage components.

• Example command:

now-cli component create my-custom-card

🔹 Component Framework APIs

• Use @servicenow/ui-component to create, style, and manage states.

• Example (simple component):

import {createCustomElement} from '@servicenow/ui-core';

createCustomElement('x-example-hello', {
  view: () => <h1>Hello ServiceNow!</h1>
});

🔹 Data Resources

• Connect components to ServiceNow data sources like:

  • Table API (query records).

  • Record API (fetch/update specific records).

  • Scripted APIs (custom logic).

🛠️ Real-World Examples

1. Agent Workspace Customization

   • Build a custom component to show priority incidents on the agent’s dashboard.

2. Employee Center Branding

   • Add custom cards (Quick Links, FAQ widgets).

   • Theme to match corporate identity.

3. Custom App Dashboards

   • Build components showing KPI charts with data from Performance Analytics.

4. Third-Party Integration Widget

   • Create a UI component that displays Jira tickets inside ServiceNow.

🔍 Advanced Features

• Declarative UI Components → Build components using XML-like markup.

• Reusable Packages → Publish components to be used across instances.

• Event Handling → Trigger actions across multiple components.

• Accessibility (a11y) → Now Experience framework enforces accessibility standards.

• Performance Optimizations → Lightweight and faster than legacy Jelly/UI Macros.

• Extending OOTB Workspaces → Add custom panels/widgets to Agent Workspace or CSM Workspace.

📊 Comparison with Legacy UI

💡 Best Practices

• ✅ Use UI Builder for faster no-code/low-code customization.

• ✅ Create reusable components instead of duplicating logic.

• ✅ Integrate with ServiceNow Data Resources instead of direct GlideRecord calls.

• ✅ Follow branding guidelines for a consistent experience.

• ✅ Optimize for performance and accessibility.

• ❌ Avoid mixing old Jelly/AngularJS with Now Experience components.

• ❌ Don’t hardcode data—always use APIs or data bindings.

🎬 Conclusion

The Now Experience UI Framework is ServiceNow’s modern UI foundation, enabling developers and admins to build dynamic, reusable, and branded user experiences.

• With UI Builder, Now CLI, reusable components, and data binding, it allows creation of workspaces, dashboards, and portals that look and feel like modern apps.

• It replaces outdated UI technologies, ensuring performance, accessibility, and scalability.

✅ In short: Now Experience = Modern UI + Reusable Components + Future-Proof Platform