LWC as Quick Action(s) or Try out Modal PopUp #inSalesforce

LWC as Quick Action(s) or Try out Modal PopUp #inSalesforce

Popup basic info in Account Page

Create LWC:

Template:

<template> 
    <lightning-record-view-form record-id={recordId} object-api-name="Account"> 
    <lightning-quick-action-panel style="color:#306BFF" header="Account Basic Information"> 
    <div class="slds-grid"> 
        <div class="slds-col slds-size_1-of-3"> 
            <lightning-output-field field-name="Name"></lightning-output-field> 
            <lightning-output-field field-name="AccountNumber"></lightning-output-field> 
        </div> 
        <div class="slds-col slds-size_1-of-3"> 
            <lightning-output-field field-name="Phone"></lightning-output-field> 
            <lightning-output-field field-name="BillingAddress"></lightning-output-field> 
        </div> 
    </div> 
    <div slot="footer"> 
        <lightning-button variant="neutral" label="Cancel" onclick={closeAction}></lightning-button> 
    </div> 
    </lightning-quick-action-panel> 
    </lightning-record-view-form> 
</template> 

.js:

import { LightningElement,api } from "lwc"; 
import { CloseActionScreenEvent } from "lightning/actions";
export default class ScreenAction extends LightningElement { 
@api recordId; 
closeAction() { 
this.dispatchEvent(new CloseActionScreenEvent()) 
} 
} 

.xml:
<?xml version="1.0" encoding="UTF-8"?> 
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> 
    <apiVersion>57.0</apiVersion> 
    <isExposed>true</isExposed> 
    <targets> 
        <target>lightning__RecordAction</target> 
    </targets> 
    <targetConfigs> 
        <targetConfig targets="lightning__RecordAction"> 
            <actionType>Action</actionType>
        </targetConfig> 
    </targetConfigs> 
</LightningComponentBundle> 

Deploy the above

Create Quick Action:

Setup | Object Manager | Buttons, Links, and Actions | New Action | Select the Component Created and fill up the rest

Add this to Layout:

Setup | Object Manager | Account | Page Layout | Mobile & Lightning Actions |

Search for the quick action, drag, and drop into Salesforce Mobile and Lightning Experience Actions section | Save

If lightning page is dynamic form, add the action

Test it