Form Design and Layout

Form Design and Layout in ServiceNow – A Complete Guide for CAD Exam Preparation

Introduction
Form Design and Layout is a foundational concept in ServiceNow development and a critical topic on the Certified Application Developer (CAD) exam. Understanding how forms are structured, configured, and customized is essential for building effective applications and delivering a seamless user experience on the ServiceNow platform.

Why Is Form Design and Layout Important?
Forms are the primary interface through which users interact with records in ServiceNow. Every time a user opens an incident, a change request, a catalog item, or any other record, they are viewing and interacting with a form. Proper form design and layout directly impacts:

• User Productivity: A well-organized form helps users find information quickly, reducing the time needed to complete tasks.
• Data Quality: By controlling which fields are visible, mandatory, or read-only, form design helps ensure accurate and consistent data entry.
• User Adoption: Cluttered or confusing forms discourage users from engaging with the platform. Clean, intuitive layouts promote adoption.
• Role-Based Access: Different users may need to see different fields. Form design allows tailoring the experience to specific roles and groups.
• Application Performance: Efficient form layouts with only the necessary fields and related lists reduce load times and improve performance.

What Is Form Design and Layout?
Form Design and Layout refers to the configuration and customization of the visual structure of a record form in ServiceNow. This includes determining which fields appear on the form, their arrangement, the use of sections and tabs, related lists, formatters, and other UI elements.

Key components include:

1. Form Layout
The Form Layout tool (accessible via Configure > Form Layout or through the hamburger menu on a form) allows administrators and developers to:
• Add or remove fields from the form
• Arrange fields in one-column or two-column layouts
• Create sections to group related fields together
• Add annotations (descriptive text on the form)
• Choose which related lists appear below the form

2. Form Designer
The Form Designer is a more modern, drag-and-drop interface for configuring forms. It provides a visual, WYSIWYG (What You See Is What You Get) experience and allows developers to:
• Drag fields onto the form canvas
• Rearrange fields and sections visually
• Add and configure sections with split layouts
• Preview the form layout in real time
• Access field properties directly from the designer

3. Sections and Section Configuration
Sections allow you to logically group fields together. You can create multiple sections on a form, and these can be displayed as tabs or expanded/collapsed sections. Key points include:
• Sections can have a caption (displayed as a header or tab name)
• Sections with a caption of null or empty appear without a visible header
• The sys_ui_section table stores section configurations
• Sections can be configured with 1-column or 2-column layouts independently

4. Form Views
ServiceNow supports multiple views for the same form, allowing different layouts for different contexts. Important concepts:
• The Default view is used when no specific view is requested
• Named views (e.g., mobile, ess, itil) can be created for specific roles or use cases
• Views are stored in the sys_ui_view table
• A user can be assigned a default view based on their role using View Rules (stored in sys_ui_view_rule)
• View rules automatically redirect users to the appropriate form view based on conditions like role, table, or other criteria

5. Formatters
Formatters are special UI elements that can be added to a form to display non-field content. Common formatters include:
• Activity Formatter: Displays the activity stream (journal fields like comments and work notes)
• Process Flow Formatter: Shows a visual indicator of the record's progress through stages
• Parent Breadcrumbs: Shows the hierarchy of parent records
• CI Relations Formatter: Displays configuration item relationships
Formatters are added through the Form Layout or Form Designer just like fields.

6. Related Lists
Related Lists appear below the form and show records from other tables that are related to the current record. Configuration options include:
• Selecting which related lists to display via Form Layout
• Configuring the columns visible in each related list
• Related lists are defined by relationships (reference fields, many-to-many tables, etc.)
• The sys_ui_related_list table stores related list configurations

7. Annotations
Annotations allow you to add informational text, images, or HTML directly onto a form. They are useful for providing instructions or guidance to users filling out the form.

8. UI Policies
While not strictly a layout tool, UI Policies play a crucial role in dynamic form behavior:
• Making fields mandatory, visible, or read-only based on conditions
• Running scripts for more complex dynamic behavior
• UI Policies run on the client side and can be configured without scripting for simple cases
• They take precedence over UI Policy Actions and can override dictionary-level settings on the form

9. Client Scripts
Client Scripts provide additional control over form behavior through JavaScript that runs in the user's browser:
• onLoad: Executes when the form is first loaded
• onChange: Executes when a specific field value changes
• onSubmit: Executes when the form is submitted/saved
• onCellEdit: Executes when a cell is edited in a list

How Does Form Design and Layout Work?

The form rendering process in ServiceNow follows a specific order:

1. The system identifies the table and record being accessed.
2. It determines the appropriate view based on view rules, user preferences, or URL parameters (e.g., sysparm_view=ess).
3. The form layout for that view is retrieved from sys_ui_section and sys_ui_element tables.
4. Dictionary attributes and field-level settings (mandatory, read-only, default values) are applied.
5. UI Policies are evaluated and applied (client-side).
6. Client Scripts (onLoad) execute.
7. The form is rendered with all configured fields, sections, formatters, and related lists.

When a user interacts with the form (changing a field), onChange client scripts and UI Policies re-evaluate and adjust the form dynamically.

Key Tables Involved in Form Configuration
• sys_ui_section – Stores form sections
• sys_ui_element – Stores individual field placements on forms
• sys_ui_view – Stores view definitions
• sys_ui_view_rule – Stores view rule assignments
• sys_ui_related_list – Stores related list configurations
• sys_ui_formatter – Stores formatter definitions
• sys_ui_policy – Stores UI Policies
• sys_script_client – Stores Client Scripts
• sys_ui_annotation – Stores form annotations

Best Practices for Form Design and Layout
• Keep forms clean and uncluttered – only show fields that are necessary for the user's task
• Use sections and tabs to organize fields logically
• Leverage views to provide role-appropriate experiences
• Use UI Policies instead of Client Scripts for simple show/hide/mandatory/read-only logic (no scripting required and easier to maintain)
• Place the most important fields at the top of the form
• Use annotations to provide helpful context to users
• Test forms across different roles and views to ensure consistency
• Avoid excessive use of Client Scripts on forms as they can degrade performance
• Use the Form Designer for visual configuration when possible

Exam Tips: Answering Questions on Form Design and Layout

The CAD exam frequently tests your understanding of form configuration concepts. Here are targeted tips to help you answer these questions correctly:

Tip 1: Know the Difference Between Form Layout and Form Designer
The exam may ask which tool to use for a given scenario. Remember that Form Layout is the classic, list-based approach, while Form Designer is the modern, drag-and-drop, visual approach. Both achieve similar results, but Form Designer is the newer and more intuitive tool.

Tip 2: Understand Views and View Rules
Expect questions about how to show different form layouts to different users. The answer typically involves creating a new view and then using a View Rule to assign that view to a specific role. Remember that view rules are stored in sys_ui_view_rule and are evaluated based on conditions like the user's role.

Tip 3: UI Policies vs. Client Scripts
A common exam question asks which approach to use for making fields mandatory, read-only, or visible based on conditions. The best practice answer is UI Policies for simple declarative logic (no scripting needed). Client Scripts should be used for more complex logic that UI Policies cannot handle. If an exam question mentions no scripting, the answer is almost always UI Policy.

Tip 4: Remember the Order of Execution
The exam may test your knowledge of how form elements are processed. Remember: Dictionary attributes are applied first, then UI Policies override them, and then Client Scripts (onLoad) run. UI Policies with Reverse if false checked will undo their actions when conditions are no longer met.

Tip 5: Know Your Formatters
Be familiar with common formatters, especially the Activity Formatter (journal/activity stream). Know that formatters are added to forms through the Form Layout or Form Designer, and they are not regular fields but special UI elements.

Tip 6: Related Lists Configuration
Know that related lists are configured per view and are stored in sys_ui_related_list. Questions may ask how to add or remove related lists from a form – the answer is through the Form Layout's Related Lists tab or the Form Designer.

Tip 7: Sections and Tabs
Understand that sections can appear as tabs when they have captions, and the first section (without a caption) serves as the main body of the form. The exam may ask how to create tabbed sections – the answer is to add new sections with captions via Form Layout or Form Designer.

Tip 8: URL Parameters for Views
Know that views can be specified via the URL parameter sysparm_view. For example, appending &sysparm_view=ess to a URL forces the ESS view. This is a detail the exam occasionally tests.

Tip 9: Annotations Are Not Fields
If a question asks how to add instructional or informational text to a form (not stored in a field), the answer is Annotations. Do not confuse annotations with field labels or help text.

Tip 10: Think About Scoped Applications
In the context of scoped applications, remember that form configurations (layouts, UI Policies, Client Scripts) created within an application scope are part of that application and can be transferred via update sets or published to the app repository. The exam may test awareness of how form customizations interact with application scope.

Tip 11: Eliminate Wrong Answers
When faced with a question about form configuration, eliminate answers that involve server-side scripting (Business Rules, Script Includes) if the question is about visual form behavior. Form design and layout questions almost always have answers involving client-side or configuration-based tools (Form Layout, Form Designer, UI Policies, Client Scripts, Views).

Tip 12: Practice in a Personal Developer Instance
The best way to prepare for form-related questions is hands-on experience. Create forms, configure views, add sections, apply UI Policies, and test different formatters on a ServiceNow Personal Developer Instance (PDI). Practical experience reinforces conceptual understanding and helps you answer scenario-based questions with confidence.

Summary
Form Design and Layout is a core competency for any ServiceNow developer. It encompasses the configuration of fields, sections, views, formatters, related lists, annotations, UI Policies, and Client Scripts to create effective and user-friendly forms. For the CAD exam, focus on understanding the tools available (Form Layout, Form Designer), the role of views and view rules, the appropriate use of UI Policies vs. Client Scripts, and best practices for organizing form elements. Combined with hands-on practice, this knowledge will prepare you to confidently answer any form-related question on the exam.