Sunday, 5 March 2017

Lightning Modal Using Salesforce Lightning Component #Salesforce

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


<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