NOTE: MY POSTINGS REFLECT MY OWN VIEWS AND DO NOT NECESSARILY REPRESENT THE VIEWS OF MY EMPLOYER, ACCENTURE.
DIFFICULTY LEVEL: BEGINNER
Assumes basic level knowledge and/or familiarity of Scripting in 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. Fill in the form with the following:
Name: sci_top_of_page_link
NOTE: Add a prefix of "sci" to the "Name" field to identify it as a Service Catalog Item variable.Add a prefix of "sci" to the "Name" field to identify it as a Service Catalog Item variable.
Description: Embed this UI Macro in a Service Catalog Item to jump to the top of the form.
XML: Add the <a href...> line to the template XML. Your XML should look like the following:
<?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.
f. You're now done with the UI Macro! It should look like this:
g. Click the Submit button. This will take you back to the UI Macro list view.
h. In the list view, double click and set the Category to Service Catalog. This identifies it as a Service Catalog UI Macro and makes it available to Service Catalog Item construction.
2. Create a new Service Catalog Variable
- Navigate to Maintain Items. This will display the list view of all Catalog Items.
- Filter for and choose the Application Server (Standard) item. This will display the Catalog Item form.
- Scroll to the bottom of the form and click on the Variables tab.
- Click on the New button. This will display the New Variable form.
- Fill in the following fields as designated below, leaving the rest as default.
Type: Custom
Order: 1999
Under the Question tab:
- Question: Go to Top of Page
- Name: sci_go_to_top_of_page
Under the Type Specifications tab:
- Macro: sci_top_of_page_link
NOTE: When you pick the Custom type, the "Macro" field will appear under the Type Specifications tab. Click the magnifying glass to bring up a list of Macros and pick the "sci_top_of_page_link" Macro that you created in the first step.
f. Click on the Submit button to save your Variable.
g. This will return you to the Application Server (Standard) form. Scroll to the bottom and you will see your new UI Macro variable listed in the Variables tab list view.
NOTES: 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!
3. 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. From the Application Server (Standard) item form click the Try It button
b. Resize the browser window so that the Goto top of page link no longer shows (if it did) and there is a vertical scrollbar to the right of the window. You want to be able to scroll down to the bottom of the form.
c. Click on the Goto top of page link. The browser window should immediately scroll to the top.
Now your new top of page variable is unit tested and ready for deployment!
Enjoy!
Steven Bell.
If you find this article helps you, don't forget to log in and mark it as "Helpful"!
NOTE: ON APRIL 1, 2016 ACCENTURE COMPLETED THE ACQUISITION PROCESS OF CLOUDSHERPAS. AT THAT TIME THE CLOUDSHERPAS BLOG SITES WERE DOWNED FOREVER.
THIS IS THE RE-PUBLICATION OF MY ARTICLE FROM June 10, 2014 ON THE CLOUDSHERPAS SERVICENOW ADMIN 101 BLOG.
Re-published on: 05-29-2016 08:17 AM
I updated the code and brought the article into alignment with my new formatting standard.
1 Comment
