You need to sign in to do that
Don't have an account?
Evita DSouza
Fetch row values on click of button in custom HTML data table for LWC (Lightning Web Component)
Hi,
I want to retrieve row data on click of remove button for custom HTML data table in Lightning Web Component(LWC). I am using custom HTML data table in LWC since LWC does not support displaying picklist values. Could someone please help me with the same.
Below is my code with screenshot:
I want to retrieve row data on click of remove button for custom HTML data table in Lightning Web Component(LWC). I am using custom HTML data table in LWC since LWC does not support displaying picklist values. Could someone please help me with the same.
Below is my code with screenshot:
<!--lwcPicklistDemo.html--> <template> <lightning-card > <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped"> <thead> <tr class="slds-line-height_reset"> <th scope="col"><div class="slds-truncate">Actions</div></th> <th scope="col"><div class="slds-truncate">Id</div></th> <th scope="col"><div class="slds-truncate">Name</div></th> <th scope="col"><div class="slds-truncate">Type</div></th> <th scope="col"><div class="slds-truncate">Industry</div></th> </tr> </thead> <tbody> <template for:each={sObjData} for:item="sobKey"> <tr key={sobKey.Id}> <td><div><lightning-button variant="brand" label="Remove" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button> </div></td> <td><div>{sobKey.Id}</div></td> <td><div>{sobKey.Name}</div></td> <td> <div class="slds-select_container"> <select class="slds-select" onchange={onValueSelection1}> <option value="">{sobKey.Type}</option> <!--iterate all picklist values from wrapper list using for:each loop--> <template for:each={TypeValue.data} for:item="picklistItem"> <option key={picklistItem.svalue} value={picklistItem.svalue}> {picklistItem.slabel} </option> </template> </select> </div> </td> <td> <div class="slds-select_container"> <select class="slds-select" onchange={onValueSelection1}> <option value="">{sobKey.Industry}</option> <!--iterate all picklist values from wrapper list using for:each loop--> <template for:each={IndustryValues.data} for:item="picklistItem"> <option key={picklistItem.svalue} value={picklistItem.svalue}> {picklistItem.slabel} </option> </template> </select> </div> </td> </tr> </template> </tbody> </table> </lightning-card> </template>
/*lwcPicklistDemo.js*/ import { LightningElement,wire, api, track } from 'lwc'; import fetchsObjectData from '@salesforce/apex/lwcDemoController.fetchsObjectData'; import fetchPickListValue from '@salesforce/apex/lwcDemoController.fetchPickListValue'; export default class LwcPicklistDemo extends LightningElement { @api objectName = 'Account'; @track sObjData= []; @wire(fetchsObjectData, {obName :'$objectName'} ) wiredResult(result) { if (result.data) { this.sObjData = result.data; } } @wire(fetchPickListValue, {objInfo: {'sobjectType' : 'Account'}, picklistFieldApi: 'Industry'}) IndustryValues; @wire(fetchPickListValue, {objInfo: {'sobjectType' : 'Account'}, picklistFieldApi: 'Type'}) TypeValue; onValueSelection1(event){ // eslint-disable-next-line no-alert alert(event.target.value); } onValueSelection2(event){ // eslint-disable-next-line no-alert alert(event.target.value); } handleClick(){ // eslint-disable-next-line no-alert alert('Remove clicked'); } }
/*lwcDemoController.apxc*/ public with sharing class lwcDemoController { @AuraEnabled(cacheable = true) public static List<SObject> fetchsObjectData(String obName){ return database.query('SELECT ID, Name,Type,Industry FROM '+obName+' LIMIT 5'); } @AuraEnabled(cacheable = true) public static List < FetchValueWrapper > fetchPickListValue(sObject objInfo, string picklistFieldApi) { // Describe the SObject using its object type. Schema.DescribeSObjectResult objDescribe = objInfo.getSObjectType().getDescribe(); // Get a map of fields for the SObject map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap(); // Get the list of picklist values for this field. list < Schema.PicklistEntry > values = fieldMap.get(picklistFieldApi).getDescribe().getPickListValues(); // Create a list of wrapper to store picklist value/lable list < FetchValueWrapper > objWrapper = new list < FetchValueWrapper > (); for (Schema.PicklistEntry a: values) { FetchValueWrapper oFetchValueWrapper = new FetchValueWrapper(); oFetchValueWrapper.slabel = a.getLabel(); oFetchValueWrapper.svalue = a.getValue(); objWrapper.add(oFetchValueWrapper); } return objWrapper; } // wrapper class public with sharing class FetchValueWrapper { @auraEnabled public string slabel {get;set;} @auraEnabled public string svalue {get;set;} } }
<!--lwcDemoApp.app--> <aura:application extends="force:slds"> <c:lwcPicklistDemo></c:lwcPicklistDemo> </aura:application>
HTML change
JS Change:
I guess this is what you are looking for;
#html5 #data-api #lwc
All Answers
:
Please let me know if you need any additional details.
HTML change
JS Change:
I guess this is what you are looking for;
#html5 #data-api #lwc