LWC : Create/Edit Form with Custom Lookup and Navigation

Hello Guys, 

Hope you are doing well. In this post we are going to see the very basic and common requirement of Create a record with a form with input fields, custom lookup, and navigation with the help of Lightning Web components.

So Let's start.

In the end, our screen will look somewhat like below.

Create a Lightning web component with name createContactForm.
In this example, we are going to create a contact record with a custom lookup of Account. This component will have the input elements to create a contact record.  Here we are going to use standard lightning-record-edit-form. We just need to pass a few parameters such as Object name, fields, etc.

We can define what actions need to be performed before load form load(onload) or before we submit a form(onsubmit) or after the successful execution of a form(onsuccess)

Implementation of these methods is explained in createContactForm.js

createContactForm.html

 <template>  
   <div class="slds-m-around_large">  
     <div if:false={isLoaded} class="slds-is-relative">  
       <lightning-spinner alternative-text="Loading...">  
       </lightning-spinner>  
     </div>  
   </div>  
   <lightning-card title="Contact Information">  
     <template if:true={accountRecord}>  
       <h1>Selected Account : <b>{accountRecord.Name}</b></h1>  
     </template>  
     <lightning-record-edit-form id="contactForm" object-api-name="Contact" layout-type="compact"  
       horizontal-align="stretch" title="Contact Information" onsuccess={handleContactSuccess}  
       onsubmit={handleOnContactSubmit} onload={handleOnLoad}>  
       <lightning-messages>  
       </lightning-messages>  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='FirstName'></lightning-input-field>  
         </lightning-layout-item>  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='LastName'></lightning-input-field>  
         </lightning-layout-item>  
       </lightning-layout>  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='Title'></lightning-input-field>  
         </lightning-layout-item>  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='Department'></lightning-input-field>  
         </lightning-layout-item>  
       </lightning-layout>  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='Email' required></lightning-input-field>  
         </lightning-layout-item>  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='Alternate_Email__c'></lightning-input-field>  
         </lightning-layout-item>  
       </lightning-layout>  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='Phone'></lightning-input-field>  
         </lightning-layout-item>  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='Extension__c'></lightning-input-field>  
         </lightning-layout-item>  
       </lightning-layout>  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" >  
           <lightning-input-field field-name='OtherPhone'></lightning-input-field>  
         </lightning-layout-item>  
         <lightning-layout-item flexibility="auto" >  
         </lightning-layout-item>  
       </lightning-layout>  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" >  
         </lightning-layout-item>  
         <lightning-layout-item flexibility="auto" >  
         </lightning-layout-item>  
       </lightning-layout>  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" >  
           <lightning-button variant="brand" type="submit" name="save" label="Save"  
             style="padding-left: 0.75rem;">  
           </lightning-button>  
           <lightning-button label="Cancel" variant="brand" onclick={cancelContactScreen}  
             style="padding-left: 0.75rem;">  
           </lightning-button>  
         </lightning-layout-item>  
       </lightning-layout>  
     </lightning-record-edit-form>  
   </lightning-card>  
 </template>  

This is the JS file/ class handles the actions needed by createContactForm.html. These actions include the onload, onsubmit, onsuccess.

• We are showing the loading icon on the screen until the form is loaded(handleOnLoad)
• Before we submit a form, we need to assign Account record id(explained later) to a contact record. So we are doing this in handleOnContactSubmit function. If you observe we have prevented the event until we assign all the values and perform our validations. Once we assign the related values, we are going to submit the form
• Once the form is submitted and server-side action takes place, handleContactSuccess gets called. Here we are showing the success message and navigating a screen to a create contact record.
• We have a Cancel button which navigates us to the home screen.
• If you observe we are throwing events for success or cancel action, so that recipient of the component will take further actions according to their needs.

createContactForm.js

import { LightningElement, api, track } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class CreateContactForm extends LightningElement {
  @api accountRecord;
  @api eventRecordId;
  @track isLoaded = false;

  handleOnLoad() {
    this.isLoaded = true;
  }

  handleContactSuccess(event) {
    console.log(event.detail.fields);
    this.dispatchEvent(
      new ShowToastEvent({
        title: "Success",
        message: "Contact created Successfully.",
        variant: "success"
      })
    );
    this.dispatchEvent(
      new CustomEvent("contactsuccess", {
        detail: event.detail.id,
        bubbles: true
      })
    );
  }

  handleOnContactSubmit(event) {
    event.preventDefault(); // stop the form from submitting
    const fields = event.detail.fields;
    if (this.accountRecord === undefined || this.accountRecord === null) {
      this.dispatchEvent(
        new ShowToastEvent({
          title: "Error",
          message: "Please select an Account",
          variant: "error"
        })
      );
      return;
    }

    fields.AccountId = this.accountRecord.Id;
    this.template.querySelector("lightning-record-edit-form").submit(fields);
  }

  cancelContactScreen() {
    this.dispatchEvent(
      new CustomEvent("contactcancel", {
        bubbles: true
      })
    );
  }
}

This is a wrapper component which uses the component we created earlier createContactForm.js. Also, we are going to use the custom Account lookup component, which we can be referred to in this post. You can customize this component/queries according to your need.

We are taking the Account record from the custom lookup component and passing it on to contact form component.

contactFormWithCustomLookup.html

 <template>  
   <lightning-card title={title} icon-name="standard:record">  
     <div class="slds-m-around_medium">  
       <lightning-layout horizontal-align="stretch">  
         <lightning-layout-item flexibility="auto" style="padding-left: 0.75rem;">  
           <c-lookup-search label="Custom Lookup - Account" selectedsobject="Account"
             onlookupselect={handlelookupselectaccount}></c-lookup-search>  
         </lightning-layout-item>  
         <lightning-layout-item flexibility="auto" style="padding-left: 0.75rem;margin-top: 37px;">  
           Please start typing Account name in a box.  
         </lightning-layout-item>  
       </lightning-layout>  
       <c-create-contact-form oncontactsuccess={contactCreateSuccess} account-record={selectedAccountRecord}  
         event-record-id={eventRecordId} oncontactcancel={contactCancel}></c-create-contact-form>  
     </div>  
   </lightning-card>  
 </template>  

This JS method handles the success/cancel action event thrown by contact form component.
On success, we are navigating to contact record and on cancel to the home page.

contactFormWithCustomLookup.js

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

export default class ContactFormWithCustomLookup extends NavigationMixin(
  LightningElement
) {
  @api title = "Create Contact";
  @track selectedAccountRecord;
  @track isLoaded = false;

  contactCreateSuccess(event) {
    this[NavigationMixin.Navigate]({
      type: "standard__recordPage",
      attributes: {
        recordId: event.detail,
        objectApiName: "Contact", // objectApiName is optional
        actionName: "view"
      }
    });
  }

  contactCancel() {
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Account",
        actionName: "home"
      }
    });
  }

  handlelookupselectaccount(event) {
    this.selectedAccountRecord = event.detail;
  }
}

Just create a lightning page/app and include this component in it, you are ready with your implementation.

So that's all, wasn't is so simple????

I hope you enjoyed the learning, please write me back the suggestions, comments or any issues. Let's meet in our next post with more learnings and fun. :)

THANK YOU!

How to get URL parameters in Lightning Web Components??

Hello Guys, hope you are doing great!

Did you have a requirement to get the URL parameters in Lightning web component and use them further??

Here is the simple answer. As LWC is purely based on Javascript, we can utilize the Javascript functions to do this activity. I was working with communities and wanted to pass on some URL parameters, here is the implementation.

This was my URL.

<Community URL>?eventid=00UJ000000AzjeuMAB

    var eventId = ((new URL(window.location.href)).searchParams.get("eventid"));

The above line will give me the Event Id retrieved from URL. Sooo simple.

I hope you liked the post and it helped. Let me know your suggestions and feedback. 

Thank you so much for visiting.