Skip to main content

Challenge: Page Collections - Overview tab

In this section you'll continue working with page collections in SOW.

Goal​

In this exercise, you'll add more content to the incident overview tab in Service Operations Workspace. You've gotten a requirement to add SLAs to

Duplicate the Overview Variant​

  1. In UI Builder, click the icon at the very top left of your UIB window to go back to the UIB home page.

  2. Scroll down to page collections and search SOW.

  3. In the list that comes up, choose SOW - Record tabs left.

  4. Change your app scope to Incident Management for Service Operations Workspace.

  5. Mouse over the Incident Overview SNC variant, choose the three vertical dots icon on the far right, and choose Duplicate variant.

  6. Name it Incident Overview SNC Acme copy and choose Create.

  7. You'll see a green success message with a button on the far right to Open in editor. Click that button.

  8. Click the Settings pill at the top of the page, change the Order to 0, and Save.

Build out the Page

Now you have an editable version of this page to which you can add things.

Add and style a new container​

  1. Click the Editor pill at the top to switch back to the editing view.

  2. Set the following Test values.

    • Table: incident

    • Sys ID: INC0000015

  3. Find the Summary Container in the content tree on the left, right-click, and choose Add after.

  4. Choose the Layouts tab and add a Flexbox in the Advanced section.

  5. Choose None for the preset in the configuration section on the right.

  6. Click the (i) icon to the right of Container 2 on the right, rename it to the following, and choose Apply:

    • Component label: SLA Container

    • Component ID: sla_container

  7. In the Styles tab, set the following values:

    • Min. H: (click px and use Choose custom) fit-content

    • Padding: 20px (click the Padding link and use Choose custom)

    • Background: Brand neutral

    • Border: (leave defaults)

      • Thickness: 1 px

      • Type: Solid

      • Color: Neutral 3

      • Corner shape: Less rounded

Add a data resource​

Now you'll add a Look up multiple records data resource to grab task sla record associated to the incident.

  1. In the Data and scripts panel, mouse over data resources line, choose the + icon, choose Look up multiple records, and choose Add.

  2. Rename the data resource:

    • Data resource label: Look up Task SLAs

    • Data resource ID: look_up_task_slas

  3. FIll out the data resource Configure panel as follows:

    • Table: Task SLA

    • Edit conditions:

      • <data binding> Task | is | Data resource > record > sysId

    • Return fields:

      • Business elapsed percentage

      • Has breached

      • SLA Definition

    • Order by: Created

    • Sort type: desc

    • Max results: 10

  4. Close the data resource window.

  5. Save the page.

Show the Task SLAs​

  1. Choose + Add component under SLA Container in the content tree and add a Heading component.

  2. Remove the preset using the preset dropdown.

  3. Rename the component to the following:

    • Component label: SLA Heading

    • Component ID: sla_heading

    The more components that are on a page, the more important it is to rename them so they make sense when you're looking at the content tree. I also like to keep the original name of the component in the name so I remember what type of component it is. Some components look pretty similar.

  4. Configure the component as follows:

    • Style: Header-secondary

    • Label: SLA

  5. In the content tree, right-click on SLA Heading and choose Add after.

  6. Choose Repeater and choose None for the preset in the config panel.

  7. Choose data binding for the Data array property to bring up the visual data binding window and choose: Data resource > look_up_task_slas > results and click Apply.

  8. Click into the Styles tab and choose Enable styles, then adjust these styles:

    • Direction: Row

  9. Add a Highlight value component after the stylized text component in your repeater.

  10. Choose None for the preset and fill out the config panel as follows:

    • Label: <data binding>

      1. Choose Formulas and choose CONCAT

      2. In value1 choose Data types > Repeater > value > business_percentage > displayValue

      3. In the second value, double-click and type "%"

      4. Click Apply.

    • Variant: Primary

    • Color: <data binding>

      1. Choose Formulas and choose IF

      2. In if choose Data types > Repeater > value > has_breached > value

      3. In then, double-click and type "critical"

      4. In else, double-click and type "info"

      5. Click Apply.

  11. Save the page.

Test

Open Service Operations Workspace and open up INC000019 from the open incidents list and see the SLA percentage.