I have formula fields that show HTML values and I need to show them in a custom related record data table
What I have tried so far.
- https://salesforcecodex.com/2019/10/show-image-in-lightning-web-component-data-table/
- https://github.com/ericrsmith35/DatatableV2/tree/master/force-app/main/default/lwc
- Need Help with custom types in Lightning DataTable – LWC
- https://developer.salesforce.com/docs/component-library/tools/playground/l_0ieW-Sm/32/edit
- https://devlife.tech/lwc/how-to-create-a-custom-column-in-datatable-lwc/
- https://gist.github.com/loktevich/044d9411985c03a314765dbe05328eb3
And to be honest, I'm frustrated right now because it's not working for me, maybe I'm tired and I don't see the issue or something, but I feel like I have tried everything.
Parent Component –
HTML
<template>
<lightning-card icon-name={iconName} title={objectLabel}>
<c-rich-datatable key-field="Id" data={tableData} columns={tableColumns} hide-checkbox-column
wrap-text-max-lines="3"></c-rich-datatable>
</lightning-card>
</template>
JS
import { LightningElement, api, wire, track} from 'lwc';
import getIconName from '@salesforce/apex/ICRM_DynamicRelatedRecordsList_Ctrlr.getIconName';
import getObjectLabel from '@salesforce/apex/ICRM_DynamicRelatedRecordsList_Ctrlr.getObjectLabel';
import getFieldSet from '@salesforce/apex/ICRM_DynamicRelatedRecordsList_Ctrlr.getFieldSet';
export default class IcrmDrrl extends LightningElement {
@api recordId;
@api objectName = '';
@api relatedField = '';
@api fieldList = '';
@api recordsToDisplay = 0;
@track iconName = '';
@track objectLabel = '';
@track tableData = [];
@track tableColumns = [];
@track result = [];
@wire(getIconName, { objectName: '$objectName' })
wiredIcon({ error, data}) {
if(data) {
this.iconName = data;
} else if (error) {
this.error = error;
this.iconName = undefined;
}
}
@wire(getObjectLabel, { sobjectApiName: '$objectName' })
wiredLabel({ error, data}) {
if(data) {
this.objectLabel = data;
} else if (error) {
this.error = error;
this.objectLabel = undefined;
}
}
@wire(getFieldSet, {
sObjectName: '$objectName',
listOfFields: '$fieldList',
recordId: '$recordId',
relationshipField: '$relatedField',
recordsToDisplay: '$recordsToDisplay'
}) wiredResults({error, data}) {
if (data) {
this.tableData = data.listData;
this.result = data.columns;
} else if (error) {
this.error = error;
this.tableData = undefined;
this.result = undefined;
}
}
connectedCallback() {
this.result.map((col) => {
return (col.type = "richText");
});
console.log(JSON.stringify(this.result));
this.tableColumns = this.result;
console.log(JSON.stringify(this.tableColumns));
}
}
CustomDatatable component
HTML
<template>
</template>
JS
import LightningDatatable from "lightning/datatable";
import richTextColumnType from "./richTextColumnType.html";
/**
* Custom component that extends LightningDatatable
* and adds a new column type
*/
export default class richDatatable extends LightningDatatable {
static customTypes = {
// custom type definition
richtext: {
template: richTextColumnType,
standardCellLayout: true
}
}
}
HTML template for customDatatable
<template>
<!-- a template for cell. File in the myCustomDatatable directory -->
<template if:true={wrapText}>
<lightning-formatted-rich-text value={value} class="slds-truncate">
</lightning-formatted-rich-text>
</template>
<template if:false={wrapText}>
<lightning-formatted-rich-text value={value}>
</lightning-formatted-rich-text>
</template>
</template>
And still can't make it work.
Thanks in advance to sfdcfox for helping me with the last issue.
Thanks.
Best Answer
You're probably missing out
type
attribute in the columns for the formula field. Since it's a formula-text field. The default text column is applied.You need to add a
type attribute
to the columns for that field that should be like,You can see a live demo here.
Once you get columns from apex. You need to change the type attribute before assigning it to the columns attribute.
Apex Class