I'm working on an lwc that has a lightning-tree-grid (nested datatable). I've made it so the name column is type:url with a link to the record. That works, but it's not really what I want to happen. I'd rather keep the user in my component rather than zipping off to the record page.
How can I make that link to a js function instead of '/'+record.Id?
Here's what I have so far...
import { LightningElement, track, api, wire } from 'lwc';
import getBlasts from '@salesforce/apex/Blast.getBlasts';
export default class BlastWaveTree extends LightningElement {
@track buttonLabel = 'Show Waves';
@track columns = [{
label: 'Name',
fieldName: 'linkName',
type: 'url',
typeAttributes: {label: { fieldName: 'name' }, target: '_blank'}
},
{
type: 'text',
fieldName: 'messageService',
label: 'Message Service'
},
{
type: 'text',
fieldName: 'startDateTime',
label: 'Start'
},
{
type: 'text',
fieldName: 'status',
label: 'Status'
}
];
@api recordId;
@track blastData;
@track error;
@wire(getBlasts, { CampaignId: '$recordId' })
wireBlastData({
error,
data
}) {
if (data) {
let tempjson = JSON.parse(JSON.stringify(data).split('waves').join('_children'));
this.blastData = tempjson;
this.blastData.forEach(function(record){
record.linkName = '/'+record.id;
record._children.forEach(function(wave){
wave.linkName = '/'+record.id;
})
console.log(JSON.stringify(record));
});
} else {
this.error = error;
}
}
}
What I'm hoping to do is have the link call a new method in the js, passing along the recordId.
Any suggestions?
ADDITIONAL INFO: Thanks to the suggestion by @tsalb, I realized that specifying type:'url' is calling lightning-formatted-url. The docs on lightning-formatted-url include an example where it provides an onclick parameter that calls a function. Promising...
However, I can't seem to get it to work. I've tried adding the onclick parameter both inside and outside the typeAttributes, but either place, I get a linting error that handleClick is not defined. It will push to the scratch org, but when I try to load it, it gives me an afterrender error that handleClick is not defined.
@track columns = [{
label: 'Name',
fieldName: 'linkName',
type: 'url',
onclick:{handleClick},
typeAttributes: {label:{fieldName:'name'} }
},
{
type: 'text',
fieldName: 'messageService',
label: 'Message Service'
},
{
type: 'text',
fieldName: 'startDateTime',
label: 'Start'
},
{
type: 'text',
fieldName: 'status',
label: 'Status'
}
];
handleClick(e){
e.preventDefault();
//process the click
}
Also tried putting it inside the typeAttributes:
@track columns = [{
label: 'Name',
fieldName: 'linkName',
type: 'url',
typeAttributes: {label:{fieldName:'name'}, onclick:{handleClick},}
},
Just noticed in the docs for lightning-tree-grid, Formatting with Datatypes section, that the typeAttributes supported for url include label, target, and tooltip. Not onclick. Makes me think I need another approach.
lightning-formatted-url
datatype, you can specify "_self: Opens the link in the same frame as it was clicked. This is the default behavior."lightning-datatable
I knowtree-grid
shares some similarity to it - so it might be undocumented - but you could give the custom data types a try? (seedatatable
docs)button-icon
type which triggers a js method, and you can also make it look like a url.