Apex Code Development You need to sign in to do that
Don't have an account?
test vijay How to get Owner Field Detail at ListView In Lwc
hello Developers,
I have complete dynmic list view code and it's also working fine but problam is that when I add Owner.Alise And Owner.FirstName and something like more owner fields into standard Account ListView then its data is not showing.rest of field's data is coming but not owner field.
Follwing is my dynmic listView code.
I hope anybody help me to this.
Thanks In advance
I have complete dynmic list view code and it's also working fine but problam is that when I add Owner.Alise And Owner.FirstName and something like more owner fields into standard Account ListView then its data is not showing.rest of field's data is coming but not owner field.
Follwing is my dynmic listView code.
I hope anybody help me to this.
<template>
<article>
<div class="slds-p-around_medium lgc-bg list_view_and_table_container" id="myDIV">
<lightning-tile label="Accounts" type="media" href="javascript:void(0);" class="list_view_container" >
<lightning-icon slot="media" icon-name="standard:account" size="medium" class="icon_custom_class">
</lightning-icon>
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-combobox_container testCustomCss">
<div class={dropdownTriggerClass} aria-expanded="false" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
role="none" onclick={handleClickExtend}>
<span class="current_filter">
{listViewName}
<lightning-icon
class="slds-m-left_x-small slds-button__icon slds-icon-utility-down slds-icon_container forceIcon"
data-data-rendering-service-uid="232" data-aura-rendered-by="371:0"
data-aura-class="forceIcon" icon-name="utility:down" size="x-small">
</lightning-icon>
</span>
</div>
<div class="listViewPickerPanel deActive_ListView uiPanel--default uiPanel positioned south"
aria-hidden="true" tabindex='0' onfocusout={handelFocusOut} style="outline:none;">
<div id="listbox-id-1" class="slds-form-element slds-lookup forceVirtualAutocompleteMenu max_height"
role="listbox" >
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-dropdown__header slds-text-heading--label forceVirtualAutocompleteMenuOption">
<div>List Views</div>
</li>
<template for:each={listViewOptions} for:item="option">
<li role="presentation" class="slds-listbox__item" key={option.value}>
<div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small"
data-filter={option.value} onclick={getListViewValue}
>
<span class="slds-media__figure slds-listbox__option-icon"
data-filter={option.value}>
<template if:true={option.show_option_icon}>
<lightning-icon icon-name="utility:check" size="xx-small" class="my-icon">
</lightning-icon>
</template>
</span>
<span class="slds-media__body" data-filter={option.value}>
<span class="slds-truncate"
data-filter={option.value}>{option.label}</span>
</span>
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</lightning-tile>
</div>
<div class="table_cc">
<!--list view dataTable start here -->
<lightning-datatable
key-field="id"
columns={lstviewCol}
data={storeListViewRecords}
>
</lightning-datatable>
<template if:true={isLoading}>
<lightning-spinner alternative-text="spinner"></lightning-spinner>
</template>
<!--list view dataTable end here -->
<template if:false={hasRecords}>
<div class="No_Record_Found_Css">No items to display</div>
</template>
</div>
</article>
</template>
/* 6 July 2021 => */
import {LightningElement,wire} from 'lwc';
import fetchListView from '@salesforce/apex/CustomListViewInLwcCtrl.fetchListView';
import {getListUi } from 'lightning/uiListApi';
import Account_OBJECT from '@salesforce/schema/Account';
import Name_FIELD from '@salesforce/schema/Account.Name';
export default class ListViewInLwc extends LightningElement {
lstviewCol;
storeListViewRecords;
isLoading = false;
hasRecords = false;
listViewOptions = [];
//records;
error;
listViewName = 'Recently Viewed Accounts';
defaultListView = "RecentlyViewedAccounts";
@wire(fetchListView) ListView(value) {
const {
data,
error
} = value;
if (data) {
this.isLoading = true;
let plistViewOptions = JSON.parse(JSON.stringify(data));
let lstOption = [];
for (var i = 0; i < plistViewOptions.length; i++) {
lstOption.push({
label: plistViewOptions[i].Name,
value: plistViewOptions[i].DeveloperName,
show_option_icon: false
});
if (this.defaultListView == plistViewOptions[i].DeveloperName) {
lstOption[i].show_option_icon = true;
}
}
console.log('lstOption===> ' + JSON.stringify(lstOption));
this.listViewOptions = lstOption;
this.isLoading = false;
} else if (error) {
this.isLoading = false;
console.log('error===> ' + JSON.stringify(error))
}
}
@wire(getListUi, {
objectApiName: Account_OBJECT,
listViewApiName: '$defaultListView' ,
sortBy: Name_FIELD,
pageSize: 100,
}) listViewData({
error,
data
}) {
if (data) {
console.log('data getListUi: ' + JSON.stringify(data));
const columns = [];
for(let Col in data.info.displayColumns){
columns.push({
label : data.info.displayColumns[Col].label,
fieldName : data.info.displayColumns[Col].fieldApiName
});
}
this.lstviewCol = columns;
console.log('this.columns' + JSON.stringify(this.lstviewCol));
let records = JSON.parse(JSON.stringify(data.records.records));
let sAssignObj = [];
for(let rec of records){
console.log('sData : ' + JSON.stringify(rec.fields));
let listViewData = [];
for(let fldObj in rec.fields){
console.log('fldObj : ' +fldObj);
console.log('sData.fields[value] : ' + JSON.stringify(rec.fields[fldObj]));
let sObj = this.lstviewCol.find(data => data.fieldName == fldObj);
console.log('sObj : ' + JSON.stringify(sObj));
if(sObj != undefined){
listViewData.push({"key" : [fldObj],
"value" : rec.fields[fldObj].value});
}
}
//convert
var result = {};
for (var i = 0; i < listViewData.length; i++) {
result[listViewData[i].key] = listViewData[i].value;
}
sAssignObj.push(result);
}
console.log("sAssignObj : " + JSON.stringify(sAssignObj));
/* set ListView Option */
let lstOption = JSON.parse(JSON.stringify(this.listViewOptions));
for (let i = 0; i < lstOption.length; i++) {
if (this.defaultListView == lstOption[i].value) {
lstOption[i].show_option_icon = true;
} else {
lstOption[i].show_option_icon = false;
}
}
this.listViewOptions = lstOption;
/* ################################## */
console.log(' records length : ' + records.length);
if (records.length > 0) {
this.hasRecords = true;
} else {
this.hasRecords = false;
}
console.log('this.hasRecords====> '+this.hasRecords);
this.storeListViewRecords = sAssignObj;
this.isLoading = false;
this.error = undefined;
} else if (error) {
this.error = error;
console.log('error : ' + JSON.stringify(error));
this.isLoading = false;
this.storeListViewRecords = undefined;
}
}
handleClickExtend(event) {
let getElement = this.template.querySelector('.listViewPickerPanel');
//console.log('getElement.getAttribute("data-show") ==>' + getElement.getAttribute('data-show'));
if (getElement.classList.contains('deActive_ListView')){
getElement.setAttribute('aria-hidden', false);
getElement.classList.remove('deActive_ListView');
getElement.classList.add('active_ListView');
this.template.querySelector('.listViewPickerPanel').focus();
} else {
this.closeListViewHelper();
}
}
handelFocusOut(event) {
let that = this;
setTimeout(function(){ that.closeListViewHelper(); }, 300);
}
getListViewValue(event) {
let listViewValue = event.target.dataset.filter;
console.log('listViewValue : ' + listViewValue);
if (listViewValue != this.defaultListView) {
this.isLoading = true;
}
this.defaultListView = listViewValue;
console.log(this.defaultListView);
let getListViewLabel = this.listViewOptions.find(data => data.value == listViewValue);
this.listViewName = getListViewLabel.label;
console.log(this.listViewName);
this.closeListViewHelper();
}
closeListViewHelper(){
let getElement = this.template.querySelector('.listViewPickerPanel');
getElement.setAttribute('aria-hidden', true);
getElement.classList.remove('active_ListView');
getElement.classList.add('deActive_ListView');
//getElement.setAttribute('data-show', 0);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__Tab</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
//Follwoing is Css
.lgc-bg {
background-color: rgb(242, 242, 242);
}
.lgc-bg-inverse {
background-color: rgb(22, 50, 92);
}
.label-hidden>label {
display: none !important;
}
.icon_custom_class {
margin-top: 5px;
}
.current_filter {
color: rgb(8, 7, 7);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25;
display: block;
cursor: pointer;
}
.current_filter:hover {
text-decoration: underline;
}
.custom_list_view {
max-width: max-content;
}
.button_class {
margin-left: 10px;
margin-right: 10px;
}
.list_view_container {
max-width: max-content;
}
.list_view_and_table_container {
display: flex;
align-items: center;
justify-content: space-between;
}
.max_height {
max-height: 409px;
}
.deActive_ListView {
opacity: 0;
display: none;
z-index: 9001;
position: absolute;
left: 0px;
top: 24px;
visibility: hidden;
}
.active_ListView {
opacity: 1;
display: block;
z-index: 9001;
position: absolute;
left: 0px;
top: 24px;
visibility: visible;
}
.my-icon {
--sds-c-icon-color-foreground-default: rgb(0, 112, 210, 1);
}
.No_Record_Found_Css {
text-align: center;
margin-top: 200px;
}
.table_cc {
background-color: rgb(250, 250, 249);
}
Thanks In advance
You need to simply overide your JS Class with following class.
/* 6 July 2021 => */ import {LightningElement,wire} from 'lwc'; import fetchListView from '@salesforce/apex/CustomListViewInLwcCtrl.fetchListView'; import {getListUi } from 'lightning/uiListApi'; import Account_OBJECT from '@salesforce/schema/Account'; import Name_FIELD from '@salesforce/schema/Account.Name'; export default class ListViewInLwc extends LightningElement { lstviewCol; storeListViewRecords; isLoading = false; hasRecords = false; listViewOptions = []; error; listViewName = 'Recently Viewed Accounts'; defaultListView = "RecentlyViewedAccounts"; @wire(fetchListView) ListView(value) { const { data, error } = value; if (data) { this.isLoading = true; let plistViewOptions = JSON.parse(JSON.stringify(data)); let lstOption = []; for (var i = 0; i < plistViewOptions.length; i++) { lstOption.push({ label: plistViewOptions[i].Name, value: plistViewOptions[i].DeveloperName, show_option_icon: false }); if (this.defaultListView == plistViewOptions[i].DeveloperName) { lstOption[i].show_option_icon = true; } } console.log('lstOption===> ' + JSON.stringify(lstOption)); this.listViewOptions = lstOption; this.isLoading = false; } else if (error) { this.isLoading = false; console.log('error===> ' + JSON.stringify(error)) } } @wire(getListUi, { objectApiName: Account_OBJECT, listViewApiName: '$defaultListView' , sortBy: Name_FIELD, pageSize: 100, }) listViewData({ error, data }) { if (data) { const columns = []; const lstOwnerFilds = []; for(let Col in data.info.displayColumns){ let dataInfo =data.info.displayColumns[Col]; let fieldlLabel = dataInfo.label; let fieldApi = dataInfo.fieldApiName; if( dataInfo.fieldApiName.includes('Owner.')){ let splitData = dataInfo.fieldApiName.split('.'); fieldApi = splitData[0] + splitData[1]; lstOwnerFilds.push(splitData[1]); } columns.push({ label :fieldlLabel, fieldName : fieldApi }); } this.lstviewCol = columns; console.log('this.columns' + JSON.stringify(this.lstviewCol)); let records = JSON.parse(JSON.stringify(data.records.records)); let sAssignObj = []; for(let rec of records){ let listViewData = []; for(let fldObj in rec.fields){ if(fldObj == 'Owner'){ for(var i=0; i<lstOwnerFilds.length; i++){ let owenrValue = rec.fields[fldObj].value.fields[lstOwnerFilds[i]].value; listViewData.push({"key" : 'Owner'+lstOwnerFilds[i], "value" : owenrValue}); } } else{ let sObj = this.lstviewCol.find(data => data.fieldName == fldObj); if(sObj != undefined){ listViewData.push({"key" : [fldObj], "value" : rec.fields[fldObj].value}); } } } //convert var result = {}; for (var i = 0; i < listViewData.length; i++) { result[listViewData[i].key] = listViewData[i].value; } sAssignObj.push(result); } /* set ListView Option */ let lstOption = JSON.parse(JSON.stringify(this.listViewOptions)); for (let i = 0; i < lstOption.length; i++) { if (this.defaultListView == lstOption[i].value) { lstOption[i].show_option_icon = true; } else { lstOption[i].show_option_icon = false; } } this.listViewOptions = lstOption; /* ################################## */ if (records.length > 0) { this.hasRecords = true; } else { this.hasRecords = false; } this.storeListViewRecords = sAssignObj; this.isLoading = false; this.error = undefined; } else if (error) { this.error = error; console.log('error : ' + JSON.stringify(error)); this.isLoading = false; this.storeListViewRecords = undefined; } } handleClickExtend(event) { let getElement = this.template.querySelector('.listViewPickerPanel'); if (getElement.classList.contains('deActive_ListView')){ getElement.setAttribute('aria-hidden', false); getElement.classList.remove('deActive_ListView'); getElement.classList.add('active_ListView'); this.template.querySelector('.listViewPickerPanel').focus(); } else { this.closeListViewHelper(); } } handelFocusOut(event) { let that = this; setTimeout(function(){ that.closeListViewHelper(); }, 300); } getListViewValue(event) { let listViewValue = event.target.dataset.filter; if (listViewValue != this.defaultListView) { this.isLoading = true; } this.defaultListView = listViewValue; console.log(this.defaultListView); let getListViewLabel = this.listViewOptions.find(data => data.value == listViewValue); this.listViewName = getListViewLabel.label; console.log(this.listViewName); this.closeListViewHelper(); } closeListViewHelper(){ let getElement = this.template.querySelector('.listViewPickerPanel'); getElement.setAttribute('aria-hidden', true); getElement.classList.remove('active_ListView'); getElement.classList.add('deActive_ListView'); } }let me know if it helps you and don't forget to mark it as best answer.
Thank you