Service portal Auto expand Order guide's Include Items on Choose option tab

kavyashree1 · ‎01-21-2019

Hi Team,

We have upgraded to London. As per London version, Service portal Order guide widget collapse/minimizes the Include Items by default on choose option. But we need to make the Include items expand by default.

Is there any possibility of updating service now order guide widget to expand Include Items by default. We have already cloned the OOB widget and trying to update.

Don Pfister1 · ‎01-29-2019

I disliked the collapsed items as well. It took a good chunk of time to figure this out. My Angular is a bit rusty 🙂

Make a clone of the SC Order Guide widget to work on. Edit that clone and in the HTML template section, you need to make 2 changes.

Search for " <uib-accordion close-others="true">" and change the value to false. This will allow more than one accordion item to be open at a time.

In the line directly below that:

<uib-accordion-group class="accordion-header b" template-url="group-template.html" ng-init="initAttachmentCallbacks($index);" ng-repeat="item in includedItems track by item.sys_id | orderBy: 'order'" id="{{::item.sys_id}}" is-open="item.isOpen">

change the last value to true so the whole line reads:

<uib-accordion-group class="accordion-header b" template-url="group-template.html" ng-init="initAttachmentCallbacks($index);" ng-repeat="item in includedItems track by item.sys_id | orderBy: 'order'" id="{{::item.sys_id}}" is-open="true">

Hope this helps

Don

View solution in original post

Richard P · ‎03-02-2020

There is a page called sc_cat_item_guide

replicate that, and use that one! replacing the OOB widget for your new one

Sanket Kutwal · 3 weeks ago

Actually just to clear all the doubts I'm posting step by step process from End-to-End Guide: Auto-Expanding Order Guide Items in Service Portal:

The Challenge:

Standard Catalog Client Scripts using jQuery or DOM manipulation are often blocked by ServiceNow’s "Isolate Script" security (Strict Mode). Even with "Isolate Script" unchecked, system-wide properties often prevent these scripts from working reliably.

The Solution: Widget Cloning & Modification

The most robust way to achieve this is by cloning the out-of-the-box (OOTB) SC Order Guide widget and modifying the accordion logic.

Step 1: Clone the Widget

Go to Service Portal > Widgets and open the widget with ID widget-sc-order-guide-v2.
Click Clone Widget and name it (e.g., SC Order Guide - Custom Expand).
Crucial: Give your new widget a unique ID (e.g., sc-order-guide-custom-expand). A blank ID will prevent the widget from being selectable in Page Designer.

Step 2: Modify the Body HTML Template

In the cloned widget, locate the accordion logic and apply these two changes:

Allow multiple items to stay open:
- Find: <uib-accordion id="id-accordion" close-others="true">
- Change to: <uib-accordion id="id-accordion" close-others="false">
Force items to start in the expanded state:
- Find: is-open="item.isOpen" (inside the <uib-accordion-group> tag)
- Change to: is-open="true"

Step 3: Modify the Server Script (Optional but Recommended)

To ensure the form fields load immediately without a "delay" when the accordion opens:

In the Server Script, look for: item.delayView = true;
Change it to: item.delayView = false;

Step 4: Swap the Widget in Page Designer

Navigate to your portal page (usually sc_cat_item_guide) and open Page in Designer.
Delete the OOTB SC Order Guide widget.
Search for your new widget by its ID or Name and drag it into the same container.

If you find this answer helpful, don't forget to give it a thumbs up! 🙂