Extending related tasks

This topic describes the steps to extend the related tasks.

Most of the summary screens in the Sterling Store Engagement UI have related tasks associated with them. These related tasks are displayed by using the RelatedTaskComponent component and the Related Tasks config file (rt-config.ts), which is specific to a component.

The RelatedTaskComponent (<WORKSPACE>/store-frontend/src/app/shared/components/related-task/RelatedTaskComponent) has a parentComponentId attribute, which holds the componentId of the parent component where the RelatedTaskComponent is included. For example:

<isf-related-task [relatedTasksConfig]="shipmentSummaryRTConfig" [route]="activeRoute" 
[entityModel]="relatedTaskEntityModel" [parentComponentId]="'receiveInventoryContainerListSummary'">
</isf-related-task>

To extend any related task for a given component, the corresponding related task configuration file must be extended and this newly added configuration file must be registered by using RelatedTasksService (<WORKSPACE/store-frontend/src/app/core/services/RelatedTasksService). The extended related task configuration file must maintain the same structure as that of the application-provided configuration file. The getRelatedTasksConfiguaration method of the configuration file must return the object containing the tasks array where each element is a task configuration and the taskId attribute in the task configuration must never be overridden for the existing tasks.

Table 1. Key attributes of the tasks configuration
Attribute	Description
`taskId`	Unique Identifier of a task. This must not be overridden for the application-provided tasks.
`taskName`	Bundle key of the task name that is displayed on the UI.
`isDisabled`	Flag to enable or disable a task. Valid values are `true` or `false`.
`isHidden`	Flag to hide or show a task. Valid values are `true` or `false`.
`resourcePermission`	Resource permission associated with the task.
`sequence`	Sequence number of the task in the order it must appear in the UI.
`action`	On-click handler of the related task.

Example(rt-config.ts) :
  
  
import { Injectable } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Injectable()
export class ShipmentSummaryExtnRTConfig {

    constructor(
        private router: Router,
        private activeRoute: ActivatedRoute
    ) { }

    public getRelatedTasksConfiguaration() {

        const startViewReceipts = function (this, entityModel, activeroute) {
            this.router.navigate(['./../../receipt-list', entityModel.shipmentKey], { relativeTo: activeroute });
        };

        const ShipmentSummaryRelatedTasksConfig = {
            'tasks': [
                {
                    'taskId': 'viewReceipts_extn',
                    'taskName': 'view receipts extn',
                    getTask: function (shipmentDetails) {
                        const task = {
                            'taskId': 'viewReceipts_extn',
                            'taskName': 'relatedTask.viewReceipts_extn',
                            'isDisabled': false,
                            'isPrimary': false,
                            'isHidden': false,
                            'isDefault': false,
                            'resourcePermission': 'ISF000021',
                            'sequence': 10,
                             action: startViewReceipts
                        };
                        return task;
                    }
                },
               
                {
                    'taskId': 'receiveNotes',
                    'taskName': 'receive Notes',
                    getTask: function (shipmentDetails) {
                        const task = {
                            'taskId': 'receiveNotes',
                            'isHidden': true
                        };
                        return task;
                    }
                }
            ]
        };
        return ShipmentSummaryRelatedTasksConfig;
    }

}

Note: Each object in the tasks array returned by the getRelatedTasksConfiguaration() method must have the taskId attribute. Also, the task returned by the getTask() method must have taskId.

In the extended related task configuration file, the task with the viewReceipts_extn taskId is newly added and it has the complete configuration for the task. The task with the receiveNotes taskId is an existing task and only the isHidden attribute of the task is changed through extension so that the related task does not appear on the UI.

Registration of the newly added configuration file by using RelatedTasksService must be done in the module extension file. The value of the parentComponentId attribute used in the isf-related-task component must be used as key to register the configuration file. In the following example : receiveInventoryContainerListSummary is the parentComponentId and ShipmentSummaryExtnRTConfig is the extended related task configuration file.

import { NgModule } from '@angular/core';
    import { ShipmentSummaryExtnRTConfig } from './shipment-summary-page/shipment-summary-extn-rt-config';
    import { RelatedTasksService } from '@sim-core/services/related-tasks.service';
    @NgModule({
      imports: [],
      entryComponents: [],
      declarations: [],
      exports: [],
      providers: [ShipmentSummaryExtnRTConfig]
    })
    export class ReceiveInventoryExtensionModule {

       constructor(private shipmentSummaryExtnRTConfig: ShipmentSummaryExtnRTConfig) {
        RelatedTasksService.addRelatedTaskConfig('receiveInventoryContainerListSummary', shipmentSummaryExtnRTConfig);
      }

    }

Important: The out-of-the-box related tasks configuration file must never be modified. You must create a new configuration file to add a new related task or to modify the out-of-the-box related task configuration or handling. This new configuration file must also be registered by using RelatedTasksService as shown in the sample code.

Also,the related task action handlers might refer to data service for making API calls and data handling.The out-of-the-box related tasks configuration file has dedicated data service. This data service file must also never be modified for customization. If required, the extended related tasks configuration file must use a new data service file for customization.