Forcetrails: How to pass url parameter from lightning application to lwc

Hello Trailblazers!!

While I was trying to implement a custom form element in Lightning we component, I wanted to open that in Lightning Application so that I can see the immediate results as I save the changes instead of putting it directly on the record page of the object. Apparently, I was not able to get the record id from the Lightning Application to LWC. I tried to search for many articles, documentation on this but I was not able to find the solution to the problem. The problem was, I was not getting the record in Lwc which resulted to fail uiRecordApi.

Finally, I found the obvious solution which I was not getting in my head.

1. Created public reactive for recordId.
2. Created an attribute in my lightning application with name = id, you can give whatever you want.
3. Passed that id attribute from lightning application to Lwc as a merge field.

And, yes it solved my problem. I was able to get the record id in my Lwc and uiRecordApi worked.

Here is my sample Lightning Application "TestApp"
<aura:application extends="force:slds">
    <aura:attribute name="id" type="String"/>    
    <c:formExample recordId="{!v.id}"/>
</aura:application>

Here is the code for LWC - Html markup.
<template>
    <div if:true={contact.data}>
        <div class="slds-form slds-form-element_stacked">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-firstName">First Name</label>
                <div class="slds-form-element__control">
                    <input type="text" id="form-element-firstName" placeholder="First Name" class="slds-input"
                        value={firstName} />
                </div>
            </div>

            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-lastName">Last Name</label>
                <div class="slds-form-element__control">
                    <input type="text" id="form-element-lastName" placeholder="Last Name" class="slds-input" required
                        value={lastName} />
                </div>
            </div>

            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-email">Email</label>
                <div class="slds-form-element__control">
                    <input type="email" id="form-element-email" placeholder="Email" class="slds-input" required
                        value={email} />
                </div>
            </div>

            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-phone">Phone</label>
                <div class="slds-form-element__control">
                    <input type="phone" id="form-element-phone" placeholder="Phone" class="slds-input"
                        value={phone} />
                </div>
            </div>
        </div>
    </div>
</template>


Here is the code for LWC - JS Controller.
import {
    LightningElement,
    api,track,
    wire
} from 'lwc';
import {
    getRecord
} from 'lightning/uiRecordApi';
 
const fields = [
    'Contact.FirstName',
    'Contact.LastName',
    'Contact.Phone',
    'Contact.Email',
];  
 
export default class formExample extends LightningElement {
    @api recordId;
    @track contact;
    @wire(getRecord, {
        recordId: '$recordId',
        fields
    })
    contact;
 
    get firstName() {
        return this.contact.data.fields.FirstName.value;
    }
 
    get lastName() {
        return this.contact.data.fields.LastName.value;
    }
 
    get phone() {
        return this.contact.data.fields.Phone.value;
    }
 
    get email() {
        return this.contact.data.fields.Email.value;
    }
}

Here is the code for LWC - Meta XML.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="formExample">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Here is how I passed the id to the TestApp.
https://mydomain11-dev-ed.lightning.force.com/c/TestApp.app?id=0030K00001LW1hMQAT
Hope you guys like it!
Cheers!!
Happy Coding!!!
No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com