Author Archives: Biswajeet

About Biswajeet

Biswajeet is my Name, Success is my Aim and Challenge is my Game. Risk & Riding is my Passion and Hard Work is my Occupation. Love is my Friend, Perfection is my Habit and Smartness is my Style. Smiling is my Hobby, Politeness is my Policy and Confidence is my Power.

Hello World Lightning Web Component

helloworld.html

<!--Component Start-->
<template>
    <lightning-card title="Hello World" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input label="Name" value={greeting} onchange={namechangeHandler}></lightning-input>
        </div>
    </lightning-card>
</template>
<!--Component End-->

helloworld.js

//The import statement imports LightningElement from the lwc module
import {LightningElement, track} from 'lwc';
//The export default keywords export a HelloWorld class for other components to use.

export default class HelloWorld extends LightningElement {
    //To execute logic each time a public property is set, write a custom getter and setter with @api.
    //To hold the property value inside the getter and setter, use a private property @track.
    @track greeting = 'World';
    //Input on change method
    namechangeHandler(event) {
        this.greeting = event.target.value;
    }
}

helloworld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <!--To allow the component to be used in Lightning App Builder or Community Builder, set  isExposed to true-->
    <isExposed>true</isExposed>
    <!--Targets to make component available for lightning app page, record page and home page-->
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output:

Refresh lightning:recordEditForm After Save

There is no standard functions to refresh lightning:recordEditForm after save record. You can use aura:if to re-render the field section inside record edit form, after successfully saved the record.

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Attributes-->
    <aura:attribute name="reloadForm" type="boolean" default="true" />
    
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm objectApiName="Account"
                                  aura:id="accForm"
                                  onload="{!c.handleOnLoad}"
                                  onsubmit="{!c.handleOnSubmit}"
                                  onsuccess="{!c.handleOnSuccess}"
                                  onerror="{!c.handleOnError}">
            <lightning:messages />
            <aura:if isTrue="{!v.reloadForm}">
                <lightning:inputField fieldName="Name"/>
                <lightning:inputField fieldName="AccountNumber"/>
                <lightning:inputField fieldName="Industry"/>
                <lightning:inputField fieldName="Phone" />
                <lightning:inputField fieldName="Website" />
                <aura:set attribute="else">
                    Saving...
                </aura:set>
            </aura:if>
            <lightning:button variant="brand" type="submit" name="save" label="Save" />
        </lightning:recordEditForm>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleOnLoad : function(component, event, helper) {
         
    },
     
    handleOnSubmit : function(component, event, helper) {
        
    },
     
    handleOnSuccess : function(component, event, helper) {
         component.set("v.reloadForm", false);
        component.set("v.reloadForm", true);
    },
     
    handleOnError : function(component, event, helper) {
         
    },
     
})

Custom Submit Button for a lightning:recordeditform

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm objectApiName="Account" aura:id="accForm">
            <lightning:messages />
            <lightning:inputField fieldName="Name"/>
            <lightning:inputField fieldName="AccountNumber"/>
            <lightning:inputField fieldName="Industry"/>
            <lightning:inputField fieldName="Phone" />
            <lightning:inputField fieldName="Website" />
        </lightning:recordEditForm>
        <lightning:button variant="brand" type="button" name="Save" label="Save" onclick="{!c.handleCreateAccount}" />
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleCreateAccount : function(component, event, helper) {
        component.find("accForm").submit();
    }
})

Unescaping HTML in Lightning Component

Using aura:unescapedHtml component, you can Unescaping HTML contents in Lightning component.

Lightning Component:

<aura:component>
    <!--Handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <!--Attributes-->
    <aura:attribute name="blogURL" type="String" default=""/>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        Welcome to my <aura:unescapedHtml value="{!v.blogURL}"/>.
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event, helper) {
        //HTML Content
        var blogURL = '<a href="https://www.biswajeetsamal.com/blog/" target="_blank">Blog</a>';
        component.set("v.blogURL", blogURL);
    },
})

Increase Salesforce Lightning Quick Action Modal Width

Lightning Component:

<!--demo.cmp-->
<aura:component implements="force:lightningQuickAction">
    <!--style to incraee width-->
    <aura:html tag="style">
        .slds-modal__container{
        max-width: 80rem !important;
        width:80% !important;
        }
    </aura:html>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <div class="slds-text-heading_medium slds-align_absolute-center">
            Welcome to Biswajeet Samal's Blog
        </div>
    </div>
    <!--Component End-->
</aura:component>