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
}
3
  • This is an X-Y Problem. You'll need to ask your "X" to get a viable solution.
    – sfdcfox
    Mar 24 '20 at 10:18
  • @sfdcfox my bad =)
    – unidha
    Mar 24 '20 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 '20 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.

5
  • you are faster :) Mar 24 '20 at 10:20
  • 1
    @OleksandrBerehovskyi Great minds think alike! Glad to see you're still active around here.
    – sfdcfox
    Mar 24 '20 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 '20 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 '20 at 14:30
  • Got it thanks @sfdcfox, right now I added different URL for lighting and wrote window.location.assign
    – SFDC
    Aug 7 '20 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)

1
  • 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 '20 at 6:39
1

If you are using the LWC in a VFPage then the following does't work which works in LEX.

this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: actualRecordId,
                        objectApiName: objectAPI,
                        actionName: 'view'
                    }
                });

So if you want to redirect to a record page from LWC embedded in a VFPage then you can use

window.location.assign('/'+actualRecordId);
0

As a work around you can fetch the base URL of salesforce using window.location.origin

and implement the below solution using an anchor tag.

/*for custom URL for use in href of anchor tab*/
  get setBaseUrl() {
    return (this.sfdcBaseURL = window.location.origin + "/" + this.recordId);
  }
    <a
      class="slds-button slds-button_brand"
      href={setBaseUrl}
      if:true={setBaseUrl}
      >Back</a
    >
-1

Still you can make it working like below

Call your LWC in lightning.app

<c:lwcComponent lwcVar="{!v.variable}" />

In lwc component add a variable with @api decorator

@api lwcVar

Based on lwcVar you can update your NavigationMixin.Navigate

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.