LWCModal.html
<template>
<div class="slds-theme_default">
<div class="slds-p-around_medium">
<lightning-button label="Show LWC Modal" variant="brand" onclick={handleOpenModal}>
</lightning-button>
</div>
<template if:true={isOpenModal}>
<div style="height: 500px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleCloseModal}>
<lightning-icon icon-name="utility:close" variant="inverse" alternative-text="Close" size="medium">
</lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">LWC Modal Example</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-text-heading_small slds-text-align_center">
Welcome to Biswajeet Samal's Blog
</div>
</div>
<footer class="slds-modal__footer">
<lightning-button label="Cancel" variant="neutral" onclick={handleCloseModal}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</template>
</div>
</template>
LWCModal.js
import {LightningElement, track} from 'lwc';
export default class LWCModal extends LightningElement {
@track isOpenModal = false;
handleOpenModal() {
this.isOpenModal = true;
}
handleCloseModal() {
this.isOpenModal = false;
}
}
LWCModal.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWCModal">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
Loading...
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:
Loading...
There is no standard functions to refresh lightning:recordEditFormaura:if
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) {
component.set("v.reloadForm", false);
component.set("v.reloadForm", true);
},
handleOnSuccess : function(component, event, helper) {
},
handleOnError : function(component, event, helper) {
},
})
Loading...
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();
}
})
Loading...
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);
},
})
Loading...
