You need to sign in to do that
Don't have an account?
Ertyq Mrsk
Some Field Values Not Displaying in table using LWC
I am trying to display records grouped by Module custom field in standard Contact object using Salesforce LWC. There are records displaying so far, but only Module and Name values are visible. Been trying to display also Email and Phone values, but unfortunately only the headers are visible.I have already tried searching for same scenarios and modified codes many times but still haven't had any progress with it,
Meanwhile, here's what I achieved:
contactLWC.html
Meanwhile, here's what I achieved:
contactLWC.html
<template> <table class="slds-table slds-table_cell-buffer slds-table_bordered "> <thead> <tr class="slds-line-height_reset"> <th class="" scope="col"> <div class="slds-truncate" title="contactModule">Module</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="contactName">Name</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="contactEmail">Email</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="contactPhone">Phone</div> </th> </tr> </thead> <tbody> <template if:true={mapData}> <template for:each={mapData} for:item="keyValue"> <tr key={keyValue.key} class="slds-hint-parent"> <th scope="col"> <div>{keyValue.key}</div> </th> <template for:each={keyValue.value} for:item="value"> <div key={value.Name}> {value.Name} </div> <div key={value.Email}> {value.Email} </div> <div key={value.Phone}> {value.Phone} </div> </template> </tr> </template> </template> </tbody> </table> </template>contactLWC.js
import { LightningElement, track, wire } from 'lwc'; import getDataFromApex from '@salesforce/apex/ContactController.getData'; export default class contactLWC extends LightningElement { @track mapData = []; @wire(getDataFromApex) wiredcontactdata({ data, error }) { if (data) { for(let key in data) { if (data.hasOwnProperty(key)) { this.mapData.push({key: key, value: data[key]}); } } } else if (error) { window.console.log(error); } } }ContactController.cls
public class ContactController{ @AuraEnabled(cacheable=true) public static Map<String, List<ContactWrapper>> getData() { Map<String, List<ContactWrapper>> mapModule = new Map<String, List<ContactWrapper>>(); Map<String, Integer> moduleCountMap = new Map<String, Integer>(); List<Contact> contactList = [SELECT Name, Email, Phone, Module__c FROM Contact WHERE Module__c != null ORDER BY Module__c]; for(Contact contObj:contactList) { List<ContactWrapper> conWrapperList = new List<ContactWrapper>(); if(mapModule.containsKey(contObj.Module__c)) { conWrapperList = mapModule.get(contObj.Module__c); conWrapperList.add(new ContactWrapper(contObj)); mapModule.put(contObj.Module__c, conWrapperList); moduleCountMap.put(contObj.Module__c, conWrapperList.size()); } else { conWrapperList.add(new ContactWrapper(contObj)); mapModule.put(contObj.Module__c, conWrapperList); moduleCountMap.put(contObj.Module__c, conWrapperList.size()); } } return mapProjectType; } public Class ContactWrapper { public ContactWrapper(Contact contObj) { this.Name = contObj.Name; this.Email = contObj.Email; this.Phone = contObj.Phone; this.Module = contObj.Module__c; } @AuraEnabled public String Name {get;set;} @AuraEnabled public String Email {get;set;} @AuraEnabled public String Phone {get;set;} @AuraEnabled public String Module {get;set;} } }Hoping someone could help me on this, and thanks in advance!
All Answers
Please change your html code like this,
Thanks
Prosenjit