The example below generates a list of people from the AccountContactRelation (ACR) object. Each row contains an icon/link that opens a modal window to look at further details of each person. Included in the details I have generated a dual list box using values from the ACR.Roles field. I'd like to default values saved already that have been previously selected? I already have the previously selected values from the field in my data but Im struggling with figuring out where/how I need to convert the values to default option values? Hope this makes sense. All sugestions are appreciated. Thanks ahead of time. Screen shots below.
<template>
<!-- Lightning Data Table -->
<lightning-card title="People">
<lightning-datatable data={people}
columns={columns}
key-field="accountid"
hide-checkbox-column="true"
onrowaction={handleRowAction}></lightning-datatable>
</lightning-card>
<!-- Edit Record Modal Window -->
<template if:true={bShowModal}>
<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 slds-modal_large">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{record.firstname} {record.lastname}</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="c-container">
<h3 class="slds-section-title--divider">Personal Information</h3>
<lightning-layout multiple-rows="true">
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="First" value={record.firstname}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="Middle" value={record.middlename}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="Last" value={record.lastname}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="date" name="input2" label="Birth Date" value={record.birthdate}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="Cust Id" value={record.custId}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad">
<lightning-dual-listbox name="roles"
label="Roles"
size="3"
source-label="Available"
selected-label="Selected"
field-level-help="Select Role(s) for this person"
options={RolePicklistValues.data.values}
onchange={handleChange}
value={defaultOptions}></lightning-dual-listbox>
</div>
</lightning-layout-item>
</lightning-layout>
<h3 class="slds-section-title--divider">Residences</h3>
<template for:each={record.addressList} for:item="address">
<div key={address.key}>
<lightning-layout multiple-rows="true">
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="Custom Name" value={address.customname}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="Street" value={address.street1}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="Street 2" value={address.street2}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="City" value={address.city}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="State" value={address.state}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2">
<div class="custom-pad"><lightning-input type="text" label="Postal Code" value={address.postalcode}></lightning-input></div>
</lightning-layout-item>
</lightning-layout>
</div>
</template>
</div>
<!-- <dl class="slds-list_horizontal slds-wrap">
<dt class="slds-item_label slds-truncate" title="First Name:">First Name:</dt>
<dd class="slds-item_detail slds-truncate">{record.firstname}</dd>
<dt class="slds-item_label slds-truncate" title="Birth Date">Birth Date:</dt>
<dd class="slds-item_detail slds-truncate"><lightning-input type="date" name="input2" label="Date field with a predefined value" value={record.birthdate}></lightning-input></dd>
<dt class="slds-item_label slds-truncate" title="Type">Type :</dt>
<dd class="slds-item_detail slds-truncate">{record.Type}</dd>
<dt class="slds-item_label slds-truncate" title="Industry">Industry :</dt>
<dd class="slds-item_detail slds-truncate">{record.Industry}</dd>
<dt class="slds-item_label slds-truncate" title="Website">Website :</dt>
<dd class="slds-item_detail slds-truncate">{record.Website}</dd>
<dt class="slds-item_label slds-truncate" title="Rating">Rating :</dt>
<dd class="slds-item_detail slds-truncate">{record.Rating}</dd>
</dl> -->
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer">
<lightning-button variant="brand"
label="Close"
title="Close"
onclick={closeModal}
></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>
import { LightningElement, wire, track, api} from 'lwc';
import getpeople from '@salesforce/apex/Onboarding.getpeople';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACR_OBJECT from '@salesforce/schema/AccountContactRelation';
import ROLES_FIELD from '@salesforce/schema/AccountContactRelation.Roles';
export default class OnboardingPeople extends LightningElement {
@api recordId;
@api people = [];
@api cards = [];
@track record = {};
@track rowOffset = 0;
@track error;
@track bShowModal = false;
@track value;
@track columns = [
{
label: 'Action',
type: 'button-icon',
initialWidth: 75,
typeAttributes: {
iconName: 'action:edit',
title: 'Edit',
variant: 'border-filled',
alternativeText: 'Action'
}
},
{
label: 'First Name',
fieldName: 'nameUrl',
type: 'url',
typeAttributes: {label: { fieldName: 'firstname' },
target: '_blank'},
sortable: false
},
{
label: 'Last Name',
fieldName: 'lastname',
type: 'text',
sortable: false
},
{
label: 'Roles',
fieldName: 'roles',
type: 'text',
sortable: false
}
];
@wire(getObjectInfo, { objectApiName: ACR_OBJECT })
objectInfo;
//Hard coded Master Record Type Id - will not work without
@wire(getPicklistValues, { recordTypeId: '012000000000000AAA', fieldApiName: ROLES_FIELD}) //$objectInfo.data.defaultRecordTypeId
RolePicklistValues;
@track
defaultOptions = [];
@wire(getpeople,{recordId:'$recordId'})
wiredPeople({error, data}){
if(data){
this.people = data;
this.error = undefined;
} else if (error) {
this.people = undefined;
this.error = error;
}
}
handleChange(event) {
this.value = event.detail.value;
//const selectedOptionsList = event.detail.value;
//alert(`Options selected: ${selectedOptionsList}`);
}
// Row Action event to show the details of the record
handleRowAction(event) {
const row = event.detail.row;
this.record = row;
this.bShowModal = true; // display modal window
}
// to close modal window set 'bShowModal' tarck value as false
closeModal() {
this.bShowModal = false;
}
}
public with sharing class Onboarding {
@AuraEnabled(cacheable=true)
public static List<OnboardingPeopleResult> getpeople(String recordId) {
List<OnboardingPeopleResult> oprList = new List<OnboardingPeopleResult>();
OnboardingPeopleResult oprobj = new OnboardingPeopleResult();
for(AccountContactRelation acr : [select Id, AccountId, ContactId, Roles, Contact.Firstname,
Contact.Lastname, Contact.AccountId, Contact.Middlename, Contact.bdate__c
from AccountContactRelation
where AccountId =: recordId]){
oprobj = new OnboardingPeopleResult();
oprobj.accountid = acr.Contact.AccountId;
oprobj.firstname = acr.Contact.Firstname;
oprobj.lastname = acr.Contact.Lastname;
oprobj.middlename = acr.Contact.Middlename;
oprobj.nameUrl = '/' + acr.Contact.AccountId;
oprobj.birthdate = acr.Contact.bdate__c;
oprobj.roles = acr.Roles;
oprobj.custId = acr.ContactId;
OnboardingAddressResult[] aList = new OnboardingAddressResult[]{};
OnboardingAddressResult a1 = new OnboardingAddressResult();
a1.customname = 'Home';
a1.street1 = '15688 W. 189th St.';
a1.city = 'Seattle';
a1.state = 'WA';
a1.postalcode = '55555';
a1.key = 1;
aList.add(a1);
OnboardingAddressResult a2 = new OnboardingAddressResult();
a2.customname = 'Vacation';
a2.street1 = '101 Sunshine St.';
a2.city = 'Sarasota';
a2.state = 'FL';
a2.postalcode = '12445';
a2.key = 2;
aList.add(a2);
oprobj.addressList.addAll(aList);
oprList.add(oprobj);
}
return oprList;
}
}
