1

I am working with two LWC's to open the LWC below "demoPDFViewer" in a sub-tab in the console. The sub-tab opens but displays:

"This page isn't available in Salesforce Lightning Experience or mobile app."

enter image description here

The code for the demo_PDFViewer works fine when displayed on any page so I am not going to paste that code, I am having trouble when launching onclick and navigating to the LWC in a sub-tab.

The code for the LWC in question (demo_ViewBillsComponent) is below:

HTML:

<template>
    <div class="button-group">
        <lightning-button label="View Bill" variant="brand" onclick={handleViewBill}></lightning-button>
        <lightning-button label="View Last 3 Bills" onclick={handleViewLastThreeBills}></lightning-button>
    </div>
</template>

JS:

    import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class Demo_ViewBillsComponent extends NavigationMixin(LightningElement) {

    handleViewBill() {
        console.log('Navigating to Lightning Component Tab: demo_PDFViewer');
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__demoPDFViewer'
            },
            state: {
                
            }
        }).then(() => {
            // Navigation success logic
            console.log('Navigation successful');
        }).catch(error => {
            // Handle navigation error
            console.error('Navigation error:', error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Error navigating to demo_PDFViewer component tab',
                    variant: 'error'
                })
            );
        });
    }
}

The portion I am looking for help on is the handleViewBill navigationMixin, which seems to be redirecting me to something that doesn't exist, or my syntax is wrong.

Any thoughts or is there something I am missing?

The overall goal is to display the Telco360 PDF LWC in the red highlighted tab, when clicking "view bill"

enter image description here

1 Answer 1

0

I was able to get this to work by wrapping the LWC in an Aura Component, below is the wrapper code:

CMP:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,lightning:isUrlAddressable">
    <aura:attribute name="pdfUrl" type="String" />
    <iframe src="{!v.pdfUrl}" width="100%" height="1000px" frameborder="0" />
</aura:component>

controller:

({
    doInit: function(component, event, helper) {
        var pdfUrlParam = component.get("v.pageReference").state.c__pdfUrl;
        // Decode the URL parameter if needed
        var pdfUrl = decodeURIComponent(pdfUrlParam);
        component.set("v.pdfUrl", pdfUrl);
    }
})

final js for demo_ViewBillsComponent

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class Demo_ViewBillsComponent extends NavigationMixin(LightningElement) {
    handleViewBill() {
        console.log('Navigating to Aura Component: c__DemoPDFViewerWrapper');

        const pdfUrlParam = encodeURIComponent('/resource/ViewBill_PDF_Jan'); // Update with your actual PDF URL
        const url = '/lightning/cmp/c__DemoPDFViewerWrapper?c__pdfUrl=' + pdfUrlParam;

        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: url
            }
        }).then(() => {
            console.log('Navigation successful');
        }).catch(error => {
            console.error('Navigation error:', error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Error navigating to DemoPDFViewerWrapper component',
                    variant: 'error'
                })
            );
        });
    }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .