3

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.

6
  • 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, 2019 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... Feb 13, 2019 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, 2019 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... Feb 13, 2019 at 22:10
  • 1
    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. Feb 14, 2019 at 11:00

1 Answer 1

-1

Use this:

wave.linkName = '/'+wave.id; 

Instead of:

wave.linkName='/' +record.id
0

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.