Add Change Request Count to Problem Impact in Service Operations Workspace

[Alka_Chaudhary]

In Service Operations Workspace, the Problem Overview -> Impact section shows counts for related records such as Incidents and Tasks. However, Change Requests are not shown out of the box.

In this article, we’ll walk through how to add the count of related Change Requests to the Problem Overview Impact section, matching the same behavior and UI pattern used by other impact cards.

---

Use Case

• Display related Change Request count on the Problem Overview → Impact section

• Works in Service Operations Workspace

• Uses UI Builder, Data Resources, and Client Script

• No customization to backend tables required

---

Step 1: Open UI Builder

1. In the Application Navigator, search for UI Builder

2. Open UI Builder

3. Navigate to the Experience tab

4. Search for and open Service Operations Workspace

---

Step 2: Locate the Problem Overview Page

1. In the Pages list, search for:
   Prb Overview Viewport SNC

2. Open the page

3. Under the Body tab, select Section Viewport on the left side

4. You will see multiple subpages listed on the right

---

Step 3: Copy the Impact Subpage

1. Open Prb Overview Impact SNC

2. Create a copy of this page

3. Deactivate the OOB (out-of-box) page

4. Use your copied page for customization

This ensures your changes are upgrade-safe.

---

Step 4: Add a Data Resource for Change Requests

Add Data Source

1. From the left sidebar, add a Data Resource

2. Configure the data source with the following details:

Data Resource Configuration

• Table: change_request

• When to evaluate: As required (based on page load or state)

• Condition:

  • Field: parent

  • Operator: is

  • Value: Bind to props → sys_id

This ensures only Change Requests related to the current Problem record are fetched.

3. Apply and save the condition

Once configured, you should be able to see the data returned in pill view.

---

Step 5: Update the Client Script (set cardData)

Now we need to update the client script to inject the Change Request card into the Impact section.

Open Client Script

1. Open the Client Script associated with the Impact section

2. Locate the set cardData logic

3. Update the script as shown below

---

Updated Client Script Code

/**
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 * @param {any} params.imports
 * @param {ApiHelpers} params.helpers
 */
function handler({
    api,
    event,
    helpers,
    imports
}) {
    if (api.data.sow_problem_section_related_lists.output &&
        api.data.sow_problem_section_related_lists.output.result) {

        let cardData = JSON.parse(
            JSON.stringify(api.data.sow_problem_section_related_lists.output.result)
        );

        // Fetch Change Request sys_ids from the data resource
        var getChangeRequestID = api.data.look_up_multiple_records_1.results;

        // Extract unique sys_id values
        var uniqueValuesArray = getChangeRequestID.map(function(item) {
            return item._row_data.uniqueValue;
        });

        // Create Change Request card
        var changeRequest = {
            "count": 0,
            "fixedQuery": "",
            "name": "change_request",
            "query": "sys_idIN" + uniqueValuesArray,
            "table": "change_request",
            "title": "Change Requests",
            "view": "sow_problem_overview"
        };

        // Add Change Request card to existing cards
        cardData.push(changeRequest);

        // Build countQuery for each card
        cardData = cardData.map(card => {
            const { fixedQuery, query } = card;
            return {
                ...card,
                countQuery: [fixedQuery, query].filter(q => q).join("^")
            };
        });

        // Update state
        api.setState("cardData", cardData);
    }
}

---

Step 6: Understand the Key Logic

Data Source Reference

var getChangeRequestID = api.data.look_up_multiple_records_1.results;

• look_up_multiple_records_1 is the data resource you created earlier

• It fetches all Change Requests where:

  parent = current Problem sys_id
  

---

Extract sys_ids

var uniqueValuesArray = getChangeRequestID.map(function(item) {
    return item._row_data.uniqueValue;
});

• Extracts the sys_id of each Change Request

• Used to dynamically build the query

---

Build the Impact Card

query: "sys_idIN" + uniqueValuesArray

• This query is later used to:

  • Calculate the count

  • Open the list view when clicked

---

countQuery Logic

countQuery: [fixedQuery, query].filter(q => q).join("^")

• Combines OOB and custom queries

• Ensures count behavior matches other Impact cards

---

Step 7: Save and Test

1. Apply and save all changes in UI Builder

2. Open Service Operations Workspace

3. Navigate to a Problem record

4. Go to the Overview → Impact section

You will now see the Change Requests card showing the count of related Change Requests, consistent with other impact metrics.

---

Final Result

• Change Request count appears in Problem Impact Overview

• Clicking the card opens the filtered Change Request list

• UI and behavior are consistent with OOB Service Operations Workspace design

---

Conclusion

By leveraging UI Builder data resources and client-side state management, you can easily extend the Problem Overview Impact section to include additional related records like Change Requests—without altering core platform behavior.

This approach is clean, upgrade-safe, and fully aligned with Workspace architecture.

[SUBHAM_SHAW_SN]

Informative