0

I'm trying to display a list of Opportunity Contact Roles within a datatable. I'm having trouble showing the 'Role' field as a picklist. Does anyone know what I'm missing? I've wired in the getPicklistValues method and can confirm via console logs that the 'picklistOptions' variable is getting set. I just can't get the values to display on the datatable. Does anyone know what I'm missing? I feel like there's some more work I have to do to the pickListOptions variable but I can't figure out what exactly that is.

Here's the js file:

import { LightningElement, api, track, wire } from "lwc";
import getOpportunityContactRoles from '@salesforce/apex/oppController.getOpportunityContactRoles';
import OCR_OBJECT from '@salesforce/schema/OpportunityContactRole';
import ROLE_FIELD from '@salesforce/schema/OpportunityContactRole.Role';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';

const columns = [
    {label: "Contact", fieldName: "contactLink", type: 'url', typeAttributes: { label: { fieldName: 'ContactName' }, target: '_blank' }},
    {label: 'Role', fieldName: 'Role', type: 'picklistColumn', editable: true, typeAttributes: {
        placeholder: 'Choose Role', options: { fieldName: 'pickListOptions' },
        value: { fieldName: 'End User' },
        context: { fieldName: 'Id' } 
    }
},
    {label: "Primary", fieldName: "IsPrimary", type: 'boolean', editable: true}
];


export default class OpportunityContactRoles extends LightningElement {
    @api recordId;
    columns = columns;
    isLoading = true;
    error;
    records;
    @track pickListOptions;


    //get object info
    @wire(getObjectInfo, { objectApiName: OCR_OBJECT })
    objectInfo;
 
    //fetch picklist options
    @wire(getPicklistValues, {
        recordTypeId: "012000000000000AAA",
        fieldApiName: ROLE_FIELD
    })
    wirePickList({ error, data }) {
        if (data) {
            this.pickListOptions = data.values;
        } else if (error) {
            console.log(error);
        }
    }


  @wire(getOpportunityContactRoles, {quoteId: "$recordId"}, { pickList: '$pickListOptions'})
  setRecords({ error, data }) {
    if (data) {
        let roleList = [];
        data.forEach((row) =>{
            let preparedRole = {};
            preparedRole.ContactName = row.Contact.FirstName +' ' + row.Contact.LastName;
            preparedRole.contactLink = '/' + row.ContactId;
            preparedRole.Role = row.Role;
            preparedRole.IsPrimary = row.IsPrimary;
            preparedRole.pickListOptions = this.pickListOptions;

            roleList.push(preparedRole);
        })
        this.records = roleList;
    } else if (error) {
      this.error = error.body.message;
    }
  }

  get showTable() {
    return this.records !== undefined && this.records.length > 0;
  }

}

And here's what the datatable displays. When I click to edit the Role column, it's just a text field: enter image description here

2
  • It is pretty involved - but I finally got my example to work: salesforce.stackexchange.com/questions/416944/… Feb 23 at 21:26
  • 1
    @BritishBoyinDC: Thanks for sharing your solution. I pretty much followed it to a T and the picklist is now working! I'm not using a getter for my columns like you were, so I'll add the final JS file below in case others stumble upon this.
    – mcg123
    Feb 26 at 21:43

1 Answer 1

1

I ended up creating two additional LWCs per BritishBoyinDC's suggestion here: Error and Changes in Spring 24 to define Column type - Picklist with LWC Datatable

And here's what my final JS file now looks like, with a working picklist field:

import { LightningElement, api, track, wire } from "lwc";
import getOpportunityContactRoles from '@salesforce/apex/oppController.getOpportunityContactRoles';
import ROLE_FIELD from '@salesforce/schema/OpportunityContactRole.Role';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import GO_LIVE_DATE_FIELD from '@salesforce/schema/SBQQ__Quote__c.SBQQ__Opportunity2__r.Go_Live_Date__c';
import DESIRED_ROSTERING_SOLUTION_FIELD from '@salesforce/schema/SBQQ__Quote__c.SBQQ__Opportunity2__r.Desired_Rostering_Solution__c';
import {getRecord, getFieldValue} from 'lightning/uiRecordApi';

const columns = [
    {label: "Contact", fieldName: "contactLink", type: 'url', typeAttributes: { label: { fieldName: 'ContactName' }, target: '_blank' }},
    {label: 'Role', fieldName: 'Role', type: 'picklistColumn', editable: true, typeAttributes: {
        placeholder: 'Choose Role', options: {fieldName: 'pickListOptions'},
        value: { fieldName: 'Role' },
        context: { fieldName: 'Id' } 
    }
},
    {label: "Primary", fieldName: "IsPrimary", type: 'boolean', editable: true}
];


export default class OpportunityContactRoles extends LightningElement {
    @api recordId;
    columns = columns;
    isLoading = true;
    error;
    records;
    @track pickListOptions  = [];
    implementationContact = false;
    technicalContact = false;
    // showMessage = false;

    @wire(getRecord, {recordId: "$recordId", fields: [GO_LIVE_DATE_FIELD, DESIRED_ROSTERING_SOLUTION_FIELD]})
    loadFields
    
    get goLiveDate(){
      return getFieldValue(this.loadFields.data, GO_LIVE_DATE_FIELD);
  }
    get desiredRosteringSolution(){
      return getFieldValue(this.loadFields.data, DESIRED_ROSTERING_SOLUTION_FIELD);
  }

  
 
    // fetch picklist options
    @wire(getPicklistValues, {
        recordTypeId: "012000000000000AAA",
        fieldApiName: ROLE_FIELD
    })
    wirePickList({ error, data }) {
        if (data) {
            this.pickListOptions = data.values;
            this.queryOppContactRoles();
        } else if (error) {
            console.log(error);
        }
    }

    queryOppContactRoles(){
      getOpportunityContactRoles({quoteId : this.recordId})
      .then((result) => {
        console.log(JSON.stringify(result));
        this.records = result.map((row) => {
          if(row.Role == 'Implementation Contact') {
            this.implementationContact = true;
          }
          if(row.Role == 'Technical Contact') {
            this.technicalContact = true;
          }
          return {
            ...row,
                'ContactName': row.Contact.FirstName +' ' + row.Contact.LastName,
                'contactLink': '/' + row.ContactId,
                'Role': row.Role,
                'IsPrimary': row.IsPrimary,
                'pickListOptions': this.pickListOptions
          }
        });
    })
    .catch((error) => {
        this.error = error;
    });
}

  get showMessage() {
    if(!this.goLiveDate) {
      return true;
    } else if(!this.desiredRosteringSolution) {
      return true
    } else if(!this.implementationContact) {
      return true
    } else if(!this.technicalContact) {
      return true
    }
  }

  get showTable() {
    return this.records !== undefined && this.records.length > 0;
  }
}
2
  • Thanks - I had seen several examples I couldn't make work, so wanted to make sure there was a working example out there if I could manage it! Feb 27 at 3:20
  • @BritishBoyinDC - Any chance you have any insight on being able to save the inline edits to the datatable? I posted another question about this yesterday here. No matter what field I'm editing in the table, once I hit save the values clear out. The records do in fact still get updated with the new data, but the table isn't refreshing with the updated saved values or anything like that until I refresh the entire page.: salesforce.stackexchange.com/questions/418784/…
    – mcg123
    Feb 28 at 14:56

You must log in to answer this question.

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