Most questions I've seen are for redirecting FROM lwc to another page. I need the other way around. I am in the record page and I want to click a quick action button and take me to a page where I display an LWC. I've been successful in displaying the LWC inside an Aura component (as a pop-up inside the record page) but this is not desirable.

I've been able to generate a URL


When the redirect happens and opens a new browser tab, salesforce gives me:

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

I have created a custom tab for Lightning Component and specified the Aura component for it.

Has anyone encountered a similar problem and would like to share a solution ??

Many thanks in advance.

Aura component connected to the quick action button

  <aura:attribute name="url" type="String" />
  <aura:attribute name="pageReference" type="Object" />
  <aura:handler name="init" value="{! this }" action="{! c.doInit }" />
  <lightning:navigation aura:id="navService" />

Aura controller

    doInit : function(cmp, event, helper) {
    var navService = cmp.find("navService");
    var pageReference = {
      type: 'standard__component',
      attributes: {
        componentName: 'c__myLWC'
        c__recordId: cmp.get('v.recordId')

    var defaultUrl = '#'
      window.open(url, '_blank');


  <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
    <template if:false={jsonFile}>
      No Data
    <template if:true={jsonFile}>
      <lightning-card title={jsonFile.title} icon-name="custom:custom3">
        <lightning-button-icon icon-name="utility:save" onclick={saveJson} alternative-text="Save" slot="actions" size="medium" class="slds-button_icon slds-size_medium"></lightning-button-icon>
        <div class="slds-m-around_medium">
          <template for:each={jsonFile.steps} for:item="step">
            <lightning-card key={step.stepID} title={step.stepID} class="block-inline slds-card_boundary">
              <lightning-button-icon id={step.stepID} icon-name="utility:edit" onclick={renderStep} alternative-text="Edit" slot="actions" size="x-small" class="slds-button_icon slds-size_x-small"></lightning-button-icon>
              <lightning-button-icon id={step.stepID} icon-name="utility:delete" onclick={deleteStep} alternative-text="Delete" slot="actions" size="x-small" class="slds-button_icon slds-size_x-small"></lightning-button-icon>
              <div class="slds-card__body slds-card__body_inner">{step.title}</div>
            <lightning-icon key={step.stepID} icon-name="utility:forward" alternative-text="Forward image" ></lightning-icon>
          <lightning-button-icon icon-name="utility:add" onclick={addStep} alternative-text="New" class="slds-button_icon slds-size_large"></lightning-button-icon>

      <template for:each={jsonFile.steps} for:item='step' for:index='index'>
        <c-b2c-step-cmp key={step.stepID} step-id={step.stepID} title={step.title} section={step.sections} step-id-click={stepIdClicked}></c-b2c-step-cmp>


In this component I have some business logic ommited for obvious reasons but the jist is that the whole component doesn't show.

import { LightningElement, track, wire, api } from "lwc";
import { NavigationMixin, CurrentPageReference } from "lightning/navigation";
import { getRecord, updateRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class myLWC extends NavigationMixin(LightningElement) {
  @track data;
  @api recordId;

  @wire(getRecord, {
    recordId: "$recordId"
  wiredRecord({ error, data }) {
    if (error) {
      let message = "Unknown error";
      if (Array.isArray(error.body)) {
        message = error.body.map(e => e.message).join(", ");
      } else if (typeof error.body.message === "string") {
        message = error.body.message;
        new ShowToastEvent({
          title: "Error loading Promo Configuration",
          variant: "error"
    } else if (data) {
      this.data= data;


  get recordIdFromState() {
    return (
      this.currentPageReference && this.currentPageReference.state.c__recordId
  • Alexandros, you need to create a quick action using lightning component, then add that quick action on the page layout. this question might be helpful for you. Sep 18, 2019 at 9:55
  • 1
    @rahulgawale I used this initially but it doesn't redirect to a new page as I need, it pops up inside the record page and it's not desirable. Sep 18, 2019 at 11:34

1 Answer 1


You could embed your LWC in a Visualforcepage, and create a VF action instead. For doing so you'd have to embed your LWC in an aura:app —instead of an aura:component.

Here's a pseudo-code —you may need to adjust it: The Aura app (myAuraApp)

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:myLWC"/> <!-- Not sure if the "c:" part is needed here -->

**The VF page ** (Note: for standardController use the object you want the action for. Eg: "Account", "YourCustomObject__c")

<apex:page lightningStylesheets="true" standardController="ObjectName">
    <apex:includeLightning />
    <div id="lightning" />
        $Lightning.use("c:myAuraApp", function() {
             $Lightning.createComponent("c:myLWC", {
                   recordId: "{!ObjectName.Id}"
              function(cmp) {
                console.log("LWC component rendered");

Anyway, try this out and let me know how it goes :)


You must log in to answer this question.

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