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

Lazy loading tree with Force.com

I was trying to find something new to work, but nothing was making me eager to do that thing, and then I found out Jeff Douglas post of Original Post
Its an awesome post like he post every time, then I tried that thing in my personal salesforce org, and within few minutes I can see that tree in my org.

He's is using Jstree, its a jquery plugin, that provides interactive trees.
To know more about JsTree www.jstree.com

So that was so simple, and too much awesome, I would love to thank Jeff for doing such great things.
What he's exactly doing is to load an Objects tree, using Jquery, jsTree and Rest Javascript and using Lazy Loading.
There is a component that he created and called that component on the page.

Here how the tree looks

Here is the Steps need to perform

1. Create an Object named Parent Object.
2. Add a parallel look-up to the Parent Object of its own. Name the field "Parent Object".
3. Create a component named as "lazyLoadingTree". paste this code LazyLoadingTree
4. Create a Visualforce Page, name it ParentObject, paste this code ParentObject

5. Here is the Static Resource that you need to create, this is called from the Component that we created earlier, you cannot save your component without this restJavascript

Cheers..!!!
Happy Coding :)