Application User Interface
This domain covers the UI layer of ServiceNow applications: form design, list configuration, UI Policies, Client Scripts, UI Actions, and Service Portal widgets. It tests your ability to build intuitive, functional user interfaces.
Form Design & Configuration
Forms are the primary interface for viewing and editing individual records. Developers configure forms using Form Designer or Form Layout to arrange fields, sections, and related lists.
Form Configuration Options
- Form Layout — Drag-and-drop field arrangement. Supports 1-column and 2-column sections.
- Form Designer — Visual editor with more features: formatters, annotations, embedded lists.
- Sections — Group related fields. Can be collapsed/expanded.
- Views — Different form layouts for different contexts (e.g., Default, Mobile, Self-Service).
- Formatters — Special UI elements: Activity (journal), Process Flow, Parent Breadcrumbs.
- Related Lists — Show child records at the bottom of the form.
Views allow different form layouts for different users or contexts. A form can have multiple views (Default, ESS for self-service, Mobile). Role-based views let you show different fields to different roles. View rules can automatically select a view based on conditions.
UI Policies (Developer Perspective)
UI Policies dynamically modify form behavior based on conditions. For the CAD exam, you need to understand both the no-code configuration AND the scripted UI Policy approach.
Scripted UI Policies
- Enable 'Run scripts' on the UI Policy to use custom JavaScript.
- Execute if true script — Runs when conditions evaluate to true.
- Execute if false script — Runs when conditions evaluate to false (reverse action).
- Uses g_form API: setValue, setMandatory, setVisible, setReadOnly, setDisplay.
- Scripted UI Policies provide more control than the standard UI Policy actions.
g_form.setVisible() hides the field but keeps the label. g_form.setDisplay() hides BOTH the field and label. The exam tests this distinction. Also: setMandatory(true) in a UI Policy can be overridden by a subsequent Client Script or UI Policy with a higher order number.
Client Scripts (Developer Deep Dive)
Client Scripts are JavaScript that runs in the user's browser. For the CAD exam, you need deep knowledge of all script types, the GlideForm API, and performance best practices.
onChange Script Signature
function onChange(control, oldValue, newValue, isLoading, isTemplate) { ... }
- control — The DOM element of the field (rarely used).
- oldValue — The previous value of the field.
- newValue — The new value of the field.
- isLoading — True when the form is loading (initial load). Use to skip logic on load.
- isTemplate — True when loading a template.
GlideForm (g_form) API — Must Know
Essential g_form Methods
| Method | Purpose | Notes |
|---|---|---|
| getValue(field) | Get field value | Returns sys_id for Reference fields |
| setValue(field, value) | Set field value | For Reference: setValue(field, sysId, displayValue) |
| getDisplayValue(field) | Get display value | Returns display text for Reference fields |
| setMandatory(field, bool) | Make field required | Client-side only |
| setVisible(field, bool) | Show/hide field | Keeps label visible |
| setDisplay(field, bool) | Show/hide field + label | Hides both field and label |
| setReadOnly(field, bool) | Make field read-only | Client-side only |
| addInfoMessage(msg) | Show info banner | Blue information message |
| addErrorMessage(msg) | Show error banner | Red error message |
| showFieldMsg(field, msg, type) | Show field-level message | type: 'info' or 'error' |
| flash(field, color, count) | Flash a field | Visual attention draw |
NEVER use synchronous GlideRecord on the client side. This blocks the browser thread and degrades performance. Always use GlideAjax to make asynchronous server calls from Client Scripts. The exam heavily penalizes synchronous client-side queries.
You need an onChange Client Script on the Category field of the incident form. When Category changes to 'Network', you want to auto-populate the Assignment Group with the 'Network Team' group. How do you do this?
Create an onChange Client Script on the incident table, targeting the Category field. Check if isLoading is false (to skip on form load). If newValue equals 'Network', use a GlideAjax call to a Script Include that queries sys_user_group for 'Network Team' and returns its sys_id. In the callback, use g_form.setValue('assignment_group', sysId, 'Network Team') to set both the sys_id and display value.
UI Actions
UI Actions are buttons, links, and context menu items that appear on forms and lists. They execute client-side, server-side, or both client and server scripts.
UI Action Types
- Form Buttons — Appear in the form header/footer (e.g., Save, Update, custom actions).
- Form Links — Appear in the form context (right-click) or as Related Links.
- Form Context Menu — Right-click options on the form header.
- List Buttons — Appear above the list.
- List Context Menu — Right-click options on list rows.
- List Choice — Appear in the Actions dropdown above the list.
Client + Server Execution
UI Actions can run client-side scripts first, then server-side. This is controlled by the 'Client' checkbox.
- Client script runs first — validate, confirm with user, gather input.
- If the client script calls gsftSubmit(null, g_form.getFormElement(), 'action_name'), the form submits and the server script runs.
- Server script accesses current, previous, and can modify the record.
The pattern for client-then-server UI Actions: Client script validates/confirms → calls gsftSubmit() → Server script executes. If the client script does NOT call gsftSubmit(), the server script never runs. The 'action_name' parameter in gsftSubmit must match the Action name field on the UI Action record.
List Configuration & Views
Lists display multiple records and support extensive customization through list layouts, list controls, and list decorations.
List Customization
- List Layout — Configure which columns appear and their order.
- List Controls — Show/hide buttons above the list (New, Delete, etc.).
- List Decorations — Icons or indicators on list rows (e.g., VIP icon, SLA breach icon).
- List Calculations — Sum, average, count columns in the list footer.
- Condition-based coloring — Highlight rows or cells based on conditions (e.g., red for P1 incidents).
Style (field-level) and Color (row-level) can be configured to visually highlight data. Navigate to System UI > Field Styles for field-level styles and List v3 Configuration for row coloring.
Mobile & Service Portal
Applications should be accessible on mobile devices and through the Service Portal. Developers must understand how their configurations translate across platforms.
Mobile Considerations
- Mobile layouts are configured separately from desktop layouts.
- Mobile App Builder creates native mobile app experiences.
- Not all client scripts run on mobile — test thoroughly.
- Mobile views show simplified forms with essential fields.
Service Portal Widgets
- Widgets are AngularJS-based components with HTML, CSS, Client Script, and Server Script.
- Widgets have isolated scope — they don't inherit from the page.
- Widget options allow admins to configure widgets without editing code.
- Service Portal uses different client-side APIs than the platform UI.
Service Portal widgets use AngularJS (not React or vanilla JS). Platform Client Scripts and UI Policies MAY run in the Service Portal, but behavior can differ. Catalog Client Scripts run in both contexts. Always test portal-specific behavior.
Key Takeaways
- g_form.setVisible() hides the field only. g_form.setDisplay() hides both field and label.
- onChange scripts receive isLoading — always check it to avoid running logic on form load.
- For Reference fields: g_form.setValue(field, sysId, displayValue) requires THREE arguments.
- Never use synchronous GlideRecord on the client. Use GlideAjax for server calls.
- UI Actions can run client-then-server. Client calls gsftSubmit() to trigger the server script.
- Form views allow different layouts for different roles and contexts (Default, ESS, Mobile).
- Service Portal widgets use AngularJS. Platform scripts may behave differently in the portal.
Community-created study aids. Not official ServiceNow exam content.