0

My scenario is I have to override a button that called LWC. Due to limitation that not able to retrieve parent id in Aura, I have to embed AURA in Visualforce including LWC.

The LWC is done nothing except act as dispatcher to call the apex controller and redirect based on the result. I tried to redirect using NavigationMixin refer to code below but it fails. For me it should works based on googling result, however I never find any example that use Visualforce page, Aura and LWC and then redirect so now I wonder whether is it possible to do navigation from LWC when it is wrapped inside VF page. Here my code example :

Visualforce page

    $Lightning.use("c:customObjectAura", function() {
         $Lightning.createComponent("c:customObjectLwc", {
                 opportunityId:"{!CustomObject.Opportunity__c}"
             },

          "lightning",
          function(component) {
            console.log("LWC component was created");

          }
      );
    });
</script>

Here my Aura app - it does nothing only to wrap LWC.

<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="customObjectLwc"/>
<aura:dependency resource="markup://force:*" type="EVENT"/>
</aura:application>

Here my lwc javascript. All success except for NavigationMix

import { LightningElement ,track,api,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { createRecord } from 'lightning/uiRecordApi';
import CUSTOM_OBJECT from '@salesforce/schema/CustomObject__c';
import OPPORTUNITY_ID from '@salesforce/schema/CustomObject__c.Opportunity__c';
import RECORD_TYPE_ID from '@salesforce/schema/CustomObject__c.RecordTypeId';
import getCustomObjectWrapper from '@salesforce/apex/CustomObject__c_Create_LWC.getBBRWrapper';

export default class customObjectLwc extends NavigationMixin(LightningElement){
    @api results;
    @api recordId;
    @api opportunityId;
    @api createStatus;

   connectedCallback() {  

     getCustomObjectWrapper(        
           {
                opportunityId:this.opportunityId
            })
             .then(result => {
                      this.result = result;
                      console.log('result ==> '+JSON.stringify(result));
                      console.log('recordTypeId ==> '+result.recordTypeId);

                      this.createStatus = result.createStatus;
                      this.opportunityId=result.opportunityId;
                      this.recordTypeId=result.recordTypeId;
                      this.recordId=result.recordId;

                        console.log('The record id is returned  '+this.recordId);

                         this[NavigationMixin.Navigate]({
                            type: 'standard__recordPage',
                            attributes: {
                                recordId: this.recordId,
                                objectApiName: 'CustomObject__c', // objectApiName is optional
                                actionName: 'view'
                            }
                        });

            })
            .catch(error => {
               this.results = [];
               this.error = error;
               console.log('this.error ==> '+this.error);

           });
    }//end of connectedCall
}
  • This is an X-Y Problem. You'll need to ask your "X" to get a viable solution. – sfdcfox Mar 24 at 10:18
  • @sfdcfox my bad =) – unidha Mar 24 at 10:41
  • Thank you very much for fast reply. I just came out from Visualforce and Apex's cave and jump to study the LWC . I know this is bad question, I spent alot of my time on research and code but completely dumb to check those supported features. Again really appreciate all the replies . Lesson is learned .=) – unidha Mar 24 at 14:17
1

When you look at lightning-navigation, you'll see it's only supported in:

Lightning Experience, Lightning Communities, Salesforce Mobile App

Notably, it is not supported in Lightning Out. You'll need to come up with a different approach.

| improve this answer | |
  • you are faster :) – Oleksandr Berehovskyi Mar 24 at 10:20
  • 1
    @OleksandrBerehovskyi Great minds think alike! Glad to see you're still active around here. – sfdcfox Mar 24 at 10:21
  • So, How can redirect the LWC which is embedded in the VF page. For classic we can use window.open(/recId). Can you tell us the method to redirect in lighnting experience? What is the solution for that? – SFDC Aug 6 at 7:42
  • @SFDC You would need to send an event from LWC to VF, and upon getting the event, use sforce.one.navigateToUrl (or the like), to navigate in Lightning Experience. Check the docs. – sfdcfox Aug 6 at 14:30
  • Got it thanks @sfdcfox, right now I added different URL for lighting and wrote window.location.assign – SFDC Aug 7 at 7:25
3

it is expected behavior. please check documentation Navigation

Experience Lightning Experience, Lightning Communities, Salesforce Mobile App

it will not work for Lightning Out (embedded in VF page)

| improve this answer | |
  • you can can override the button with url and your url can be your lightning component url should be like lightning/cmp/c__yourcomponentname. It will run in lightning framework and supports navigation events. In your lightning component implement isurladdressable interface – venky Aug 24 at 6:39

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.