thanks for reading
I've created a dataTable and added some buttons at the end of it. The purpose of the buttons are for the user to click on them and get redirected to the record page for editing/viewing the record.
Looks something like this:
So the idea here is that when the user clicks the Edit button I can use an event to redirect the user to that record page …. I need the current Id from the row the user is clicking the button in so I don't redirect them to any record page, but the one with the proper Id.
I've been trying with every possible way to get the record id and then further process it but I'm not being able to.
This are 2 components, one nested inside the other:
I won't paste ALL the code, but parts of it:
dataTable.cmp
<table aria-multiselectable="true" class="cTable slds-table slds-no-cell-focus slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<aura:if isTrue="{!v.showRowNumberColumn}">
<th scope="col" style="width:50px;max-width:60px;text-align:center;">#</th>
</aura:if>
<aura:iteration items="{!v.columns}" var="col">
<th name="{!col.sortBy}" aria-label="{!col.label}" aria-sort="none" class="{!col.thClassName}" scope="col" style="{!col.style}">
<span class="{!!col.sortable ? 'slds-truncate slds-p-horizontal_x-small' : 'slds-hide'}" title="{!col.label}">{!col.label}</span>
<a class="{!col.sortable ? 'slds-th__action slds-text-link_reset' : 'slds-hide'}" href="javascript:void(0);" role="button" tabindex="0" onclick="{!c.sortTable}">
<span class="slds-assistive-text">Sort by: {!col.label}</span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate" title="{!'Sorty by: '+col.label}">
<span class="slds-truncate" title="{!col.label}">{!col.label}</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<lightning:icon iconName="{!v.sortDirection=='asc'?'utility:arrowup':'utility:arrowdown'}" size="xx-small"
class="{!v.sortBy==col.sortBy? 'slds-m-left_x-small':'slds-is-sortable__icon'}" />
</span>
</div>
</a>
<div class="{!col.resizable ? 'slds-resizable' : 'slds-hide' }" onmousedown="{!c.calculateWidth}">
<input type="range" min="50" max="1000" class="slds-resizable__input slds-assistive-text" tabindex="-1"/>
<span class="slds-resizable__handle" ondrag="{!c.setNewWidth}" style="will-change: transform;">
<span class=""></span>
</span>
</div>
</th>
</aura:iteration>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.tableData}" var="row" indexVar="rowIndex">
<tr aria-selected="false" class="slds-hint-parent">
<aura:if isTrue="{!v.showRowNumberColumn}">
<td scope="col" style="width:50px;max-width:60px;text-align:center;">{!rowIndex+1}</td>
</aura:if>
<aura:iteration items="{!row.fields}" var="field" indexVar="fieldIndex">
<td class="{!field.tdClassName}" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<aura:if isTrue="{!field.mode == 'view'}">
<aura:if isTrue="{!field.type == 'link'}">
<a class="slds-truncate" id="{!rowIndex+'-'+fieldIndex}" href="{!field.value}" title="{!field.title}" target="{!field.target}">{!field.label}</a>
</aura:if>
<aura:if isTrue="{!field.type == 'button'}">
<lightning:button label="{!field.typeAttributes.label}" name="{!rowIndex+'-'+fieldIndex}" title="{!field.typeAttributes.title}" variant="brand" value="{!field.typeAttributes.value}" iconName="utility:edit" onclick="{!c.viewRecord }">{!field.typeAttributes.value}</lightning:button>
</aura:if>
<aura:if isTrue="{!field.type == 'link-action'}">
<a class="slds-truncate" id="{!rowIndex+'-'+fieldIndex+'-'+field.actionName}" title="{!field.title}" onclick="{!c.onRowAction}">{!field.label}</a>
</aura:if>
<aura:if isTrue="{!field.type == 'date'}">
<lightning:formattedDateTime class="slds-truncate" value="{!field.value}" year="numeric" month="numeric" day="numeric" timeZone="UTC"/>
</aura:if>
<aura:if isTrue="{!field.type == 'number'}">
<lightning:formattedNumber class="slds-truncate" value="{!field.value}" style="{!field.formatter}" currencyCode="{!field.currencyCode}"
minimumFractionDigits="{!field.minimumFractionDigits}" maximumFractionDigits="{!field.maximumFractionDigits}"/>
</aura:if>
<aura:if isTrue="{!!field.isViewSpecialType}">
<span class="slds-truncate" title="{!field.value}">{!field.value}</span>
</aura:if>
<aura:if isTrue="{!field.editable}">
<lightning:buttonIcon iconName="utility:edit" variant="bare" name="{!rowIndex+'-'+fieldIndex}" onclick="{!c.editField}" alternativeText="{! 'Edit: '+field.value}" class="slds-cell-edit__button slds-m-left_x-small" iconClass="slds-button__icon_hint slds-button__icon_edit"/>
</aura:if>
<aura:set attribute="else"> <!--EDIT MODE-->
<aura:if isTrue="{!field.isEditSpecialType}">
<aura:if isTrue="{!field.type == 'picklist'}">
<lightning:select label="Hidden" variant="label-hidden" class="slds-truncate ctInput" name="{!rowIndex+'-'+fieldIndex}" value="{!field.value}" onchange="{!c.onInputChange}">
<aura:iteration items="{!field.selectOptions}" var="pl">
<option value="{!pl.value}">{!pl.label}</option>
</aura:iteration>
</lightning:select>
</aura:if>
<aura:set attribute="else">
<lightning:input name="{!rowIndex+'-'+fieldIndex}" type="{!field.type}" value="{!field.value}" variant="label-hidden" onchange="{!c.onInputChange}" class="ctInput"
formatter="{!field.formatter}"/>
</aura:set>
</aura:if>
</aura:set>
</aura:if>
</span>
</td>
</aura:iteration>
</tr>
</aura:iteration>
</tbody>
</table>
This is the part in the above code where the button is called:
<aura:if isTrue="{!field.type == 'button'}">
<lightning:button label="{!field.typeAttributes.label}" name="{!rowIndex+'-'+fieldIndex}" title="{!field.typeAttributes.title}" variant="brand" value="{!field.typeAttributes.value}" iconName="utility:edit" onclick="{!c.viewRecord }">{!field.typeAttributes.value}</lightning:button>
As you can see, when use clicks the button it should call the controller function viewRecord:
viewRecord : function(component, event, helper) {
var field = event.getSource()
var indexes = field.get("v.name")
var recId = event.getParam('row').Id;
console.log(recId, 'recId')
console.log(field, 'field')
console.log(indexes, 'indexes')
},
This is the code for it, but I'm not being able to get the recordId from the current row it's iterating, I need that to pass it to the e.force:editRecord event for further processing.
Best Answer
Fixed it :D
If anyone if having the same problem here is the solution:
In the value attribute on the button you can get the row.Id value of the current row being iterated.
Then on the JS you can get the record Id like this: