Salesforce Progress Indicator Using Lightning Component

Here is the example of Salesforce Progress Indicator using lighting component, and using Salesforce lightning design system, below is how it looks

Here is how it works,

Here is the lightning component code

Component code

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >  
   <aura:attribute name="iconForStep1" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep2" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep3" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep4" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep5" type="String" default="utility:progress" />  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
   <div class="demo-only" style="padding: 3rem 1rem 0px; background: rgb(244, 246, 249);">  
     <div class="slds-progress slds-progress_shade">  
       <ol class="slds-progress__list">  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step1" iconName="{!v.iconForStep1}" class="slds-progress__marker slds-progress__marker_icon" size="small" alternativeText="Step 1 - Completed" />  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step2" iconName="{!v.iconForStep2}" class="slds-progress__marker slds-progress__marker_icon" size="small" alternativeText="Step 2 - Error"/>  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step3" iconName="{!v.iconForStep3}" class="slds-progress__marker slds-progress__marker_icon" size="small" alternativeText="Step 3"/>  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step4" iconName="{!v.iconForStep4}" class="slds-progress__marker slds-progress__marker_icon" size="x-small" alternativeText="Step 4"/>  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step5" iconName="{!v.iconForStep5}" class="slds-progress__marker slds-progress__marker_icon" size="x-small" alternativeText="Step 5"/>  
         </li>  
       </ol>  
       <!-- this is for the line in between the dots -->  
       <div class="slds-progress-bar slds-progress-bar_small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" role="progressbar">  
         <span aura:id="progress" class="slds-progress-bar__value">  
         </span>  
       </div>  
     </div>  
     <div aura:id="tooltip">  
       <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom" role="tooltip" style="position: absolute; top: 5px; left: calc(83% + 8px); transform: translateX(-50%);">  
         <div class="slds-popover__body">Done</div>  
       </div>  
     </div>  
   </div>  
   <div class="demo-only" style="padding: 3rem 1rem 0px; background: rgb(244, 246, 249); position: absolute; left: calc(30% + 15px);">  
     <button class="slds-button slds-button_brand" onclick="{!c.step1Check}">Step 1 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step2Check}">Step 2 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step3Check}">Step 3 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step4Check}">Step 4 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step5Check}">Step 5 Check</button>  
   </div>  
 </aura:component>  

And here is the controller code

 ({  
   doInit : function(component, event, helper) {  
     var prog = component.find('progress');  
     $A.util.addClass(prog, 'default');  
     var toggleTooltip = component.find("tooltip");  
     $A.util.addClass(toggleTooltip, "tooltip");  
   },  
   step1Check: function(component, event, helper) {  
     component.set("v.iconForStep1",  
            component.get("v.iconForStep1")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step1');  
     $A.util.addClass(cmpTarget, 'slds-is-completed');  
     var prog = component.find('progress');  
     $A.util.removeClass(prog, 'default');  
     $A.util.toggleClass(prog, 'step1');  
   },  
   step2Check : function(component, event, helper) {  
     component.set("v.iconForStep2",  
            component.get("v.iconForStep2")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step2');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var prog = component.find('progress');  
     $A.util.toggleClass(prog, 'step2');  
   },  
   step3Check : function(component, event, helper) {  
     component.set("v.iconForStep3",  
            component.get("v.iconForStep3")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step3');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var prog = component.find('progress');  
     $A.util.toggleClass(prog, 'step3');  
   },  
   step4Check : function(component, event, helper) {  
     component.set("v.iconForStep4",  
            component.get("v.iconForStep4")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step4');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var prog = component.find('progress');  
     $A.util.toggleClass(prog, 'step4');  
   },  
   step5Check : function(component, event, helper) {  
     component.set("v.iconForStep5",  
            component.get("v.iconForStep5")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step5');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var toggleTooltip = component.find("tooltip");  
     $A.util.removeClass(toggleTooltip, "tooltip");  
   }  
 })  

Here the style code for the component

 .THIS {  
 }  
 .THIS .step1 {  
   width:260px;  
 }  
 .THIS .step2 {  
   width:520px;  
 }  
 .THIS .step3 {  
   width:780px;  
 }  
 .THIS .step4 {  
   width:1050px;  
 }  
 .THIS .tooltip {  
   display: none;  
 }  
 .THIS .default {  
   width:0px;  
 }  

To use this component you need to create a test app

 <aura:application extends="force:slds">  
   <c:ProgressBar />   
 </aura:application>  

We can add many more icons, you can find all over Here in Progress Indicator

Here is source code in github.

Thanks

Using ui:collapse in Lightning Component #Salesforce

Here I am going to use ui:collapse, if you trying to add a functionality of hover or Accordion this can be a big help, here we are using ui:collapse , ui:menu, ui:menutriggerLink in which we have some child functions also, You can handle this event in a ui:menuList component instance. This example shows a menu component with two list items. It handles the ui:collapse and ui:expand events.
So here it is, you will have one or two link like below, on the click of which user will have a hover where by ui:actionmenuitem we can call other functions.

And using ui:collapse and other tags, we can achieve this

To achieve the above look and feel and the functionality

Here is the component code of the lightning component,

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    
    <aura:registerEvent name="menuCollapse"  type="ui:collapse" description="The event fired when the menu list collapses." />
    
    <html>
        <body>
            <div class="accordion">
                <ui:menu>
                    <ui:menuTriggerLink aura:id="trigger" label="Contacts"/>
                    <ui:menuList class="actionMenu" aura:id="actionMenu" menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}">
                        <div class="accordion">
                            <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            <ui:actionMenuItem aura:id="item1" label="Go to Contacts" click="{!c.doSomething}"/>
                        </div>
                    </ui:menuList>
                </ui:menu>
            </div>
            
            <div class="accordion">
                <ui:menu>
                    <ui:menuTriggerLink aura:id="trigger" label="Acounts"/>
                    <ui:menuList class="actionMenu" aura:id="actionMenu" menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}">
                        <div class="accordion">
                            <p>aliquip ex ea commodo consequat.</p>
                            <ui:actionMenuItem aura:id="item1" label="Go to Accounts" click="{!c.doSomething}"/>
                        </div>
                    </ui:menuList>
                </ui:menu>
            </div>
        </body>
        
    </html>
</aura:component>

Here is the controller

({
  
    addMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.addClass(trigger, "myClass");
    },
    removeMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.removeClass(trigger, "myClass");
    }

})

Here is css code

.THIS .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.THIS .accordion:hover {
    background-color: #ddd; 
}

Now to test, create one sample app and preview it.


Hope it helps, feel free ask any queries.
Thank you!

Expanding the features of Lightning Component Using Visualforce page #Salesforce - Part 2

Previously we have used the Lightning component inside visualforce page, now this we are going to use the visualforce inside lightning page, and set some attributes default value on load of the lightning component using visualforce page, here what we are going to achieve is that we will load the visualforce page, and then remaining process of Lightning component order or execution will be same.



So here we are going to have a visualforce page, that will save/update the data in the custom setting, and the out lightning component will use the same data in custom setting.

So here is the visualforce page, that we are going to use in lightning component, and this page is updating the your custom setting.

Page Name : UpdateCustomSetting

<!-- defining custom setting here -->
<apex:remoteObjects jsNamespace="RemoteObjectModel">  
    <apex:remoteObjectModel name="MyCustomSetting__c" fields="Id,Field1__c,Field2__c">  
    </apex:remoteObjectModel>  
</apex:remoteObjects> 

<script>
//to save data in custom setting 
function updateCustomSetting() { 
    
    (new RemoteObjectModel.MyCustomSetting__c()).retrieve( 
        function(error, records, event) {
            if(records[0]) {
                (new RemoteObjectModel.MyCustomSetting__c({
                    Field1__c: '{!$Api.Partner_Server_URL_XXX}', 
                    Field2__c: '{!$Api.Session_Id}',
                    Id: records[0].get("Id")
                })).update();
            } else {
                (new RemoteObjectModel.MyCustomSetting__c({
                    Field1__c: '{!$Api.Partner_Server_URL_XXX}', 
                    Field2__c: '{!$Api.Session_Id}'
                })).create();
            }
        });
}

updateCustomSetting();
}
</script>

The way of using the visualforce page in the lightning component, is by calling the visualforce page using iframe.

<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
     
    <div style="display:none;">
        <iframe aura:id="vfFrame" src="{!'https:// + YOUR_ORG_URL + dev-ed.my.salesforce.com/apex/UpdateCustomSetting'}"/>
    </div>

    //YOUR COMPONENT CODE HERE


    //assign the value to these in the helper by calling apex 
    <aura:attribute name="FIELD1" type="String" access="public"/>
    <aura:attribute name="FIELD2" type="String" access="public"/>

    Custom Setting value :: "{!v.FIELD1}"
    

</aura:component>
    

Using above code you will be able to use the custom setting field values in your Lightning component.

Hope it helps !

Expanding the feature of Lightning Component Using Visualforce page #Salesforce - Part 1

This blog post is all about using the lightning component with some extra feature that stand alone lightning feature doesn't provide some time.
Recently I was working on few Lightning component, and ran into a issue of requirements where

lightning component doesn't supports due to security issues or whatever.

For example
If you want to perform AJAX call using lighting component, you cannot bummer! here is link for reference Link

Another problem is that when you are using the Session Id on visualforce page, that session Id is different then what lightning component has. Bummer again ! So sometimes what happens if the third party is configured with your visualforce page sesion Id using "{!API.SessionId}" then your session Id generated in lightning component will no more support it.

Session contexts are based on the domain of the request. That is, the session context changes whenever you cross a hostname boundary, such as from .salesforce.com to .visual.force.com or .lightning.force.com.

So to resolve all this or another way to achieve these functionalities, you can you use Lightning component inside your visualforce page.

I am going to refer my component that I've posted earlier click here and use that same component inside visualforce pages, I am using sessionId and other thing in viualforce page and right away we can use those in attributes in lightning component as well.

<apex:page standardController="Account">
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:TestApp", function() {
          $Lightning.createComponent("c:RecordTypeSelector",
          { 
              sessionId : "{!$API.Session_ID}",
              partnerURL : "{!$Api.Partner_Server_URL__xxx}",
              recordId : "{!Account}" 
              
          },
                                     
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>

Now you can use these below attribute inside the component

<aura:attribute name="recordId" type="String" access="public"/>
 <aura:attribute name="sessionId" type="String" access="public"/>
    <aura:attribute name="partnerId" type="String" access="public"/>
   

NOTE : If you are using you lightning component on some object detail page, then force:hasRecordId will stop working after using lightning component inside visaulforce page, so you need to remove it from "implements" tag, that is why I've passed the object Id as well.

Here are some links for referece

Visualforce Developer Guide
Lightning Components in Visualforce with Lightning Out
Use Lightning Component in Visualforcery Jitendra Zaa
Use Lightning Components in Visualforce Pages


Hope this helps !!

Salesforce - "Summer of #Trailhead" Bangalore meetup Experience

Hi all, I am here again to share some amazing experience of Salesforce meetup "Summer of Trailhead", its all about trailhead practice and awesome experience that trailhead gives to a learner of Salesforce, its an amazing place to learn and explore new things. I have already posted my Trailhead experience on my Salesforce #trailhead : Place to Learn, Explore & Play post.

Thanks to all the Salesforce geeks to join us on the meetup, thanks to Salesforce for sending us awesome goodies, I feel proud when I got some of those, along with goodies we got amazing trailhead stickers and books and the amazing t-shirts.

There was hands on for those who are new with trailhead, people took few badges as well, it was amazing when a bunch of people are trailing and tweeting about trailhead, take a look at one of my tweets

It was an amazing experience while helping and learning with new geeks of salesforce, salesforce is now a relation between two humans. Thats what I saw in the summer of trailhead meetup.

I cannot thank enough for the amazing book that I won at trivia of the meetup "Advanced Apex Programming" written by Dan Appleman I will finish this one asap, then will definitely post some new learning from the book.

Once again after #lightning meetup felt awesome to meet salesforce plumbers and newbies.
Thanks Salesforce and everyone.

Keep trailing!!

Salesforce #trailhead : Place to Learn, Explore & Play

A game that will teach you Salesforce while playing

When I saw and started working on trailhead for the first time, I loved it so much that at the same time I end up getting 8 badges, one of my friend is a salesforce learner, I just pinged him trailhead link and tell him to start now he is salesforce certified Developer because he cleared most of the issues in trailhead practice.


Few things I loved about trailhead...

Its amazingly developed for the learners, that they will start loving Salesforce.
Whatever the new things updated in Salesforce in these recent release are out there on #Trailhead to practice.
Awesome explaining
Trailhead has broken down the Salesforce 1 platform into various sections known as “modules” and these are further divided into units so that one can learn those sections step-wise. Anyone who is new to Salesforce or wants to learn more about Salesforce can use the Trailhead. One can select the module as per his background (developer or administrator). Trailhead is also a great resource for anyone studying to take a Salesforce Certification exam.

Write now out there trailhead have these modules, go grab the badges now now now..

My favourite one is Process Automation, lightning , flow everything is there to learn

I got the CATTER also, I can make you jealous because it was on Trailhead for limited time period now its not on trailhead

If you are new to Salesforce, looking to enhance your Salesforce skill set, or just looking to brush up on your Salesforce knowledge, then I’d highly suggest hiking over to Salesforce’s Trailhead and trying it out: #trailhead

Hopefully this post has gotten you excited about trying Trailhead for yourself. Go earn those points and badges! Please also help us spread the word and make Trailhead a verb. So the next time someone asks you, “What is the best way to learn Salesforce?”, you’ll have the best answer, “Trailhead it”.

Happy trails!

Process Builder With Email Alerts (Spring 15)

Just got a chance of working with Process builder, amazing stuff, covering everything that a workflow can do as well more than that, you can create records or you can call your Apex class to perform you custom logic.

It is fast, easy to use and awesome look and feel. I am assuring you once you start using it, you will stop using workflow.

So I am going to start an easy use of Process Builder with Email Alerts

1. First of All go to workflow & Approval section and click on Process Builder

2. Click "New" button in right corner.

3. Write the name of the process and Description

4. Here is the way process builder shows the logic in the way of a flow diagram, too easy to understand.

5. Click on the Add Object down to Start box, there is a picklist of all the objects and click "Save"

6. Select Field of the selected Object from the picklist for the criteria and click "Save"

7. Now you have selected the Object, now click on the Add Criteria to add criteria same as workflow you can use formula as well, I tried that one and that is also easy to create.

8. Now you are done with criteria, it is highlighted, time to add the action, click on action.

9. While adding the action I was amazed to see when there was an Option of Apex Class + Update Record + Insert Record, none of these you can do in workflow that is best property of the Process Builder. I choosed Email Alert, for Email Alert you need to have an Email Alert on the Object that you are using, their is auto complete on the last text box, which will show the related Email Alerts, as in below snapshot

10. Now you are done, isn't that quick and easy, now in the right corner of the screen there is Activate button, click on it, and you will get confirmation like below. Click OK now you have created you first workflow using Process Builder.

11. Click on "View All Process" to see the process.

Few thing need to take care of :

1. You cannot delete a process builder data, if it is Active, you need to Deactivate it and wait to 12 hours to delete it.
2. You cannot modify it again, you need to clone it and re-create ( I don't know why this restriction, I tried to modify but didn't succeeded).

Try it now, May the force.com be with you!!