2

I am trying to create a service component that contains all different types of navigation methods based on NavigationMixin methods. When tried to use the method in a component, it throws an error that NavigationMixin is undefined [Cannot read property 'Symbol(GenerateUrl)' of undefined]. In regular LWC components, this would be if I failed to include the NavigationMixin in the class name declaration like

    export default class MyComponent extends NavigationMixin(LightningElement) {}

Can I use the NavigationMixin methods in a service component at all? I couldn't find any documentation about the same.

Below is the code of my service component

    import { NavigationMixin } from 'lightning/navigation';

    const openRecordViewPage = ( recordId ) => {
        let recordPageUrl = '';
            this[NavigationMixin.GenerateUrl]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: recordId,
                    actionName: 'view',
                },
            }).then(url => {
                recordPageUrl = url;
                window.open(recordPageUrl);
            })
            .catch( exception => {
                console.error(`Exception in openRecordViewPage(): ${JSON.stringify(exception)}`);
            });
    }

    export {openRecordViewPage};
1

You need to use a class for this to work:

import { NavigationMixin } from 'lightning/navigation';

const Q296547 = (superclass) => class extends NavigationMixin(superclass) {
    openRecordViewPage(recordId) {
        let recordPageUrl = '';
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__recordPage',
            attributes: {
                recordId: recordId,
                actionName: 'view',
            },
        }).then(url => {
            recordPageUrl = url;
            window.open(recordPageUrl);
        })
        .catch( exception => {
            console.error(`Exception in openRecordViewPage(): ${JSON.stringify(exception)}`);
        });

    }
}

export { Q296547 }

And from there, in your main code, use this mixin like any other:

import { Q296547 } from 'c/Q296547';

export default class MyOtherComponent extends Q296547(LightningElement) {
    // main code here //
}
| improve this answer | |
  • When I tried to use this, I get an error "Cannot read property 'dispatchEvent' of undefined". I might be doing it wring: ``` lang-js import { Q296547 } from 'c/pageNav'; export default class NavTestComponent extends Q296547(LightningElement) { // main code here // recordId = 'a1RN0000005gvNPMAY'; handleButtonClick(){ // this[Q296547.openRecordViewPage](this.recordId); Q296547( this.recordId ); } } ``` – Naga Mar 3 at 0:41

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.