In my previous post, I have told you the Usage of Lightning Record Edit Form in Lightning Web Components. Today, I will tell you how you can display errors in the Lightning Datatable.
Firstly, let me know you that there is an error attribute in the Lightning Datatable which you can use to display the errors. You simply need to provide the appropriate error data to the error attribute.
There is two important things that you need to consider:
- If you want to display
error to the cell of the table then you must make the Column editable. - If you don’t want to make the column editable then, you must set the
showRowNumberColumnattribute of the Lightning Datatable to True.
The showRowNumberColumn
Now, let us create a basic Lightning Datatable:
<aura:component>
<aura:attribute name="data" type="Object" description ="has Column data that lightning table will display"/>
<aura:attribute name="columnsData" type="List" description ="has Column definition"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:datatable keyField="id"
data="{! v.data }"
columns="{! v.columnsData }"
showRowNumberColumn='true'/>
</aura:component>({
init: function (cmp, event, helper) {
cmp.set('v.columnsData', [
{ label: 'Name', fieldName: 'Name', type: 'text'},
{
label: 'Confidence',
fieldName: 'confidence',
type: 'percent',
cellAttributes: { iconName: { fieldName: 'trendIcon' },
iconPosition: 'right' }
},
{
label: 'Amount',
fieldName: 'amount',
type: 'currency',
typeAttributes: { currencyCode: 'EUR'}
, editable:true
},
{ label: 'Contact Email', fieldName: 'Email', type: 'email', editable:true},
{ label: 'Contact Phone', fieldName: 'phone', type: 'phone'}
]);
cmp.set('v.data', [{
id: 'OPP123',
Name: 'JohnWeb',
confidence: 0.2,
amount: 25000,
Email: 'johndoe@JohnWeb.com',
phone: '2352235235',
trendIcon: 'utility:down'
},
{
id: 'OPP456',
Name: 'JaneWeb',
confidence: 0.78,
amount: 740000,
Email: 'JaneWeb@JaneWeb.com',
phone: '2352235235',
trendIcon: 'utility:up'
}]);
}
})First of all, define an error attribute in the Component,
<aura:attribute name="errors" type="Object"/>You can define a button which will trigger an Error on the Datatable.
<lightning:button label="Display Error" onclick="{!c.displayError}"/>Also, you need to modify your
<lightning:datatable keyField="id"
data="{! v.data }"
columns="{! v.columnsData }"
errors="{!v.errors}"
showRowNumberColumn='true'/>Now, create a function in the Component Controller, which will display the error in the lightning
displayError: function (cmp, event, helper) {
var errors = cmp.get("v.errors");
if(errors==undefined || errors==null ){
errors = { rows: {}, table: {} }
}
errors.rows['OPP123'] = { title: 'Testing Error1',
messages: ['Testing Error amount','Testing Error Email'],
fieldNames: ['amount', 'Email']};
errors.rows['OPP456'] = { title: 'Testing Error2',
messages: ['Testing Error amount1','Testing Error Email1'],
fieldNames: ['amount', 'Email']};
errors.table.title = "We found 2 error(s). ...";
errors.table.messages = ['Testing Error amount','Testing Error Email'];
cmp.set("v.errors", errors);
}Remove Error in Lightning Datatable
Add a button to remove all the errors that were displayed.
<lightning:button label="Remove error" onclick="{!c.removeError}"/>Create a controller function to remove the errors
removeError : function (cmp, event, helper) {
var errors = cmp.get("v.errors");
if(errors==undefined || errors==null ){
errors = { rows: {}, table: {} }
}
errors.rows['OPP123'] = { };
errors.rows['OPP456'] = { };
errors.table.title = " ";
errors.table.messages = [];
cmp.set("v.errors", errors);
}Finally, you should have something like below
Moreover, If you have any suggestions or issue with the post, you can reply in the comment box.
Support: For any further Salesforce support, Chat with us we will be happy to assist you.
Popular Post:
- Send Push Notification in Salesforce Desktop and Mobile App
- Get
ID of Custom Notification Type in Salesforce - Get Current Logged in User Details in LWC
- Toasts Notification in Lightning Web Component (LWC)
Reference: Salesforce Component Library
Recent Comments