Connect with designers, developers, admins, PMs and users to learn, collaborate and share knowledge about delivering great experiences with ServiceNow.

Thank you for coming to the Accessibility Leading Practices presentation and Designing for Accessibility pod at Knowledge 2023. Here is a list of resources and tools we know that you will enjoy, learn from, and use to improve the accessibility of your ServiceNow instances and implementations. ... View more

Introduction Most requestor experiences on ServiceNow are built on top of the Service Portal framework. This framework brings together AngularJS and Bootstrap to provide an extensible, responsive user experience. Many customers of ServiceNow choose to theme their experience to match their company’s brand. This guide will walk you through your theming options from the simple to complex. How to approach theming If your company has established branding guidelines for web applications, there usually is a team that owns that specification. Try to partner with them to adapt the guidelines to the options the platform allows you to manipulate. Absent branding guidelines, you may be able to reference your company’s public web site or other well regarded applications and inspect the style used there. There a few things to focus on to effectively apply your brand Primary and secondary colors - these are often used for calls to action, buttons and navigation items throughout your reference site. Spacing - does your reference site have an airy, spaced-out design or a condensed, focused layout? This may affect how you apply margins. Fonts - By default, the Employee Center portal uses the Lato font, and the stock Service Portal demo uses Source San Pro. You may choose to override this with your brand’s font. Depending on the complexity of the changes you want to make, your familiarity with CSS and SASS, and your plans to scale your use of ServiceNow, there are multiple paths to take when it comes to theming. Branding Editor The simplest way to theme a portal is via the Branding Editor; which provides a real time preview of the impacts of your changes. You do not need any knowledge of CSS or SASS. Depending on the portal you select, a limited set of color overrides are provided. Changing these variables will only apply to the specific portal selected in the interface. Changes made in Branding Editor appear in the “CSS variables” field on portal record in sp_portal . Variable Overrides The Service Portal framework uses the Bootstrap (v3.3.6) frontend toolkit as the foundational stylesheet. If you understand the basics of SASS variables, you can easily override the out of the box themes. The platform exposes the SASS variables as if you were building you are bootstrap CSS file from source. That means you can set variables overrides in the portal record. To get to the portal record. Open the Application Navigator Search for Portals Click on the Portals menu item underneath Service Portal Open the record that correspond to the portal you are working on Create or modify the variables in the CSS Variables field Variable Reference - This uses the LESS prefix of an @ symbol while SASS expects a $ Theme Records Creating a theme record and then applying it to the portal is the recommended approach for creating scaleable branding across your instance. One theme record can be applied to multiple portals, giving you a central place to make changes once and impact many experiences. Docs: Create a Portal Theme In the theme record you can set the SASS variables or use the CSS Includes related list to write your own CSS for the elements within the portal. For example, in a CSS include you can create a CSS selector that overrides the style for .text-muted with any properties you want, you are not just limited to Bootstrap’s variables. Bootstrap CSS Helper Class Reference More Specific Options The framework allows you to override styles at the page level, in a widget definition or an instance of a widget. For a full breakdown of styling options reference the Docs article Service Portal styles Fonts in Service Portal There is no one-size fits all guidance for overriding a portal’s default fonts. A lot depends on your IT infrastructure security and ability to access hosted fonts. A few options that are out there Use a CSS Include with the Source set to URL and paste in the link to the hosted font. Encode the font as Base64 and paste it directly into a CSS Include Attach the font files to a CSS include record and reference via sys_attachment.do? Work with your platform owner and admin team to figure out what works for your environment. ... View more

Delivery team and stakeholders come together to align on the rank order of features and functionalities desired for a solution. ... View more

We have just completed a research study where all our participants struggled to understand what "On Journey" or "Journey" means. Does anyone have suggestions or recommendations on how to contextualize this concept/word to a global demographic of users who will not have a SME explaining it to them live when they are navigating on their own. How do we explain what "journey" actually means? ... View more

Hello User Experience Special Interest Group, Where can i find the new improvements/enhancements on UI/UX for Washington DC release. Do we have any separate link for UI updates specific to the new releases? If it is available please do share it. Many Thanks, Y ... View more

More

• 
  Article
  
  Leverage UX methods to effectively use the ServiceNow platform to transform how wor...
• 
  Article
  
  Focus on your requestors expectations to deliver intuitive employee and customer jo...

Ensure stakeholders agree on the project's target outcomes and have a shared unders...

Explore the power of shared knowledge to help teams align and deliver success.

A visualization of a user’s interactions across multip...

Divergent thinking helps teams explore all the ways a problem can be solved in the ...

Rapidly prototype solutions for ServiceNow with our Figma design libraries.

Delivery team and stakeholders come together to align on the rank order of features...

In this phase, we transition from exploring the problem space and possible solution...

Find resources for experience professionals to better ...

Identify experience issues before, during, and after t...

• 
  Empower your users to solve their own problems.
• 
  Deliver informative and actionable notifications to users.
• 
  Printable cards to kee...
• 
  Assess your current implementation against these pract...

Thank you for coming to the Accessibility Leading Practices presentation and Designing for Accessibility pod at Knowledge 2023. Here is a list of resources and tools we know that you will enjoy, learn from, and use to improve the accessibility of your ServiceNow instances and implementations. ... View more

Introduction Most requestor experiences on ServiceNow are built on top of the Service Portal framework. This framework brings together AngularJS and Bootstrap to provide an extensible, responsive user experience. Many customers of ServiceNow choose to theme their experience to match their company’s brand. This guide will walk you through your theming options from the simple to complex. How to approach theming If your company has established branding guidelines for web applications, there usually is a team that owns that specification. Try to partner with them to adapt the guidelines to the options the platform allows you to manipulate. Absent branding guidelines, you may be able to reference your company’s public web site or other well regarded applications and inspect the style used there. There a few things to focus on to effectively apply your brand Primary and secondary colors - these are often used for calls to action, buttons and navigation items throughout your reference site. Spacing - does your reference site have an airy, spaced-out design or a condensed, focused layout? This may affect how you apply margins. Fonts - By default, the Employee Center portal uses the Lato font, and the stock Service Portal demo uses Source San Pro. You may choose to override this with your brand’s font. Depending on the complexity of the changes you want to make, your familiarity with CSS and SASS, and your plans to scale your use of ServiceNow, there are multiple paths to take when it comes to theming. Branding Editor The simplest way to theme a portal is via the Branding Editor; which provides a real time preview of the impacts of your changes. You do not need any knowledge of CSS or SASS. Depending on the portal you select, a limited set of color overrides are provided. Changing these variables will only apply to the specific portal selected in the interface. Changes made in Branding Editor appear in the “CSS variables” field on portal record in sp_portal . Variable Overrides The Service Portal framework uses the Bootstrap (v3.3.6) frontend toolkit as the foundational stylesheet. If you understand the basics of SASS variables, you can easily override the out of the box themes. The platform exposes the SASS variables as if you were building you are bootstrap CSS file from source. That means you can set variables overrides in the portal record. To get to the portal record. Open the Application Navigator Search for Portals Click on the Portals menu item underneath Service Portal Open the record that correspond to the portal you are working on Create or modify the variables in the CSS Variables field Variable Reference - This uses the LESS prefix of an @ symbol while SASS expects a $ Theme Records Creating a theme record and then applying it to the portal is the recommended approach for creating scaleable branding across your instance. One theme record can be applied to multiple portals, giving you a central place to make changes once and impact many experiences. Docs: Create a Portal Theme In the theme record you can set the SASS variables or use the CSS Includes related list to write your own CSS for the elements within the portal. For example, in a CSS include you can create a CSS selector that overrides the style for .text-muted with any properties you want, you are not just limited to Bootstrap’s variables. Bootstrap CSS Helper Class Reference More Specific Options The framework allows you to override styles at the page level, in a widget definition or an instance of a widget. For a full breakdown of styling options reference the Docs article Service Portal styles Fonts in Service Portal There is no one-size fits all guidance for overriding a portal’s default fonts. A lot depends on your IT infrastructure security and ability to access hosted fonts. A few options that are out there Use a CSS Include with the Source set to URL and paste in the link to the hosted font. Encode the font as Base64 and paste it directly into a CSS Include Attach the font files to a CSS include record and reference via sys_attachment.do? Work with your platform owner and admin team to figure out what works for your environment. ... View more

Delivery team and stakeholders come together to align on the rank order of features and functionalities desired for a solution. ... View more

We have just completed a research study where all our participants struggled to understand what "On Journey" or "Journey" means. Does anyone have suggestions or recommendations on how to contextualize this concept/word to a global demographic of users who will not have a SME explaining it to them live when they are navigating on their own. How do we explain what "journey" actually means? ... View more

Hello User Experience Special Interest Group, Where can i find the new improvements/enhancements on UI/UX for Washington DC release. Do we have any separate link for UI updates specific to the new releases? If it is available please do share it. Many Thanks, Y ... View more

More

Join us to make our over 600K member community even better. Create your free account and make the world work better for everyone.

Join the Community