Create a new summary status in a work order case and verify that the newly added summary status is visible in the Pega Field Service Dispatcher portal. Summary status is displayed in the left panel of the Pega Field Service Dispatcher portal. For example, Dispatched, In-progress.

Perform this task to create a new summary status. The following task shows an example of creating a new Deferred summary status:

1. Create a new property with the status name Deferred in the @baseclass class:

   1. In the navigation pane of Dev Studio, click RecordsData ModelProperty.

   2. Click Create.

   3. On the Create Property tab, in the Property Record Configuration section, enter a property label.

   4. In the Context section, in the Apply to list, select @baseclass.

   5. Click Create and open.

2. Override the WorkOrderStatus property in your application and add the new summary status to the work order status prompt list:

   1. In the navigation pane of Dev Studio, click RecordsData ModelProperty.

   2. Select the WorkOrderStatus property with the Index-PegaFSM-Data-Appointment class.

   3. In the Display and validation section, in the Table type list, select Prompt List.

   4. In the Prompt values section, click Add and enter the following values in the Standard value and Prompt value fields:

Standard value	Prompt value
DEFERRED	DEFERRED

3. Override the PopulateStatusKeys data transform in your application and add a status key with the new summary status:

   1. In the navigation pane of Dev Studio, click RecordsData ModelData Transform.

   2. Select the PopulateStatusKeys data transform with the Code-Pega-List class.

   3. On the Definition tab, click Add and enter the following values in the Action, Target, Relation, and Source fields:

Action	Target	Relation	Source
Set	.StatusKey(DEFERRED)	equal to	"DEFERRED"

4. Override the SetFWJobCountByStatus data transform and populate the count of the new summary status:

   1. In the navigation pane of Dev Studio, click RecordsData ModelData Transform.

   2. Select the SetFWJobCountByStatus data transform with the Code-Pega-List class.

   3. On the Definition tab, click Add and enter the following values in the Action, Target, Relation, and Source fields:

Action	Target	Relation	Source
When	@equalsIgnoreCase (Param.DisplayStatus, D_FSM_WorkOrderStatuses .StatusKey(DEFERRED))	-	-
Set	.DEFERRED	equal to	.pySummaryCount(1)

5. Create a new skin for the Pega Field Service Dispatcher portal and create a background mixin in the new skin if you want to add a new color for the status:

   Note: You can reuse an existing skin that is available in that implementation layer.

   1. In the navigation pane of Dev Studio, click RecordsUser InterfaceSkin.

   2. Click Create.

   3. On the Create Skin tab, in the Skin Record Configuration section, enter a skin label.

      Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.

   4. Click Create and open.

   5. On the Mixins tab, in the Background section, click Create a new mixin and complete the mixin fields to create a background mixin.

      Mixins are reusable style patterns that define the typography, border, and background styles of UI components in your application. By using mixins, you can ensure consistency across the user interface, maximize re-use, and minimize future development effort.

      Note: You can also select one of the existing background mixins that are available in the Pega Field Service Dispatcher portal.

   6. Click Save.

   For more information on skins and mixins, see Skins.

6. Override the dispatcher_portal_style_extension.css file to add a CSS for the background color using the mixin:

   1. In the navigation pane of Dev Studio, click RecordsTechnicalText File.

   2. Select the dispatcher_portal_style_extension.css file.

   3. On the Main tab, enter the following code in the text box:

      work-status-content .flex.DEFERRED > .flex.work-status-count > .badge_text { background: $mx-exception_status-background-color; } .vis-item-status-deferred { background-color: $mx-deferred_status-background-color; }

7. Override the DispatcherConstantsController section to add the status to the enum:

   1. In the navigation pane of Dev Studio, click RecordsUser InterfaceSection.

   2. Select the DispatcherConstantsController section.

   3. On the HTML tab, add a color of your choice to the existing HTML source after window.statusEnum as mentioned in the following code:

      "DEFERRED": { "code": '<p:r n="D_FSM_WorkOrderStatuses.StatusKey.DEFERRED" />', "label": '<p:r n="D_FSM_WorkOrderStatuses.StatusKey.DEFERRED" />', "color" : "#B50079" }

8. Override the DispatcherConstantsController section to update the badge color of your choice in the Work Order Details section in the Pega Field Service Dispatcher portal:

   1. In the navigation pane of Dev Studio, click RecordsUser InterfaceSection.

   2. Select the DispatcherConstantsController section.

   3. On the HTML tab, add a color of your choice to the existing HTML source as mentioned in the following code:

      .DEFERRED .badge-bg { background-color: #B50079; }

9. Create a binary file for the image to be visible in the work order in the Pega Field Service Dispatcher portal's Gantt chart for the required status with status name:

   1. In the navigation pane of Dev Studio, click RecordsTechnicalBinary File.

   2. Click Create.

   3. On the Create Binary File tab, in the Binary File Record Configuration section, enter a file label (for example, Deferred), app name (for example, webwb), and file extension type (for example, .svg).

   4. Click Create and open.

   5. To upload the image to the Pega Field Service Dispatcher portal's Gantt chart, click Upload file and complete the upload process.

   6. Click Save.