Styling the CMS

While this book will focus primarily on current-generation technology, we would be remiss to completely leave out the CMS. The Service Portal is only available for post-Geneva ServiceNow instances. For Geneva instances and the versions prior, ServiceNow uses the Content Management System (CMS) for users without ITIL/fulfiller roles to submit tickets through the system. CMS will continue to be supported for some time, but support may be discontinued in later versions of the Now platform. Various compatibility issues have already begun to crop up in previous releases—it is highly recommended that ServiceNow users migrate from an old Jelly-based CMS to the Service Portal as soon as possible.

The CMS and Service Portal are very similar, in that they are both meant to facilitate something of a front-end for business users to submit service requests, log Incidents, and get some basic information about their tickets. They differ though, in that the service portal is based on Angular (a library based on JavaScript, for building powerful web-apps), whereas the CMS is based on Jelly (a little-known multi-phase executable XML language, developed by Apache).

The Service Portal also provides a simple, easy-to-use interface for building your portal's front-end, based on Bootstrap (a paradigm of largely CSS-based design and JavaScript APIs). This simplicity and on-rails feel of the Service Portal has its down-side, though. There are some things that are much more difficult to do in Service Portal, than in the CMS. The CMS is almost like the wild west; a great deal of freedom and expandability, but with little in the way of standards, controls, or limitations to ensure a consistent, maintainable, or pleasant user experience.

Rather than set up a site from scratch, we'll have a quick look at the default Employee Self-Service (ESS) CMS as an example. Navigate to Content Management | Sites, and select the Employee Self Service site. In the Pages related list at the bottom of the Site form, open the portal page with the URL suffix main.

Layouts for the CMS are predefined UI Macros, and are typically written in a language called Jelly, which is a Java and XML-based scripting and processing engine for turning XML into code that can be executed. Layouts have drop zones, where you'll use other UI Macros and content blocks to display content, similar to the Containers and Widgets in the Helsinki Service Portal.

Note

UI Macros are used all over ServiceNow, including the internal lists and forms. It is considered best practice to duplicate a UI Macro and edit the duplicate, rather than edit the original record, if you'd like to make changes to one. Other developers may have used the same UI Macro elsewhere, and editing that UI Macro could have interesting consequences. Making changes to a OOB UI macro also prevents the system from upgrading that record, when you upgrade your instance to a new version!

Under the Related Links section of the Portal record, click Edit Page. From here, you can change the layout, and insert or edit the UI macros on the page.

To brand the CMS, let's change the header logo. Hover over the header in the layout, and you'll see the edit icon in the top right corner of the UI Macro. Click that to open the header record:

Styling the CMS

Once on the header record, you can upload a new logo, and set new background colors. Alternatively, you can use a background image for the header with your company's logo.

In addition to changing the logo, you might also want to change the colors to match the company color scheme. Navigate to Content Management | Design | Themes to see a list of current CMS theme records. Each theme is comprised of several style sheets that govern the styles for UI Macros and layouts in the CMS. You can click on any of the style sheets from the related list on the theme record, to modify this CSS to fit your company's branding scheme.

Note

The Themes used for the CMS also include styles governing navigation list UI Macros and general formatting. Rather than starting a new Theme from scratch, it's a lot easier to use or duplicate the existing Style Sheets in the Default Theme, and then add a style sheet with CSS overrides to achieve the look you're going for.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.97.189