0

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.

  • Were you looking for this? per the lightning-formatted-url datatype, you can specify "_self: Opens the link in the same frame as it was clicked. This is the default behavior." – tsalb Feb 13 at 8:02
  • @tsalb not really. I want to call a function instead. Using your option would open the standard record detail in the same frame, but I want to call a custom component instead. Really need to access a function in my js. But... checking that documentation, I see there's an onclick for that. Not sure if I can use it as a datatype in a column, though. Thanks for the lead... – PatMcClellan__c Feb 13 at 19:04
  • Something I did not get to work (in my very limited test) is the custom data type on lightning-datatable I know tree-grid shares some similarity to it - so it might be undocumented - but you could give the custom data types a try? (see datatable docs) – tsalb Feb 13 at 21:47
  • @tsalb that's a good option -- though fairly involved. I think I'm just going to use row actions and take the hyperlink off the first column. Really glad you pointed that option out though... – PatMcClellan__c Feb 13 at 22:10
  • I use the aura component lightning:datatable and had the same problem you are facing, eventually I solved it by using button-icon type which triggers a js method, and you can also make it look like a url. – Itai Shmida Feb 14 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.