1

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

lightning/cmp/c__myLWC?c__recordId=XXXXXXXXXXXXXXXX

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:component
  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
>
  <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:component>

Aura controller

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

    var defaultUrl = '#'
    navService.generateUrl(pageReference).then($A.getCallback(function(url){
      window.open(url, '_blank');
    }));
  }
})

myLWC.html

<template>
  <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>
    <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-card>
            <lightning-icon key={step.stepID} icon-name="utility:forward" alternative-text="Forward image" ></lightning-icon>
          </template>
          <lightning-button-icon icon-name="utility:add" onclick={addStep} alternative-text="New" class="slds-button_icon slds-size_large"></lightning-button-icon>
        </div>
      </lightning-card>

      <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>
      </template>
    </template>
  </div>
</template>

myLWC.js

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;
      }
      this.dispatchEvent(
        new ShowToastEvent({
          title: "Error loading Promo Configuration",
          message,
          variant: "error"
        })
      );
    } else if (data) {
      this.data= data;
    }
  }

  @wire(CurrentPageReference)
  currentPageReference;

  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. – rahul gawale Sep 18 '19 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. – Alexandros Barlas Sep 18 '19 at 11:34
4

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 -->
</aura:application>

**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" />
    <script>
        $Lightning.use("c:myAuraApp", function() {
             $Lightning.createComponent("c:myLWC", {
                   recordId: "{!ObjectName.Id}"
                 },
              "lightning",
              function(cmp) {
                console.log("LWC component rendered");
              }
          );
        });
    </script>
</apex:page>

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

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.