4

I'm using the following code to open a report using a LWC card.

JS controller

navigateToReport(event) {
    // Navigate to the Contact object's Recent list view.
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.settings.businessStrikesReportId,
            objectApiName: 'Report',
            actionName: 'view'
        },
        state: { 
            fv0: this.account.data.fields.Id.value,
            fv1: event.target.dataset.id
        } 
    });
}

HTML template

<div class="slds-truncate">
   <a onclick={navigateToReport} data-id="Active">Active Business Strikes: </a>
</div>

When I test this, the report opens in the same tab. I tried using target="_blank" in but it does the same.

Is there any other way to achieve this?

7

You can do it via:

navigateToReport(event) {
    // Make sure the event is only handled here
    event.stopPropagation();

    // Navigate to the Contact object's Recent list view.
    this[NavigationMixin.GenerateUrl]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.settings.businessStrikesReportId,
            objectApiName: 'Report',
            actionName: 'view'
        },
        state: { 
            fv0: this.account.data.fields.Id.value,
            fv1: event.target.dataset.id
        } 
    }).then(url => { window.open(url) });
}

Note that this adds a promise evaluation "then" handler that takes the URL and opens it in a new tab. It also makes sure the event is only handled by this onclick handler.

8
  • I tried this but still doesn't work. Do you mean, I should add another handler for "then" part? I'm quite new to LWC and Javascripts is not my forte – Shiran Apr 7 '20 at 23:41
  • The "then" handler is in the code sample I provided - did you try this along with the stop propagation? This works for us... – Phil W Apr 8 '20 at 7:48
  • Yes, I did exactly that. Should I use any import directive to make the 'then' handler work? – Shiran Apr 8 '20 at 23:44
  • No, no more than the imports you already need for the rest of it. I assume you extend the mix in appropriately? – Phil W Apr 9 '20 at 6:49
  • Yeah, I did it like "export default class AccountDemeritsCard extends NavigationMixin(LightningElement)" which is the correct way, I guess. – Shiran Apr 15 '20 at 1:35
5

I know this is old and you have probably figured it out by now, but I thought I would answer this one as it seems to be one of the top results on Google.

Per the documentation here, you can use the GenerateURL API to get just the URL of the record page. You can then navigate to the URL via window.open(url).

this[NavigationMixin.GenerateUrl]({
    type: 'standard__recordPage',
    attributes: {
        recordId: '005B0000001ptf1IAE',
        actionName: 'view',
    },
}).then(url => {
     window.open(url);
});
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.