Create a Custom Component for a Component Task

The assessment task Id and visit Id of a task are used to define a pageReference object, which is retrieved during initialization of the component and on pageReference updates. If your org has a namespace prefix set, use it to fetch the visit Id and the assessment task Id from the state parameter; otherwise use the default namespace c. Here’s an example of a component using the default namespace c.

Note Ensure that the new Lightning component updates the assessment task status of a visit.

\

Change the Task Status

Let’s take a look at how these approaches work.

Approach-1: When the custom component sends a request to the runtime application to update status.

Publish a message through componentTaskInput Lightning message channel with the following structure:

var message = {
assessmentTaskId: "0x00",
requestedStatus: "InProgress",
};

After the status is changed, a success message is published in the componentTaskOutput lightning message channel with following structure:

outputObject = {
assessmentTaskId: "0x000",
result: "Success"
}

Here’s the output object structure in this case:

outputObject = {
assessmentTaskId: "0x000",
result: "Failure"
errorMessage: “Respective error message”
}

Approach-2: When the status is changed and the runtime application is updated.

After the status is updated, publish a message through componentTaskInput lightning message channel with the following structure:

var message = {
assessmentTaskId: "0x000",
updatedStatus: "InProgress",
};

outputObject = {
assessmentTaskId: "0x000",
result: "Success"
}

Here’s the output object structure in this case:

outputObject = {
assessmentTaskId: "0x000",
result: "Failure"
errorMessage: “Respective error message”
}

Here’s a sample component that notifies the framework to update the status:

myAura.cmp

<aura:component implements="lightning:isUrlAddressable">
   <aura:attribute name="assessmentTaskId" type="String"/>
   <aura:attribute name="visitId" type="String"/>

   <aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChanged}"/>
   <aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChanged}"/>

   <c:myLWC assessmentTaskId="{!v.assessmentTaskId}" visitId="{!v.visitId}">
   </c:myLWC>
</aura:component>

myAuraController.js

({
   onPageReferenceChanged: function(cmp, event, helper) {
       var assessmentTaskId = cmp.get("v.pageReference").state.c__assessmentTaskId;
       var visitId = cmp.get("v.pageReference").state.c__visitId;
       cmp.set("v.assessmentTaskId",assessmentTaskId);
       cmp.set("v.visitId",visitId);
   },
})

myLWC.html

<template>
 <div class="slds-grid slds-grid_vertical">
   <div class="slds-col slds-p-top_large">
     <button class="slds-button slds-button_brand slds-align_absolute-center slds-size_1-of-1"   onclick={handleClickProgress}>Change Status to Progress</button>
   </div>
   <div class="slds-col slds-p-top_large">
     <button class="slds-button slds-button_brand slds-align_absolute-center slds-size_1-of-1" onclick={handleClickCompleted}>Change Status to Completed</button>
   </div>
 </div>
</template>

myLWC.js

import { LightningElement, api } from 'lwc';
import { APPLICATION_SCOPE, createMessageContext, publish, subscribe, unsubscribe } from 'lightning/messageService';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import inputChannel from '@salesforce/messageChannel/lightning__industries_componentTaskInput';
import outputChannel from '@salesforce/messageChannel/lightning__industries_componentTaskOutput';
export default class myLWC extends LightningElement {
 @api assessmentTaskId;
 @api visitId;
 messageContext = createMessageContext();
 outputSubscription = null;

 handleClickProgress() {
   this.changeStatus("InProgress");
 }

 handleClickCompleted() {
   this.changeStatus("Completed");
 }

 changeStatus(status) {
   var message = {
     assessmentTaskId: this.assessmentTaskId,
     requestedStatus: status,
     };
   publish(this.messageContext, inputChannel, message);
 }

 connectedCallback() {
   this.subscribeOutputChannel();
 }

 disconnectedCallback() {
   unsubscribe(this.outputSubscription);
   this.outputSubscription = null;
 }

 subscribeOutputChannel() {
   if (this.subscription) {
     return;
   }
   this.outputSubscription = subscribe(
     this.messageContext,
     outputChannel,
     (message) => this.handleOutputMessage(message),
     { scope: APPLICATION_SCOPE }
   );
 }

 handleOutputMessage(message) {
   // Check if the response message is meant for the current task.
   if(message.assessmentTaskId !== this.assessmentTaskId)return;
   if(message.result === "Success") {
     this.showToast("Success","Status updated","success");
   } else if(message.result === "Failure") {
     this.showToast("Failure",message.errorMessage,"error");
   }
 }


 showToast(title, message, variant) {
   const event = new ShowToastEvent({
       title,
       message,
       variant
   });
   this.dispatchEvent(event);
 }
}
m