Sunday, June 23, 2019

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!

4 comments:

  1. can u please add the custom validation to the above form (recordeditform)

    ReplyDelete
  2. The general rule is that HTML should always be representing content while CSS should always represent how that content appears. For those who are the beginners of HTML, in some cases you might encounter strange and often-new terms but with time you are likely to become more conversant with all of them. Web Design

    ReplyDelete
  3. Top Rank Digital is best Auckland SEO services agency company. We have SEO experts and specialist in Auckland who help increase your websites organic traffic.

    ReplyDelete

Salesforce: Export to Excel with Lightning Web Component

Hello Guys, I hope you are doing well. In this post, we are going to see an implementation of " Export to Excel" in lightn...