Skip to content

Commit 5966384

Browse files
SarveshgithubSarveshgithub
authored
Merge pull request #193 from e-bacho/dev
Added support for 2 new data types: Long Text Area & Formula (Image)
2 parents e47393f + e267887 commit 5966384

File tree

15 files changed

+186
-16
lines changed

15 files changed

+186
-16
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ Custom Data types (the component extendedDatatable extends lightning:datatable)
2727

2828
- picklist
2929
- lookup
30+
- long text area
31+
- formula (image)
3032

3133
## Steps to Customization through Design Attribute
3234

@@ -39,7 +41,8 @@ Custom Data types (the component extendedDatatable extends lightning:datatable)
3941
| Enter Object API Name | :heavy_check_mark: | String | provide object custom or standard API name | Contact |
4042
| Enter Columns API Name by comma seprated | :heavy_check_mark: | String | **Note** : for related field it should be concat with . i.e : Account.Name for contact, Inline Edit not support cross reference Field | FirstName,LastName,Email,Phone |
4143
| Enter Customized Field JSON ( This is Mandatory for Related Field ) | :x: | String | customized Column Label, Record Redirect, Data Type. **Note** : This is Mandatory for Related Fields i.e : Account.Name for contact | See below [**Customized Field JSON**](#customized-field-json) |
42-
| Enter Related field API Name | :x: | String | Enter related field api name | Example AccountId for contact when component is on account layout. |
44+
| Enter Related field API Name | :x: | String | Enter related field API name | Example AccountId for contact when component is on account layout. |
45+
| Formula Image Field API Names | :x: | String | Enter formula field API names **Note** : This is mandatory for formula fields displaying images | \["FormulaField__c"\] |
4346
| Hide/Unhide checkbox column | :x: | Boolean | true/false | Hide/Unhide Checkbox |
4447
| Enter WHERE clause | :x: | String | provide aditional filters | Example `LastName like '%s' AND Account.Name like '%t'` |
4548
| Order by | :x: | String | set the order by clause | Example `LastName, Account.Name DESC` |

‎force-app/main/default/classes/RelatedList.cls‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,18 @@ public with sharing class RelatedList {
5959
public String fieldName;
6060
}
6161

62+
public class TypeAttributeColumnTextarea extends TypeAttributes {
63+
@AuraEnabled
64+
public TypeAttributeContext context = new TypeAttributeContext();
65+
@AuraEnabled
66+
public String fieldName;
67+
68+
public TypeAttributeColumnTextarea(String fieldName) {
69+
this.fieldName = fieldName;
70+
}
71+
72+
}
73+
6274
public class ListResults {
6375
@AuraEnabled
6476
public List<SObject> records;
@@ -107,21 +119,24 @@ public with sharing class RelatedList {
107119
}
108120
//Check if values predefined in LWC
109121
if (mapPreCols.containsKey(fieldName)) {
110-
if (mapPreCols.get(fieldName).type == 'lookup') {
111-
mapPreCols.get(fieldName).typeAttributes = new TypeAttributeColumnLookup();
112-
continue;
122+
switch on mapPreCols.get(fieldName).type {
123+
when 'lookup' {
124+
mapPreCols.get(fieldName).typeAttributes = new TypeAttributeColumnLookup();
125+
}
126+
when 'picklist' {
127+
//set picklistValues for picklist type
128+
RelatedList.initPicklistColumn(
129+
mapPreCols,
130+
objectName,
131+
fieldName
132+
);
133+
}
134+
when 'textarea' {
135+
mapPreCols.get(fieldName).typeAttributes = new TypeAttributeColumnTextarea(fieldName);
136+
}
113137
}
114138

115139
mapPreCols = checkOverride(mapPreCols, fieldName, mfields);
116-
117-
//set picklistValues for picklist type
118-
if (mapPreCols.get(fieldName).type == 'picklist') {
119-
RelatedList.initPicklistColumn(
120-
mapPreCols,
121-
objectName,
122-
fieldName
123-
);
124-
}
125140
}
126141
}
127142
return new ListResults(

‎force-app/main/default/lwc/datatableImageColumn/datatableImageColumn.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<lightning-formatted-rich-text value={value} class="slds-align_absolute-center"></lightning-formatted-rich-text>
3+
</template>

‎force-app/main/default/lwc/datatableImageColumn/datatableImageColumn.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { LightningElement, track, api } from 'lwc';
2+
3+
export default class DatatableImage extends LightningElement {
4+
@api value;
5+
}

‎force-app/main/default/lwc/datatableImageColumn/datatableImageColumn.js-meta.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?xml version="1.0" ?>
2+
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3+
<apiVersion>54.0</apiVersion>
4+
<isExposed>false</isExposed>
5+
</LightningComponentBundle>

‎force-app/main/default/lwc/datatableLookup/datatableLookup.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!-- sldsValidatorIgnore -->
12
<template>
23
<div class="lookupBlock" id="lookup">
34
<div if:true={showLookup} class="lookup-container" onmouseleave={onMouseLeaveLookup}>

‎force-app/main/default/lwc/datatableTextareaColumn/datatableTextareaColumn.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- sldsValidatorIgnore -->
2+
<template>
3+
<div>
4+
<div if:true={showTextarea}>
5+
<lightning-textarea
6+
name="textarea"
7+
data-id="Textarea"
8+
variant="label-hidden"
9+
value={value}
10+
onblur={handleChange}
11+
>
12+
</lightning-textarea>
13+
</div>
14+
15+
<div
16+
if:false={showTextarea}
17+
class="slds-table_edit_container slds-is-relative"
18+
>
19+
<span
20+
class="slds-grid slds-grid_align-spread slds-cell-edit"
21+
ondblclick={editTextarea}
22+
>
23+
<span class="slds-truncate" title={value}>{value}</span>
24+
<button
25+
data-id={context}
26+
class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
27+
tabindex="-1"
28+
title="Edit"
29+
name="tes"
30+
onclick={editTextarea}
31+
data-name="myButtonName"
32+
>
33+
<svg
34+
class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small"
35+
aria-hidden="true"
36+
>
37+
<use
38+
xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.37.1#edit"
39+
></use>
40+
</svg>
41+
<span class="slds-assistive-text">Edit</span>
42+
</button>
43+
</span>
44+
</div>
45+
</div>
46+
</template>

‎force-app/main/default/lwc/datatableTextareaColumn/datatableTextareaColumn.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { LightningElement, track, api } from 'lwc';
2+
3+
export default class DatatableTextarea extends LightningElement {
4+
@api value;
5+
@api fieldName;
6+
@api context;
7+
@track showTextarea = false;
8+
9+
handleChange(event) {
10+
//show the selected value on UI
11+
this.value = event.target.value;
12+
//fire event to send context and selected value to the data table
13+
this.dispatchEvent(
14+
new CustomEvent('textareachanged', {
15+
composed: true,
16+
bubbles: true,
17+
cancelable: true,
18+
detail: {
19+
data: {
20+
context: this.context,
21+
fieldName: this.fieldName,
22+
value: this.value
23+
}
24+
}
25+
})
26+
);
27+
28+
this.closeTextarea();
29+
}
30+
31+
editTextarea() {
32+
this.showTextarea = true;
33+
}
34+
35+
closeTextarea() {
36+
this.showTextarea = false;
37+
}
38+
}

‎force-app/main/default/lwc/datatableTextareaColumn/datatableTextareaColumn.js-meta.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?xml version="1.0" ?>
2+
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3+
<apiVersion>54.0</apiVersion>
4+
<isExposed>false</isExposed>
5+
</LightningComponentBundle>

‎force-app/main/default/lwc/extendedDatatable/extendedDatatable.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import LightningDatatable from 'lightning/datatable';
22

33
import picklistTemplate from './picklistTemplate.html';
44
import customLookup from './customLookup.html';
5+
import textAreaTemplate from './textAreaTemplate.html';
6+
import imageTemplate from './imageTemplate.html';
57

68
export default class ExtendedDatatable extends LightningDatatable {
79
static customTypes = {
@@ -14,6 +16,15 @@ export default class ExtendedDatatable extends LightningDatatable {
1416
template: customLookup,
1517
standardCellLayout: true,
1618
typeAttributes: ['label', 'value', 'placeholder', 'fieldName', 'objectApiName', 'context', 'variant', 'name', 'fields', 'target']
19+
},
20+
textarea: {
21+
template: textAreaTemplate,
22+
standardCellLayout: false,
23+
typeAttributes: ['fieldName', 'context']
24+
},
25+
image: {
26+
template: imageTemplate,
27+
standardCellLayout: false
1728
}
1829
};
1930
}

0 commit comments

Comments
 (0)