SNC Development

Have you ever wondered? Is it possible to create a link that jumps to the top of the page on a Service Catalog Item in #ServiceNow?

In this weeks ServiceNow Admin 101: Creating a “Top of Page” Link for Service Catalog Pages. Cloud Sherpas Steven Bell shows you how HERE.

Original Post:

ServiceNow administrators can work more efficiently simply by following a few tips, and in the Admin 101 Series I will introduce some of the best tips to simplify the working experience within ServiceNow.

One of our implementation specialists recently posed an interesting question: is it possible to create a link that jumps to the top of the page on a Service Catalog Item in ServiceNow?

He was working on several long Catalog Item forms that required users to scroll all the way back to the top once they reached the bottom of the page. Recognizing that getting back to the top could be painful if there were a significant number of text field variables embedded in the form, he thought why not add a link at the bottom that goes directly to the top of the page?

My first thought was, you can’t do that without modifying the out-of-the-box code. However, this is not a great option because when it comes to ServiceNow, if you touch it, you own it. In other words, ServiceNow will skip any modified out-of-the-box code when upgrading to a new release.

So the solution had to be something that would work inside of the existing framework for Service Catalog. And then it struck me! Why not create a UI Macro, a Service Catalog Macro to use it. and then add that to a Catalog Item? It couldn’t be that simple… could it? It was, and the solution worked great!

To create your own “Top of Page” link for a Service Catalog page, just follow these steps:

1. Create a new UI Macro

a. In the navigation filter type: UI Macros

b. Click on the “UI Macros” link.

c. The UI Macro list view will appear.

d. Click “New” to create the new UI Macro. The new UI Macro form will appear with the XML partly filled in. 

e. In the “Name” field, type something like “sc_top_of_page_link” for easy identification.

f. Add the following code in the XML field between the two jelly tags:

<a href=”#top”>Goto top of page</a>

The XML code should look like this when you are done:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<j:jelly trim=”false” xmlns:j=”jelly:core” xmlns:g=”glide” xmlns:j2=”null” xmlns:g2=”null”>
<a href=”#top”>Goto top of page</a>
</j:jelly>

NOTE: You can also create a similar #bottom or #middle UI Macro.

g. You’re now done with the UI Macro! It should look something like this:

h. Click the Submit button. This will take you back to the UI Macro list view.

i. In the list view, double click and set the Category to Service Catalog. This identifies it as a Service Catalog UI Macro. 

1. Create a new Service Catalog Variable

a. Go to the Navigation filter and type “Catalog Variables”

b. Click on the “All Variables” link. This will display the Service Catalog Variables list view.

c. Click the “New” button to display the new Variable form. 

d. Fill in the following fields as designated below, leaving the rest as default.

Type: Macro
Name: sr_goto_top_of_page
Order: 1999
Catalog Item: <your really long catalog item>
Macro: <will appear when Type: Macro is chosen>

When you pick the Macro type, the “Macro” field should appear. Click the magnifying glass to bring up a list of Macros and pick the “sc_top_of_page_link” Macro that you created in the first step.

By the way, you are not limited to how many of these you can create. So, if you have a really long Service Catalog page, you can create a couple of these and put one in the middle of the page. Location of the variable is determined by the “Variable Order” field. For the purposes of this article, I will show just the one variable at the end of the Service Catalog page.

Since you want the link to be at the end of the page, set the order to be greater than all the other variables. 1,999 should do the trick nicely!

For Catalog Item, choose “Schedule Relocation” because it is a long one and will demonstrate the link nicely. Add a prefix of “sr” to the “Name” field to identify it as a Schedule Relocation variable.

e. The completed form should look something like this when you are done:

f. Click on the “Submit” button to display the “All Variables” list view.

1. Test your Catalog Item

Okay, we’re done! The next step is to actually go see if the variable appears in your chosen Catalog Item. Since I chose the Schedule Relocation Service Catalog Item, I can see my new link by doing the following:

a. Type “Service Catalog” in the Navigation filter.

b. Choose “Service Catalog” in the self-service application.

c. Click on “Can We Help You?”

d. Scroll down and click on “Schedule Rotation”

e. Once the Schedule Rotation page appears, scroll down to the bottom to see the link.

f. Click on the link to test if it goes to the top. 

Now your new top of page variable is unit tested and ready for production!

LEARN MORE

If you’re interested in obtaining the complete solution, it is now available on ServiceNow’s new online exchange, Share, along with additional free custom application and development content from Cloud Sherpas.