How to Stay “Out of Box” with your Service Portal

out of box staying close service portal widgets modify clone servicenow serviceportal mcdonalds wallmart hm pgne tesla nasa nike coca-cola government self service portal serviceportal

WHAT IS “OUT OF BOX”

One of the most common requests we hear when developing a portal is, “stay close to out-of-box”. People usually think this means staying close to the look and feel of the Stock theme, in hopes that it will minimize complications with future upgrades. This common misconception has very little to do with the portal theme, and everything to do with how many and which widgets were cloned.

Staying out-of-box has nothing to do with the theming, look or feel of the portal, but how many of the widgets were cloned.

The real danger of “stay close to out-of-box” is that it leaves little-to-no room for:

  • Adhering to company required branding guidelines
  • Delivering a delightful user experience
  • Meeting business requirements

So how do you stay close to out-of-box and ensure a smooth upgrade process without sacrificing the look, feel and functionality of the portal? In this article, we’ll outline various approaches to help you deliver a portal without sacrificing the user experience.

WHAT NOT TO CLONE

Before we talk about what you can safely change, let’s talk about what you shouldn’t change. Changing a ServiceNow widget involves cloning it.

When you clone a widget, you become responsible for ensuring your widget continues to function as expected after a ServiceNow upgrade.

If a widget with complex logic is cloned and you want to align it with the recent upgrade, you may need to analyze both original and cloned widgets line-by-line to determine what changed and to ensure nothing has stopped working. We know from experience that some widgets tend to change quite often, even within patches and hot fixes! For that reason, we recommend that you avoid cloning any widget with complex logic.

Some examples include:

  • Shopping cart
  • Catalog item
  • Approvals
  • Order guide
  • Data table
  • Form

Before you clone a widget, consider the additional effort it will require to maintain the widget with each upgrade. In many cases, with a little creativity, it is possible to meet business or branding requirements without cloning.

WAYS TO AVOID CLONING A WIDGET

We’ve found quite a few ways to avoid cloning while still meeting requirements. Here are some suggestions in a rough order of difficulty.

  1. INSTANCE OPTIONS
    Many widgets already have instance options for configuring the behavior and look of the widget. You can access the options by pressing CTRL + Click on the widget and selecting “Instance Options.”
  2. CSS
    Making changes to CSS outside of a widget will have minimal impact on your ability to upgrade. Same thing applies to your layout. With this in mind, don’t be afraid to style and theme your portal to make it more attractive and “on brand.”
  3. WRAPPING/EMBEDDING WIDGETS
    In some cases, you just need to augment or slightly modify the behavior of a widget. By embedding a standard widget in a custom one, you take advantage of the standard functionality while gaining the control you need. This is useful, for example, when you need finer control over the instance options that are passed to the standard widget or when you need to adapt URL parameters or events.
  4. DIRECTIVES
    From Angular.js documentation:

“At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.”

In simpler terms, a directive could allow you to attach behavior to DOM elements inside a widget you don’t “own.” This is an extremely powerful way to adapt widgets without cloning them. While diving into directive development is beyond the scope of this article, keep it in mind as you evaluate your options.

IF YOU NEED TO CLONE

In some situations, you can’t always avoid cloning to achieve the result you want.

If that is the case, be sure you:

  1. Document the cloned widgets
  2. Consider analysis time as part of your upgrade validation process
  3. After an upgrade, evaluate the source widgets to determine if you should
    • Keep the clone “as-is”
    • Upgrade it
    • Revert back to the original

Remember, Service Portal is a UI framework built to help you create great experiences. Don’t be afraid to deviate from the Stock theme and take full advantage of all its capabilities!

ADDITIONAL READING
For related information on the topic, check out these articles.

Out-of-Box — Widget Library, ServicePortal

Widget Cloning — Clone a Widget

Modifying — Widget CSS, Embedding Widgets, Configure Widget Instance Options

5 comments

  1. Great article, I’ve had this discussion with some colleagues this week.

    I would definitely agree to stay away from the widget listed in your article.

    On a personal opinion, I really feel there’s nothing to worry about when cloning a widget – except for the fact that you’ll miss future “enhancements/bug fixes” – I don’t see it as a risk. After upgrades, compare them side by side, see whats new/different and take a decision.

    At the end, there’s a good chance the newly upgraded widget will still not do what ever you wanted it to do when original cloned it, so you’ll keep using your custom widget.

    Documentation is KEY.

    And of course, you can ALWAYS revert back to the OOB widgets.

    Thanks Nathan

  2. Thanks, Nathan! I hope in future it will be easier to extend widgets with additional functionalities without cloning them. However, in most cases, widgets brought up by ServiceNow are not developed in the way these can be configured and extended easily and reusable.

  3. Hi Nathan,
    thanks a lot for this article. You talk about attaching a behaviour in the DOM of an OOB Widget by using the directives. I know how to use a directive in a custom widget but could you explain rapidly how we can do it for an OOB Widget please ?

    Thanks in advance
    Christophe

Leave a Reply

Your email address will not be published. Required fields are marked *