This is my first LWC components developed and I am using picklist and dynamic search input. Based upon the picklist value, am displaying the records using LWC dataTable.
Scenario: If I select the checkbox in Lightning datatable for the records rendered in the page one and move to page two based upon selection of picklist and again select the checkbox in page 2 and comeback to page 1. The selected checkbox in page 2 gets unchecked. However the page 1 is not affected, I could still see the selected checkbox in page 1.
Note: Similar thing happens for dynamic search. The table is not maintaining the state of selected checkbox.
I tried to have the selected-rows to maintain the state but for some reason it is not working out. I also tried other work around but it did not work for my case. I am not sure how to implement it further.
.HTML
<template>
<div class="slds-p-around_medium">
<lightning-button label="Open Task Library" variant="brand" onclick={openmodal}></lightning-button>
</div>
<template if:true={openmodel}>
<div class="demo-only" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<div class="slds-p-around_medium lgc-bg">
<lightning-tile label="Logged in user role" class="slds-float_right">
{roleName}
</lightning-tile>
</div>
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" size="medium">
</lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Task Library</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-size--1-of-2 slds-p-around--small">
<lightning-combobox name="progress" value={value} placeholder="Select Filter"
options={options} onchange={handleFilterChange}>
</lightning-combobox>
</div>
<div class="slds-size--1-of-2 slds-p-around--small">
<lightning-input variant="label-hidden" label="Search Record" type="search"
onchange={handleSearchTask} placeholder="Search for the Task">
</lightning-input>
</div>
<div class="slds-size--1-of-1 slds-p-around--small">
<lightning-card title="List of Tasks">
<lightning-datatable data-id="lightning-datatable" data={tasksFromLibrary}
columns={columns} key-field="Id" onrowselection={rowSelection1}>
</lightning-datatable>
</lightning-card>
</div>
</div>
<footer class="slds-modal__footer">
<lightning-button variant="brand" label="Create Task" title="Create Task" onclick={handleSave}>
</lightning-button>
<lightning-button label="Close" variant="brand" onclick={saveMethod}
class="slds-m-left_x-small"></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</template>
</template>
.JS
import { LightningElement, track, wire, api } from "lwc";
import { getRecord } from "lightning/uiRecordApi";
import getRoleId from "@salesforce/apex/getTasks2.getRoleId";
import getSearchedTask from "@salesforce/apex/getTasks2.getSearchedTask";
import getSaveTask from "@salesforce/apex/getTasks2.getSaveTask";
import getRoleName from "@salesforce/apex/getTasks2.getRoleName";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import ComponentName from "@salesforce/schema/PlatformStatusAlertEvent.ComponentName";
import USER_ID from "@salesforce/user/Id";
export default class TaskLibraryDatatableV2 extends LightningElement {
@api recordId;
@track tasksFromLibrary;
@track tasksFromLibraryUnchanged;
@track selectedFilter = [];
@track selectedTaskObj = [];
@track openmodel = false;
@track onLoadRoleBasedTask;
@track selectedRows = [];
value = "Role based task";
@track error;
@track name;
@track roleName;
@track supportRequest;
@track workSubStateName;
@wire(getRoleName, {})
wireRoleName({ error, data }) {
if (error) {
this.roleName = undefined;
} else if (data) {
this.roleName = data;
}
}
@wire(getRecord, {
recordId: "$recordId",
fields: ["Support_Request__c.Name__c"]
})
wiredRecord({ error, data }) {
if (error) {
let message = "Unknown error";
if (Array.isArray(error.body)) {
message = error.body.map((e) => e.message).join(", ");
} else if (typeof error.body.message === "string") {
message = error.body.message;
}
this.dispatchEvent(
new ShowToastEvent({
title: "Error loading contact",
message,
variant: "error"
})
);
} else if (data) {
this.supportRequest = data;
this.workSubStateName = this.supportRequest.fields.Name__c.value;
}
}
openmodal() {
this.openmodel = true;
this.onLoadRoleBasedTask = true;
this.handleTaskTable();
}
closeModal() {
this.openmodel = false;
}
saveMethod() {
this.closeModal();
}
@api
handleTaskTable() {
if (this.onLoadRoleBasedTask) {
this.onLoadRoleBasedTask = false;
this.selectedFilter = "Role based task";
} else {
}
getRoleId({
workSubState: this.workSubStateName,
taskType: this.selectedFilter,
userRoleDeveloperName: this.roleName
})
.then((result) => {
this.tasksFromLibrary = result;
this.tasksFromLibraryUnchanged = result;
this.error = undefined;
})
.catch((error) => {
this.error = error;
this.tasksFromLibrary = undefined;
});
}
get options() {
return [
{ label: "Role Based Task", value: "Role based task" },
{ label: "All Tasks", value: "All Task" }
];
}
@track columns = [
{ label: "Tasks", fieldName: "Label", type: "text", sortable: true },
{
label: "Task Type",
fieldName: "Task_Type__c",
type: "text",
sortable: true
}
];
handleFilterChange(event) {
this.selectedFilter = event.detail.value;
this.handleTaskTable();
}
handleSearchTask(event) {
const myValue = event.detail.value;
console.log("Current value of the input: " + event.target.value);
getSearchedTask({
searchTask: myValue,
taskType: this.selectedFilter,
userRoleDeveloperName: this.roleName,
workSubStateName: this.workSubStateName
})
.then((result) => {
console.log("result==" + result);
if (result === null) {
// const taskBasedFilter = this.tasksFromLibraryUnchanged;
this.tasksFromLibrary = [];
for (let i = 0; i < this.tasksFromLibraryUnchanged.length; i++) {
this.tasksFromLibrary.push(this.tasksFromLibraryUnchanged[i]);
}
} else {
this.tasksFromLibrary = result;
this.error = undefined;
}
})
.catch((error) => {
this.error = error;
this.tasksFromLibrary = undefined;
});
}
@track selectedTaskObj1 = [];
//@track selectedAllTask = [];
rowSelection1(event) {
let el = this.template.querySelector("lightning-datatable");
const selectedRows = el.getSelectedRows();
console.log("selected row length==" + selectedRows.length);
console.log("selected row=="+selectedRows);
this.selectedTaskObj1 = [];
for (let i = 0; i < selectedRows.length; i++) {
this.selectedTaskObj1.push(selectedRows[i]);
}
console.log(
"==selected task stringified---" + JSON.stringify(this.selectedTaskObj1)
);
}
handleSave(event) {
getSaveTask({
selectedTaskObj: JSON.stringify(this.selectedTaskObj1),
workSubState: this.recordId
})
.then((result) => {
this.error = undefined;
console.log("check" + this.selectedTaskObj1);
// this.selectedTaskObj1.splice(0, this.selectedTaskObj1.length);
this.template.querySelector("lightning-datatable").selectedRows = [];
this.openmodel = false;
console.log("check1" + this.selectedTaskObj1);
this.dispatchEvent(
new ShowToastEvent({
message: "Tasks created sucessful",
variant: "success"
})
);
this.dispatchEvent(new CustomEvent("recordChange"));
})
.catch((error) => {
this.error = error;
});
}
}
.Controller
public with sharing class getTasks2 {
public getTasks2(){
}
@AuraEnabled(cacheable=true)
public static String getRoleName(){
String userRoleDeveloperName = [Select id, UserRole.developerName FROM User where id = : UserInfo.getUserId()].UserRole.developerName;
return userRoleDeveloperName;
}
public static List<SR_Task_Library__mdt> pickListTask;
public static List<SR_Task_Library__mdt> listOfTask = new List<SR_Task_Library__mdt>();
public static List<SR_Task_Library__mdt> listOfAllTask = new List<SR_Task_Library__mdt>();
@AuraEnabled(cacheable=true)
public static List<SR_Task_Library__mdt> getRoleId(String workSubState, String taskType, String userRoleDeveloperName){
System.debug('workSubState==='+workSubState);
System.debug('taskType=='+taskType);
pickListTask = getTasksFromLibrary(userRoleDeveloperName, workSubState, taskType);
return pickListTask;
//return (List<SR_Task_Library__mdt>) getTasksFromLibrary(userRoleDeveloperName, workSubState);
}
@AuraEnabled(cacheable=true)
public static List<SR_Task_Library__mdt> getSearchedTask(String searchTask, String taskType, String userRoleDeveloperName, String workSubStateName){
String soql;
if(!String.isBlank(searchTask)){
if(taskType == 'Role based task'){
soql = 'Select Id,Label,Task_Name__c,Task_Type__c,SR_Work_Sub_State__r.Id, SR_Work_Sub_State__r.Work_Sub_State__c from SR_Task_Library__mdt Where Label LIKE \'%' + searchTask + '%\' AND SR_Work_Sub_State__r.Label LIKE \'%' + workSubStateName + '%\' AND Id in (Select SR_Task_Library__c from SR_Role_Task_Mapping__mdt Where Role_Developer_Name__c LIKE \'%' + userRoleDeveloperName +'%\')';
System.debug('soql role based task=='+soql);
}else if(taskType == 'All Task'){
soql = 'Select Id,Label,Task_Name__c,Task_Type__c from SR_Task_Library__mdt';
soql = soql + ' where Label LIKE \'%' + searchTask +'%\'';
System.debug('soql all task=='+soql);
}
System.debug('==soql=='+soql);
pickListTask = database.query(soql);
return pickListTask;
}else
return null;
}
public static List<SR_Task_Library__mdt> getTasksFromLibrary(String userRoleDeveloperName, String workSubStateName, String taskType){
List<SR_Task_Library__mdt> somethingSample = new List<SR_Task_Library__mdt>();
if(taskType == 'Role based task'){
somethingSample = roleBasedTask(userRoleDeveloperName, workSubStateName);
}else if(taskType == 'All Task'){
somethingSample = getAllTask();
}
return somethingSample;
}
public static List<SR_Task_Library__mdt> roleBasedTask(String userRoleDeveloperName, String workSubStateName){
listOfTask = [Select Id,Label,Task_Name__c,Task_Type__c,SR_Work_Sub_State__r.Id,
SR_Work_Sub_State__r.Work_Sub_State__c
from SR_Task_Library__mdt Where
SR_Work_Sub_State__r.Label =:workSubStateName AND
Id in
(Select SR_Task_Library__c from SR_Role_Task_Mapping__mdt
Where Role_Developer_Name__c =:userRoleDeveloperName) ORDER BY Task_Name__c ASC];
return listOfTask;
}
public static List<SR_Task_Library__mdt> getAllTask(){
listOfAllTask = [Select Id,Label,Task_Name__c,Task_Type__c,SR_Work_Sub_State__r.Id,
SR_Work_Sub_State__r.Work_Sub_State__c
from SR_Task_Library__mdt ORDER BY Task_Name__c ASC LIMIT 100];
return listOfAllTask;
}
@AuraEnabled
public static void getSaveTask(List<SR_Task_Library__mdt> selectedTaskObj,String workSubState){
Set<SR_Task_Library__mdt> taskLibrarySet = new Set<SR_Task_Library__mdt>();
taskLibrarySet.addAll(selectedTaskObj);
List<Task> listTaskCreation = new List<Task>();
List<Support_Task__c> listMilestoneTask = new List<Support_Task__c>();
List<Event> listEventCreation = new List<Event>();
for(SR_Task_Library__mdt taskSelected : taskLibrarySet){
Task taskObj = new Task();
taskObj.Subject = taskSelected.Task_Name__c;
taskObj.Whatid = workSubState;
listTaskCreation.add(taskObj);
if(taskSelected.Task_Type__c == 'Time In Motion'){
Support_Task__c milestoneTask = new Support_Task__c();
milestoneTask.Name = taskSelected.label;
milestoneTask.Task__c = taskSelected.Task_Name__c;
milestoneTask.Status__c = 'Open';
milestoneTask.Work_Sub_State__c = taskSelected.SR_Work_Sub_State__r.Work_Sub_State__c;
milestoneTask.Support_Request__c = workSubState;
milestoneTask.RecordTypeId = '01219000000VwyLAAS';
listMilestoneTask.add(milestoneTask);
}else if(taskSelected.Task_Type__c == 'Time Stamp'){
Support_Task__c milestoneTask = new Support_Task__c();
milestoneTask.Name = taskSelected.label;
milestoneTask.Task__c = taskSelected.Task_Name__c;
milestoneTask.Status__c = 'Completed';
milestoneTask.Support_Request__c = workSubState;
milestoneTask.Work_Sub_State__c = taskSelected.SR_Work_Sub_State__r.Work_Sub_State__c;
milestoneTask.RecordTypeId = '01219000000VwyQAAS';
listMilestoneTask.add(milestoneTask);
}
}
Insert listTaskCreation;
Insert listMilestoneTask;
}
}
