After a long time I got some time for blogging, I've been thinking for a long to post something about lightning component, its feel great when you learn something, I've been now working on lightning for more then 6 months now, learned somethings about the SLDS (Salesforce Lightning Design System) and still learning about lightning Components,
Lightning Component Framework : It is one of the most powerful app development technology we have, Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Force.com apps. It uses JavaScript on the client side and Apex on the server side. (Source Trailhead)
(Source Trailhead)
I would highly recommend TRAILHEAD for learning Salesforce Lightning Component module
So here I am going to show you how simple is creating a modal in Lightning component, and if you ask why modal, then this is because, I get many requirement where client asks that we need this thing in a pop-up or that form should come in a modal, so it is very commonly used thing, so I thought it will be helpful to post about it.
I am not going into the basics of the lightning component framework, so here how it looks
So here is the component code for the lightning modal
And here is the controller code :
To run the above component, create a lightning app
Note : Use SLDS library of Salesforce used in the component code.
Hope this help will soon continue to add more functionality to the modal using lightning component.
Thanks
Lightning Component Framework : It is one of the most powerful app development technology we have, Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Force.com apps. It uses JavaScript on the client side and Apex on the server side. (Source Trailhead)
(Source Trailhead)
I would highly recommend TRAILHEAD for learning Salesforce Lightning Component module
So here I am going to show you how simple is creating a modal in Lightning component, and if you ask why modal, then this is because, I get many requirement where client asks that we need this thing in a pop-up or that form should come in a modal, so it is very commonly used thing, so I thought it will be helpful to post about it.
I am not going into the basics of the lightning component framework, so here how it looks
So here is the component code for the lightning modal
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global"> <ltng:require styles="/resource/SLDS103/assets/styles/salesforce-lightning-design-system-ltng.css" /> <div class="slds"> <div > <!-- modal body starts here --> <div tabindex="-1" aria-labelledby="header43" aria-hidden="false" id="newClientSectionId" role="dialog" class="slds-modal slds-fade-in-open" style="display:none;"> <div class="slds-backdrop slds-backdrop--open"> <div class="slds-modal__container"> <div class="slds-modal__header"> <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close"> <button class="slds-button slds-button--neutral" onclick="{!c.hideModal}">X</button> <span class="slds-assistive-text">Close</span> </button> <h2 id="header43" class="slds-text-heading--medium">Modal Header</h2> </div> <div class="slds-modal__content slds-p-around--medium"> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </div> <div class="slds-modal__footer"> <button class="slds-button slds-button--brand" onclick="{!c.hideModal}">Cancel</button> <button class="slds-button slds-button--brand">Continue</button> </div> </div> </div> </div> <button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Open Modal</button> </div> </div> </aura:component>
And here is the controller code :
({ showModal : function(component, event, helper) { document.getElementById("newClientSectionId").style.display = "block"; }, hideModal : function(component,event, helper){ document.getElementById("newClientSectionId").style.display = "none" ; } })
To run the above component, create a lightning app
<aura:application >
<c:JustLightningModal />
</aura:application>
Note : Use SLDS library of Salesforce used in the component code.
Hope this help will soon continue to add more functionality to the modal using lightning component.
Thanks
No comments:
Post a Comment