End-to-End Guide: Auto-Expanding Order Guide Items in Service Portal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
yesterday
Many developers struggle with the requirement to have all catalog items in an Order Guide expanded by default on the "Choose Options" step. Standard Catalog Client Scripts using jQuery or DOM manipulation are often blocked by "Strict Mode" or "Isolate Script" security settings.
The most reliable solution is to clone the out-of-the-box (OOTB) SC Order Guide widget and modify the accordion logic directly.
Step 1: Clone the OOTB Widget
Navigate to Service Portal > Widgets and locate the widget named SC Order Guide (ID: widget-sc-order-guide-v2).
Open the record and click the Clone Widget button.
Crucial: Provide a unique ID for your new widget (e.g., sc-order-guide-expanded).
Note: Do not leave the ID blank. A unique ID is required for the system to identify and load the widget in the Page Designer.
Step 2: Update the Body HTML Template
In your cloned widget, modify the accordion behavior to force items to start in the expanded state:
Modify the Accordion Container: Find the line <uib-accordion id="id-accordion" close-others="true"> and change it to close-others="false". This allows multiple items to remain open simultaneously.
Modify the Item State: Find the attribute is-open="item.isOpen" (located inside the uib-accordion-group tag) and change it to is-open="true".
Step 3: Update the Server Script
By default, ServiceNow may delay rendering form fields until an item is manually expanded by a user. To ensure all variables appear immediately:
In the Server Script tab, locate the line: item.delayView = true;.
Change it to: item.delayView = false;.
Step 4: Swap the Widget on the Portal Page
Navigate to your Order Guide in the Service Portal.
Ctrl + Right-Click on the widget and select Page in Designer.
Delete the original SC Order Guide widget from the page layout.
From the Widgets sidebar, search for your custom widget by the ID or Name you created and drag it onto the page.
If you find this answer helpful, don't forget to give it a thumbs up! 🙂
