Merge pull request #192 from Sarveshgithub/dev

Master Sync : Auto Generated PR

Author: Sarveshgithub

README.md

@@ -8,23 +8,27 @@
 
 To deploy the component see [Deploy](#deploy)
 
-This is generic lighting data table , which is build in lwc.
-The customization are done by design attributes.
+This is a generic lighting datatable, which is built in LWC.
+The customization is done by design attributes.
 
 Main features
 
--   Show records for both custom and standard object.
--   Add cols as per the fields exist in object in JSON format.
--   Pagination as First,Previous,Next,Last buttons.
+-   Show records for both custom and standard objects.
+-   Add cols as per the fields that exist in object in JSON format.
+-   Pagination as First, Previous, Next and Last buttons.
 -   New record creation action
--   Row action, like : show detail, edit record, delete record
+-   Row action like : show detail, edit a record, delete a record
 -   Hide/Unhide checkbox column
 -   Configurable actions buttons (for developers, see [Buttons configuration](#buttons-configuration) )
 -   Sorting by field (Note: sort will not work on search).
+-   Search
 
 Custom Data types (the component extendedDatatable extends lightning:datatable) :
 
 -   picklist
+-   lookup
+-   long text area
+-   formula (image)
 
 ## Steps to Customization through Design Attribute
 
@@ -37,7 +41,8 @@ Custom Data types (the component extendedDatatable extends lightning:datatable)
 | Enter Object API Name                                               | :heavy_check_mark: | String  | provide object custom or standard API name                                                                                            | Contact                                                            |
 | 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                                     |
 | 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)      |
-| Enter Related field API Name                                        | :x:                | String  | Enter related field api name                                                                                                          | Example AccountId for contact when component is on account layout. |
+| Enter Related field API Name                                        | :x:                | String  | Enter related field API name                                                                                                          | Example AccountId for contact when component is on account layout. |
+| Formula Image Field API Names                                       | :x:                | String  | Enter formula field API names **Note** : This is mandatory for formula fields displaying images                                       | \["FormulaField__c"\]                 |
 | Hide/Unhide checkbox column                                         | :x:                | Boolean | true/false                                                                                                                            | Hide/Unhide Checkbox                                               |
 | Enter WHERE clause                                                  | :x:                | String  | provide aditional filters                                                                                                             | Example `LastName like '%s' AND Account.Name like '%t'`            |
 | Order by                                                            | :x:                | String  | set the order by clause                                                                                                               | Example `LastName, Account.Name DESC`                              |
@@ -50,11 +55,16 @@ Custom Data types (the component extendedDatatable extends lightning:datatable)
 
 ## Customized Field JSON
 
-`label` : This key is for override column Name. ( [Example : Override Column Label](#example--override-column-label) )
+`label` : This key is for override column Name. ( [Example : Override Column Label](#single-override) )
 
-`type` : This key is for override column Type [supported_lwc_datatable_datatype](https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation). ( Ex : `url` ). ( [Example : Related Field Customized](#example--related-field-customized) )
+`type` : This key is for the override column Type :
+- [supported_lwc_datatable_datatype](https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation). ( Ex : `url` ). ( [Example : Related Field Customized](#related-field-customized) )
+- [lookup editable column](#lookup-editable-column)
+- [picklist editable column](#picklist-editable-column)
 
-`typeAttributes` : This key is used for hyperlink to recordId. ( `recId` stored recordId Field ). ( [Example : Add Hyperlink for navigate to record](#example--add-hyperlink-for-navigate-to-record) )
+`typeAttributes` : This key is used for custom columns :
+- a hyperlink to recordId (id of the current detail page) ( `recId` stored recordId Field ). ( [Example : Add Hyperlink for navigate to record](#example--add-hyperlink-for-navigate-to-record) )
+- [lookup editable column](#lookup-editable-column)
 
 ### Example : Override Column Label
 
@@ -64,7 +74,15 @@ Custom Data types (the component extendedDatatable extends lightning:datatable)
 { "AccountId": { "label": "Account Record Id", "type": "Id" } }
 ```
 
-#### Multiple override
+`AccountId` : the api name of the column for which you want to override the label (**only use the columns displayed**)
+
+#### Label Override using Custom Label
+
+```yml
+{ "FirstName": { "label": "{!Label.MyLabelName}", "type": "text" } }
+```
+
+#### Multiple overrides
 
 ```yml
 {
@@ -73,21 +91,68 @@ Custom Data types (the component extendedDatatable extends lightning:datatable)
 }
 ```
 
-#### Label Override using Custom Label
+When overriding columns you can override different columns for the different uses cases :
+- [lookup editable column](#lookup-editable-column)
+- [picklist editable column](#picklist-editable-column)
+- [hyperlink to navigate to the record](#add-a-hyperlink-to-navigate-to-the-record)
+
+#### Related Field Customized
 
 ```yml
-{ "FirstName": { "label": "{!Label.MyLabelName}", "type": "text" } }
+{ "Account.Name": { "label": "Account Name", "type": "text" } }
 ```
 
-#### Related Field Customized
+#### Picklist editable column
 
 ```yml
-{ "Account.Name": { "label": "Account Name", "type": "text" } }
+    {"StageName" : {"type": "picklist"} }
+```
+you can also override the label
+
+```yml
+    {"StageName" : {"label": "Step", "type": "picklist"} }
 ```
 
+#### Lookup editable column
+
+```yml
+{
+    "Account.Name":
+    {
+        "label":"Account Name",
+        "type":"lookup",
+        "typeAttributes":{
+            "placeholder": "Choose Account",
+            "objectApiName": "Contact",
+            "fieldName": "AccountId",
+            "label": "Account",
+            "value": { "fieldName": "AccountId" },
+            "context": { "fieldName": "Id" },
+            "variant": "label-hidden",
+            "name": "Account",
+            "fields": ["Account.Name"],
+            "target": "_self"
+        } 
+    }
+
+}
+```
+`placeholder` : text displayed when the lookup search bar is empty
+
+`fieldName` and `value.fieldName` : field API name that links the record to the parent record
+
+`fields` : what is displayed in the column (here the name of the account)
+
 #### Add a hyperlink to navigate to the record
 
-The example enables redirection to the account when we click on the account name of a contact (the field Account.Name is included in columns api name in the example).
+
+**Use cases :**
+- non-editable lookup redirection to the record page
+- redirection when a field is clicked (ex: a click on the firstname or lastname of a contact redirects to the record page)
+
+The example enables redirection to the account when we click on the account name of a contact (the field Account.Name is included in columns API name in the example).
+
+**When used for a lookup the field is not editable (to have an editable lookup field see the [section](#lookup-editable-column) above for editable lookup)**
 
 ```yml
 {
@@ -106,7 +171,7 @@ The example enables redirection to the account when we click on the account name
 
 ## Buttons configuration
 
-To configure buttons(variant are the style of a button) see the documentation here :
+To configure buttons(variant is the style of a button) see the documentation here :
 [buttons documentation](https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example)
 
 #### Single button
@@ -130,7 +195,7 @@ The "New" button is displayed by default
 
 ### Button logic definition (fire an event, call a method in the javascript controller)
 
-You can implement your own logic for your new buttons based on button JSON (new, delete-selected...).
+You can implement your logic for your new buttons based on button JSON (new, delete-selected...).
 
 ```JS
   handleButtonAction(event) {
@@ -162,4 +227,4 @@ Feel free to ask any Question, Suggestion, Issue [here](https://github.com/Sarve
 
 ## Want to contribute? Great!
 
-Create Pull Request to `dev` branch with your feature banch. Read [Contribution Guidelines](https://quip.com/7OtsAy94piU7)
+Create Pull Request to `dev` branch with your feature branch. Read [Contribution Guidelines](https://quip.com/7OtsAy94piU7)

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

@@ -17,31 +17,60 @@ public with sharing class RelatedList {
         @AuraEnabled
         public Boolean wrapText = false;
         @AuraEnabled
-        public TypeAttributeColumnJsonWithPicklist typeAttributes = null;
-
-        public void setTypeAttributes(
-            List<PicklistColumnUtils.PicklistValue> options
-        ) {
-            this.typeAttributes = new TypeAttributeColumnJsonWithPicklist();
-            this.typeAttributes.options = options;
-            this.typeAttributes.fieldName = this.fieldName;
-        }
+        public TypeAttributes typeAttributes = null;
     }
 
-    public class TypeAttributeColumnJsonWithPicklist {
+    public virtual class TypeAttributes {}
+
+    public class TypeAttributeColumnJsonWithPicklist extends TypeAttributes {
         @AuraEnabled
         public List<PicklistColumnUtils.PicklistValue> options = new List<PicklistColumnUtils.PicklistValue>();
         @AuraEnabled
-        public ContextTypeAttributeColumnJsonWithPicklist context = new ContextTypeAttributeColumnJsonWithPicklist();
+        public TypeAttributeContext context = new TypeAttributeContext();
         @AuraEnabled
         public String fieldName;
+
+        public TypeAttributeColumnJsonWithPicklist(List<PicklistColumnUtils.PicklistValue> options, String fieldName) {
+            this.options = options;
+            this.fieldName = fieldName;
+        }
     }
 
-    public class ContextTypeAttributeColumnJsonWithPicklist {
+    public class TypeAttributeContext {
         @AuraEnabled
         public string fieldName = 'Id';
     }
 
+    public class TypeAttributeColumnLookup extends TypeAttributes {
+        public String placeholder;
+        public String objectApiName;
+        public String fieldName;
+        public String label;
+        public TypeAttributeColumnLookupValue value = new TypeAttributeColumnLookupValue();
+        public TypeAttributeContext context = new TypeAttributeContext();
+        public String variant = 'label-hidden';
+        public String name;
+        public List<String> fields;
+        public String target = '_self';
+        
+    }
+
+    public class TypeAttributeColumnLookupValue {
+        public String fieldName;
+    }
+
+    public class TypeAttributeColumnTextarea extends TypeAttributes {
+        @AuraEnabled
+        public TypeAttributeContext context = new TypeAttributeContext();
+        @AuraEnabled
+        public String fieldName;
+
+        public TypeAttributeColumnTextarea(String fieldName) {
+            this.fieldName = fieldName;
+        }
+        
+    }
+
     public class ListResults {
         @AuraEnabled
         public List<SObject> records;
@@ -90,16 +119,24 @@ public with sharing class RelatedList {
                 }
                 //Check if values predefined in LWC
                 if (mapPreCols.containsKey(fieldName)) {
-                    mapPreCols = checkOverride(mapPreCols, fieldName, mfields);
-
-                    //set picklistValues for picklist type
-                    if (mapPreCols.get(fieldName).type == 'picklist') {
-                        RelatedList.initPicklistColumn(
-                            mapPreCols,
-                            objectName,
-                            fieldName
-                        );
+                    switch on mapPreCols.get(fieldName).type {
+                        when 'lookup' {
+                            mapPreCols.get(fieldName).typeAttributes = new TypeAttributeColumnLookup();
+                        }
+                        when 'picklist' {
+                            //set picklistValues for picklist type
+                            RelatedList.initPicklistColumn(
+                                mapPreCols,
+                                objectName,
+                                fieldName
+                            );
+                        }
+                        when 'textarea' {
+                            mapPreCols.get(fieldName).typeAttributes = new TypeAttributeColumnTextarea(fieldName);
+                        }
                     }
+
+                    mapPreCols = checkOverride(mapPreCols, fieldName, mfields);
                 }
             }
             return new ListResults(
@@ -123,7 +160,7 @@ public with sharing class RelatedList {
             fieldName
         );
         mapPreCols.get(fieldName).wrapText = true;
-        mapPreCols.get(fieldName).setTypeAttributes(picklistValues);
+        mapPreCols.get(fieldName).typeAttributes = new TypeAttributeColumnJsonWithPicklist(picklistValues, fieldName);
     }
 
     @AuraEnabled
@@ -199,4 +236,4 @@ public with sharing class RelatedList {
         mapPreCols.get(fieldName).sortable = sortable;
         return mapPreCols;
     }
-}
+}

force-app/main/default/classes/RelatedList_Test.cls

@@ -78,8 +78,9 @@ public with sharing class RelatedList_Test {
 
         RelatedList.initPicklistColumn(colsJson, 'Opportunity', 'StageName');
 
+        RelatedList.TypeAttributeColumnJsonWithPicklist typesAttributesPicklist = (RelatedList.TypeAttributeColumnJsonWithPicklist) colsJson.get('StageName').typeAttributes;
         System.assert(
-            colsJson.get('StageName').typeAttributes.options.size() >= 0
+            typesAttributesPicklist.options.size() >= 0
         );
     }
-}
+}

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

@@ -0,0 +1,3 @@
+<template>
+    <lightning-formatted-rich-text value={value} class="slds-align_absolute-center"></lightning-formatted-rich-text>
+</template>

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

@@ -0,0 +1,5 @@
+import { LightningElement, track, api } from 'lwc';
+
+export default class DatatableImage extends LightningElement {
+    @api value;
+}

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+	<apiVersion>54.0</apiVersion>
+	<isExposed>false</isExposed>
+</LightningComponentBundle>

force-app/main/default/lwc/datatableLookup/datatableLookup.css

@@ -0,0 +1,20 @@
+.slds-grid .slds-hyphenate {
+    width: 100%
+}
+
+.slds-grid .slds-truncate {
+    width: 100%
+}
+
+.lookup-container{
+    margin-top: -1rem;
+    margin-left: -0.5rem;
+    position: absolute !important;
+}
+
+.lookup-container .slds-dropdown{
+    position: fixed !important;
+    max-height: 120px;
+    max-width: fit-content;
+    overflow: auto;
+}

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

@@ -0,0 +1,32 @@
+<!-- sldsValidatorIgnore -->
+<template>
+  <div class="lookupBlock" id="lookup">
+      <div if:true={showLookup} class="lookup-container" onmouseleave={onMouseLeaveLookup}>
+          <lightning-record-edit-form object-api-name={object}>
+              <lightning-input-field 
+                  class="slds-popover slds-popover_edit slds-popover__body"
+                  field-name={fieldName} 
+                  value={value} 
+                  variant={variant} 
+                  onchange={handleChange}>
+              </lightning-input-field>
+          </lightning-record-edit-form>
+      </div>
+      <div if:false={showLookup} class="slds-table_edit_container slds-is-relative">
+          <span class="slds-grid slds-grid_align-spread slds-cell-edit slds-align_absolute-center">
+              <span class="slds-truncate" title={lookupName}>
+                  <lightning-formatted-url value={lookupValue} label={lookupName} target={target}>
+                  </lightning-formatted-url>
+              </span>
+              <button data-id={context} class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="-1"
+                  title="Edit" onclick={handleClick}>
+                  <svg 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"
+                      aria-hidden="true">
+                      <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.37.1#edit"></use>
+                  </svg>
+                  <span class="slds-assistive-text">Edit</span>
+              </button>
+          </span>
+      </div>
+  </div>
+</template>