How to make LWC Action on Lightning record page to open the component as new tab or same tab

Question

I saw a similar question asked here (but that was not answered )

I have a similar request. I have a LWC component which needs to be added as a button/action on the Lightning record page, on click of that button, the LWC should open a separate tab or on the existing tab. However if I use target as below in LWC, it opens the LWC as a modal

   <targetConfig targets="lightning__RecordAction">
     <actionType>Action</actionType>
   </targetConfig>

All I am looking is:

1. Create a action for the LWC component - Working
2. add that action to the lightning record page - Working
3. On click of that action, the lwc must open as a new tab or open within the existing tab - Not Working (opens the lwc in a modal)

Appreciate the help..

Answer 1

there is a workaround to achive this needs, following outline follow

1. create a new LWC components for Qucik Action. name: QuickActionPage

2. Create second Components for opening in a new Tab. name: MyComponentPage

3. create a New App Page or Lightning Tab, drag & drop myComponentPage components.

4. Navigate to the Lightning tab from connectedCallback of QuickActionPage Components. // Navigate to a specific CustomTab.

     this[NavigationMixin.Navigate]({
   
      type: "standard__navItemPage",
          attributes: {
        // CustomTabs from managed packages are identified by their
        // namespace prefix followed by two underscores followed by the
        // developer name. E.g. 'namespace__TabName'
        apiName: "CustomTabName",
      },
    });
   

hope it's reslove your issue.

Answer 2

I used the headless Action and within that used the invoke method to get recordId and navigated to my child LWC.

Thanks

import { LightningElement, api } from "lwc";
import { NavigationMixin } from 'lightning/navigation';

export default class Mnrf_Checklist_Nav extends NavigationMixin(LightningElement) {

@api recordId;

@api invoke() {

    console.log("Inside invoke method :recordId", this.recordId);
        var compDefinition = {
            componentDef: "c:mnrf_Checklist_Petro",
            attributes: {
                recordId: this.recordId
            }
        };
        // Base64 encode the compDefinition JS object
        var encodedCompDef = btoa(JSON.stringify(compDefinition));
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: '/one/one.app#' + encodedCompDef
            }
        });
}

}

Answer 3

using screen action also can get current recordId info in connectedCallback.

following Js Code added in snippet.

    import { LightningElement, api,wire } from "lwc";
import { CloseActionScreenEvent } from "lightning/actions";
import {CurrentPageReference} from 'lightning/navigation';
import { NavigationMixin } from "lightning/navigation";

export default class QuickActionCmp extends LightningElement {
    @api recordId;      
    @wire(CurrentPageReference)
    pageRef(data)
    {
         this.recordId= data.state.recordId;
    }
    
    connectedCallback() {
        
        console.log('recordId'+this.recordId)
    }
}