Fuji UI updates
As part of the Fuji release, ServiceNow has introduced an enhanced user interface (UI). This document highlights many of the notable changes and improvements. The goal of the redesign is to create a useful, consistent, and aesthetically pleasing UI that extends across the ServiceNow platform.
The stylistic changes include new icons throughout the platform, the Edge, and various applications. There is also improved spacing in the layout to improve readability and usability of the things you use most.
Icons are redesigned throughout the UI.
The system menu provides several new settings to improve user experience. Additionally, some existing settings are now located in the system menu for easier access. To open the system menu, click the gear icon in the banner frame.
Settings now available in the system menu include:
Wrap Longer Text in List Columns
Long strings of text wrap in list columns instead of appearing as one long line when this setting is enabled.
The UI is optimized to display more information when this setting is enabled, for those who prefer a more compact view. Click the switch icon in the Preference section to adjust this setting.
Form sections and related lists appear in tabs when this setting is enabled. Previously, this setting appeared as an icon on the form header. Click the switch icon in the Preference section to adjust this setting.
The format in which dates and times appear depends on this setting. The setting icon is displayed below:
- The Calendar format (for example, 2015-01-23, 13:53:19) is the default format for date/time fields and was previously the only supported format.
- The Time Ago format (for example, 14 days ago) is easier to interpret quickly when reviewing issues
- The Both format displays both calendar and time ago formats simultaneously.
Compact list date/time - Date and time values appear in a compact format when this setting is enabled. The year is not shown for date values within the current year, and seconds are not shown for time values. This setting is not available if the Date/Time selection is Time Ago.
Related List Loading
At what point related lists load on a form depends on this setting. Related lists can impact form-loading speeds depending on the amount of data.
- By default, related lists load With the Form as soon as you open a record.
- Select After Form Loads to load related lists after the rest of the form loads.
- Select On-Demand to load related lists manually by clicking the Load Related Lists button on a form.
Tooltips are displayed in the Navigator.
If you find the tooltips distracting, right-click on the application or module that shows the tooltip, and select Edit Application (or Edit Module). Then, remove the Hint from that application or module by clearing the contents of that field.
Form layouts adapt to better accommodate a variety of window widths: full size, reduced width, and single column.
In the reduced-width window, columns are displayed closer together:
In a further-reduced window, fields appear in a single column:
UI actions are now on the far right instead of the icons.
Updated field notations
Field status indicators are larger and bolder to better highlight mandatory fields.
Users can customize the layout for any form view by personalizing the form. This enables users to hide fields they do not use. It does not enable users to show fields that are not configured to appear on the form.
Administrators can control which users are allowed to personalize forms and manage other settings.
Form personalization is activated for new instances. For upgraded instances, an administrator must activate the Form Personalization plugin.
Note: This type of personalization is different than form configuration, which was previously called form personalization.
Tables are removed from the form renderer, but formatters are still wrapped in a single <table> set to width=100%. In a future release, we plan to make this optional so that any custom formatter, chart, list, or component can be a 100% Bootstrap-compatible markup.
Sort indicator arrow
The top of the arrow now indicates the max value:
- Pointing down now means ascending – lowest to highest.
- Pointing up now means descending – highest to lowest.
The detail row allows you to put a wide cell, like short description, on its own row. It can be enabled with the system property:
By default, this dictionary attribute is set on the task table:
To set a different field as the detail row for a specific field, edit the collection type dictionary entry for the specific table. Add the dictionary attribute:
Other list enhancements
- List column headers are gray instead of white.
- The reference popup icon has been updated to info icon (system-wide change).
o Hovering over the reference icon shows a preview of that record. It is called the reference popup.
- After hovering the reference icon, holding Shift keeps the reference popup open after moving your mouse away from the reference icon. Click x to close the reference popup.
- Hovering the reference icon while holding Shift opens that record in an editable dialog.
- List navigation controls have been restyled.
Prior to Fuji, GlideDialogForm could set its width based on the content returned because the forms were sized from the inside out using tables.
In Fuji, the form elements respond to a fluid container, meaning the size of the browser window tells the form elements what their maximum size should be. As a result, GlideDialogForm needs a width and height set before calling render(). If a width and height are not set, it estimates how big to make the dialog and sets some maximum sizes based on the dimensions of the container that is showing in the dialog.
The example below illustrates a GlideDialogForm of a new incident using the mobile view and not setting the width or height. Notice the difference between Eureka and Fuji:
var f = new GlideDialogForm(‘New Incident’, ‘incident’);
Bolder notifications have been implemented to emphasize the message on the form or list.
The timing of many notifications has also changed. Sometimes an AJAX transaction triggers an info or error message in a business rule (using script like gs.addInfoMessage(…)). These messages now show when the AJAX transaction completes instead of when the next page is loaded.
Miscellaneous application changes
Context menu labels
To further distinguish between the new form personalization feature and form layouts, we changed the Personalize context menu label to Configure. Going forward, Configure indicates a change that affects multiple users whereas Personalize indicates a change that only affects that user’s preferences.
The plugin activation dialog box has been updated to show a tree of operations when applicable, and a progress bar indicator.