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
    Commented Mar 24, 2020 at 10:18
  • @sfdcfox my bad =)
    – unidha
    Commented Mar 24, 2020 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
    Commented Mar 24, 2020 at 14:17

5 Answers 5

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

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
    Commented Aug 24, 2020 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

You must log in to answer this question.

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