1

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.

enter image description here

enter image description here

<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;
    }

}

1 Answer 1

0

The value attribute from the lightning-dual-list-box must be set during initialization of the component.

The roles are stored in acr.Roles within your APEX controller and you must use this in your JS controller to set the value attribute for the dual list box. This requires a conversion from multiselect picklist (semi colon separated string) to array. You also might need to change your component a bit if you need to store this value separately for all contacts (maybe reuse the data structure and set an additional property that would replace defaultOptions)

@wire(getpeople,{recordId:'$recordId'}) 
    wiredPeople({error, data}){
        if(data){

            this.people = data;
            var defaultOptionsTempArray = [];
            var foundRoles = data[0].Roles.split(';'); // Begin conversion multi picklist to array - assuming we are processing the first OnboardingPeopleResult only at a given time! Otherwise, you would need a loop here for all results to convert their roles into array and add this new array field onto the data structure for each of them. This would also require to change the single array used called defaultOprions as we would need one for each contact.
            ...
            ...
            ...
            this.defaultOptions = defaultOptionsTempArray; //Assignment here
            this.error = undefined;
        } else if (error) {

            this.people = undefined;
            this.error = error;
        }
    }
1
  • Thank you! This fixed the issue. Im using a custom class, so I added an apex List variable that contained the previously saved values and that resolved the issue.
    – user891859
    Nov 11, 2019 at 16:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .