Skip to content

Commit 99c3043

Browse files
SarveshgithubSarveshgithub
authored
Merge pull request #14 from mickaelgudin/master
Buttons configuration for #11 + enhance readme
2 parents a246a84 + e486a48 commit 99c3043

File tree

3 files changed

+154
-12
lines changed

3 files changed

+154
-12
lines changed

‎README.md

+60-10
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@
66

77
## About
88

9+
To deploy the component see [Deploy](#deploy)
10+
911
This is generic lighting data table , which is build in lwc.
1012
The customization are done by design attributes.
1113

12-
Features
14+
Main features
1315
The data table has following features.
1416
- Show records for both custom and standard object.
1517
- Add cols as per the fields exist in object in JSON format.
1618
- Pagination as First,Previous,Next,Last buttons.
1719
- New record creation action
1820
- Row action, like : show detail, edit record, delete record
21+
- configurable buttons (for developers, see [Buttons configuration](#buttons-configuration-for-developers-accessible-in-the-component-and-from-parent-component) )
1922

2023
## Steps to Customization through Design Attribute
2124

@@ -24,15 +27,15 @@ Only specify the icon name if you wish to override the default icon of the objec
2427
<br/><br/>
2528
Design Attribute
2629

27-
| Label | Type | Value | Example |
28-
|-----------------|------------|------------------------------|---------------------|
29-
| Enter Icon Name | String | provide slds icon name | `standard:account` |
30-
| Enter Title | String | provide table title | LWC Table |
31-
| Enter Object API Name | String| provide object custom or standard API name| Account |
32-
| Enter Columns JSON | String | { `fieldName`:api name,`label`:col label,`type`:text,number,date }. **Note** : for related field it should be concat with . i.e : Account.Name for contact | See below **Column JSON Example**
33-
Enter Related field API Name| String | Enter related field api name | Example AccountId for contact when component is on account layout.
34-
Enter WHERE clause | String | provide aditional filters | Example `LastName like '%s' AND Account.Name like '%t'`
35-
| Show the number of record | Boolean | append the number of records in the title | checked(true) OR not checked(false) |
30+
| Label | Required | Type | Value | Example |
31+
|-----------------|------------|------------|------------------------------|---------------------|
32+
| Enter Icon Name | :x: | String | provide slds icon name | `standard:account` |
33+
| Enter Title | :heavy_check_mark: | String | provide table title | LWC Table |
34+
| Enter Object API Name | :heavy_check_mark: | String| provide object custom or standard API name| Account |
35+
| Enter Columns JSON | :heavy_check_mark: | String | { `fieldName`:api name,`label`:col label,`type`:text,number,date }. **Note** : for related field it should be concat with . i.e : Account.Name for contact | See below **Column JSON Example**
36+
Enter Related field API Name | :x: | String | Enter related field api name | Example AccountId for contact when component is on account layout.
37+
Enter WHERE clause | :x: | String | provide aditional filters | Example `LastName like '%s' AND Account.Name like '%t'`
38+
| Show the number of record | :x: | Boolean | append the number of records in the title | checked(true) OR not checked(false) |
3639

3740
## Columns JSON Example
3841
``` yaml
@@ -58,6 +61,53 @@ Enter WHERE clause | String | provide aditional filters | Example `LastName like
5861
"type": "text"
5962
}]
6063
```
64+
## Buttons configuration (for developers, accessible in the component and from parent component)
65+
66+
### Call apex or javascript method
67+
For a button that is going to call callApexFromButton, the properties must be :
68+
- callApexFromButton: true
69+
70+
### Fire event to parent component
71+
For a button that is going to fire an event, the properties must be :
72+
- callApex: false
73+
- needSelectedRows : can be true if you need to send selected rows to parent component
74+
75+
### Example
76+
Javascript array (actionButtonsList property) :
77+
```
78+
[
79+
{ label : "delete all", variant: "destructive", needSelectedRows: true, callApex: true },
80+
{ label : "action button", variant : "brand", needSelectedRows: false, callApex: false },
81+
{ label : "another action button", variant : "brand", needSelectedRows: true, callApex: false }
82+
];
83+
```
84+
Parent component (**you don't need parent component, you can define default buttons using actionButtonsList**) :
85+
```
86+
//in template
87+
<c-lwc-related-list object-name="Contact"
88+
columns={columns}
89+
related-field-api="AccountId"
90+
is-counter-displayed=true
91+
action-buttons-list={actions}
92+
show-checkboxes=true
93+
onaction2={helloWorld}
94+
onaction3={helloWorld}
95+
96+
//in js controller
97+
helloWorld(event) {
98+
console.log('hello world');
99+
console.log('event rows ', event.detail);
100+
}
101+
```
102+
103+
- The first button "delete all" is not going to send event to parent it will call the javascript method callApexFromButton you must
104+
implement the desired javascript/apex call based on the button label.
105+
- The button "action button" fires the event action2
106+
- The button "another action button" fires the event action3
107+
108+
The results should be :
109+
![Capture buttons](https://user-images.githubusercontent.com/39730173/158386203-bca7099f-0070-48d2-8ec9-6936a68dd754.PNG)
110+
61111
## Deploy
62112
Click Button to deploy source in Developer/Sandbox
63113

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

+54-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,42 @@
11
<template>
22
<!-- Main content -->
33
<lightning-card variant="Narrow" title={titleFormatted} icon-name={iconName}>
4-
<lightning-button label="New" title="Non-primary action" onclick={newRecord} class="slds-m-left_x-small"
4+
<!--default button create -->
5+
<template if:false={actionButtonsListNotEmpty}>
6+
<lightning-button label="New" title="Non-primary action" onclick={newRecord} class="slds-m-left_x-small"
57
slot="actions"></lightning-button>
8+
</template>
9+
10+
<!-- custom buttons for list -->
11+
<template if:true={actionButtonsListNotEmpty}>
12+
<template for:each={actionButtonsList} for:item="actionButton" for:index="index">
13+
<lightning-button if:true={actionButton.callApex}
14+
key={actionButton.label}
15+
label={actionButton.label}
16+
title={actionButton.label}
17+
variant={actionButton.variant}
18+
onclick={callApexFromButton}
19+
data-name={actionButton.label}
20+
class="slds-m-left_x-small"
21+
slot="actions"
22+
>
23+
</lightning-button>
24+
25+
<lightning-button if:false={actionButton.callApex}
26+
data-index={index}
27+
key={actionButton.label}
28+
label={actionButton.label}
29+
title={actionButton.label}
30+
variant={actionButton.variant}
31+
onclick={fireEventFromButton}
32+
class="slds-m-left_x-small"
33+
slot="actions"
34+
>
35+
</lightning-button>
36+
37+
</template>
38+
</template>
39+
640
<!-- Error block -->
741
<template if:true={error}>
842
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
@@ -12,9 +46,27 @@
1246
</template>
1347
<!-- Data table -->
1448
<template if:true={data}>
15-
<lightning-datatable key-field="id" data={data} columns={columns} onrowaction={handleRowAction}
49+
<!-- DATATALBE WITHOUT CHECKBOXES -->
50+
<lightning-datatable
51+
if:false={showCheckboxes}
52+
key-field="id"
53+
data={data}
54+
columns={columns}
55+
onrowaction={handleRowAction}
1656
hide-checkbox-column>
1757
</lightning-datatable>
58+
59+
<!-- DATATABLE WITH CHECKBOXES -->
60+
<lightning-datatable
61+
if:true={showCheckboxes}
62+
key-field="id"
63+
data={data}
64+
columns={columns}
65+
onrowaction={handleRowAction}
66+
onrowselection={handleRowSelection}
67+
>
68+
</lightning-datatable>
69+
1870
</template>
1971
<!-- Pagination -->
2072
<div slot="footer" style="text-align: right;">

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

+40
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,15 @@ export default class LightningDatatable extends NavigationMixin(
2929
@api whereClause;
3030
@api limit = 10;
3131
@api isCounterDisplayed;
32+
@api actionButtonsList; //buttons for the list
33+
@api showCheckboxes;
3234
// Private Property
3335
@track data;
3436
@track soql;
3537
@track offSet = 0;
3638
@track totalRows = 0;
3739
@track error;
40+
@track selectedRows;
3841

3942
// Do init funtion
4043
connectedCallback() {
@@ -263,4 +266,41 @@ export default class LightningDatatable extends NavigationMixin(
263266
get titleFormatted() {
264267
return (this.isCounterDisplayed) ? this.title + ` (${this.totalRows})` : this.title;
265268
}
269+
270+
callApexFromButton(event) {
271+
//call desired apex method based on buttonLabel value
272+
//if button has needSelectedRows set to true, have selected rows using this.selectedRows
273+
const buttonLabel = event.target.dataset.name;
274+
console.log('callApexFromButton, button clicked has label : '+buttonLabel);
275+
}
276+
277+
fireEventFromButton(event) {
278+
event.preventDefault();
279+
console.log('fireEventFromButton');
280+
const buttonPos = Number(event.target.dataset.index) + 1;
281+
const button = this.actionButtonsList[buttonPos-1];
282+
let buttonEvent = null;
283+
284+
console.log('action'+buttonPos);
285+
286+
if(button.needSelectedRows && button.needSelectedRows === true) {
287+
buttonEvent = new CustomEvent(
288+
'action'+buttonPos,
289+
{ detail : JSON.stringify(this.selectedRows) }
290+
);
291+
} else {
292+
buttonEvent = new CustomEvent('action'+buttonPos);
293+
}
294+
295+
// Dispatches the event.
296+
this.dispatchEvent(buttonEvent);
297+
}
298+
299+
handleRowSelection(event){
300+
this.selectedRows = JSON.parse(JSON.stringify(event.detail.selectedRows) );
301+
}
302+
303+
get actionButtonsListNotEmpty() {
304+
return this.actionButtonsList && this.actionButtonsList.length > 0;
305+
}
266306
}

0 commit comments

Comments
 (0)