You need to sign in to do that
Don't have an account?
Joseph Winter
Cannot retrieve attribute of lightning:button when created through lightning:datatable
I am creating a datatable to display a list of events, hosted on a lightning component designed for mobile.
I want to be able to navigate to a record in the datatable when clicking on the record's label. In this instance, making the column of type URL does not properly work in the mobile app, so i must use "e.force:navigateToURL" to handle the navigation to the record. To achieve this, I made the column of type "button".
To get the right record Id, i have stored the Id of the record as the "name" attribute of the button, (see line 4 of the JS Controller) and want to retrieve this from the buttons event (see line 25 of the JS Controller). For some reason, this value is always returned as "undefined" when logged.
Why is this the case? The "event.getSource().get("v.name")" retrieves nothing even though the button is a "lightning:button".
Please advise on whether this is a limitation of the lightning:datatable or not.
Thanks
I want to be able to navigate to a record in the datatable when clicking on the record's label. In this instance, making the column of type URL does not properly work in the mobile app, so i must use "e.force:navigateToURL" to handle the navigation to the record. To achieve this, I made the column of type "button".
To get the right record Id, i have stored the Id of the record as the "name" attribute of the button, (see line 4 of the JS Controller) and want to retrieve this from the buttons event (see line 25 of the JS Controller). For some reason, this value is always returned as "undefined" when logged.
<aura:component controller="LtngCtrlEventsList" implements="force:appHostable,flexipage:availableForAllPageTypes" access="global"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="eventsList" type="Object" access="public"/> <aura:attribute name="columnsList" type="List" access="public"/> <lightning:card iconName="standard:event" title="Today's Events"> <div class="slds-p-horizontal_medium"> <lightning:datatable keyField="id" data="{!v.eventsList}" columns="{!v.columnsList}" hideCheckboxColumn="true" onrowaction="{!c.redirect}"/> </div> </lightning:card> </aura:component>
({ doInit : function(component, event, helper) { component.set("v.columnsList",[ {label: "Subject", fieldName: "linkName", type: "button", typeAttributes: {label: {fieldName: 'Subject'}, name: {fieldName : 'Id'}, onClick: '{!c.redirect}'}}, {label: "Time", fieldName: "StartDateTime", type: "date", typeAttributes: {hour:"2-digit", minute:"2-digit"}}, {label: "Concerning", fieldName: "WhatName", type: "text"} ]); var action = component.get("c.getUserEvents"); action.setCallback(this, function(a) { if (a.getState() == 'SUCCESS'){ var response = a.getReturnValue(); console.log(response); response.forEach(function(record){ record.linkName = "{!v.directToRecord}"; if(record.What) record.WhatName = record.What.Name; }); component.set("v.eventsList", response); } }); $A.enqueueAction(action); }, redirect : function(component, event, helper){ console.log(event.getSource().get("v.name")); var urlEvent = $A.get("e.force:navigateToURL"); urlEvent.setParams({ "url": "/" + event.getParam("name") }); urlEvent.fire(); } })I can confirm the button is rendered with the "name" attribute populated, as seen below:
Why is this the case? The "event.getSource().get("v.name")" retrieves nothing even though the button is a "lightning:button".
Please advise on whether this is a limitation of the lightning:datatable or not.
Thanks
var columns = [
{label: 'Opportunity name', fieldName: 'opportunityName', type: 'text', sortable: true, iconName: 'standard:opportunity'},
{label: 'Close date', fieldName: 'closeDate', type: 'date', sortable: true, cellAttributes: { iconName: 'utility:event', iconAlternativeText: 'Close Date' }},
{label: 'View', type: 'button', initialWidth: 135, typeAttributes: { label: 'View Details', name: 'view_details', title: 'Click to View Details'}},
];
controller:
handleRowAction: function (cmp, event, helper) {
var action = event.getParam('action');
var row = event.getParam('row');
switch (action.name) {
case 'view_details': helper.showRowDetails(row); break;
case 'edit_status': helper.editRowStatus(cmp, row, action); break;
default: helper.showRowDetails(row); break;
}
}
helper:
showRowDetails : function(row) {
// eslint-disable-next-line no-alert
alert("Showing opportunity " + row.opportunityName + " closing on " + row.closeDate);
}
https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInAction