Friday, 2 June 2017

Configure Properties in Lightning Component #Salesforce

Hi All, this blog post is about using lightning properties, this one of the great feature of the lightning component where you can see how dynamic you can make your lightning component, I am just showing a sample usage, I am pretty sure that we can use it in much more effective way.

Currently we have only few types of properties in lightning component i.e. Text, Integer and Boolean.
You can manipulate it and use it in more better way.

Here is it how it looks and how you can use it,

Note : Properties will be only visible when you define it in the Lightning component, and you can use the properties after adding it on the detail page / home page in lightning experience.

This is how it looks when you define properties in lightning component.



To define property in Salesforce you need to define Design:attribute in your design resource of lightning component.

For example below is our  lightning component having properties defined.
To appear in the Lightning App Builder or on a Lightning page, a component must implement the flexipage:availableForAllPageTypes interface.



<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickAction,force:hasRecordId" access="global" >
 
    <aura:attribute name="check" type="boolean" access="global"/>
    <aura:attribute name="Name" type="String" access="global"/>
    <aura:attribute name="Number" type="Integer" access="global"/>
    <aura:attribute name="Picklist" type="String" access="global"/>
    
    "{!v.check}" toggle on check, like below
    <BR/>
    <aura:if isTrue="{!v.check}">
     <!-- toggle content -->
    </aura:if>
    
    "{!v.Name}" Show or Hide on the basis of user input
    
    <BR/>
    
    "{!v.Number}" only integer 1,22,333 allowed
    <BR/>
    
    "{!v.Picklist}" User can chose in between few options.
    
</aura:component>


And here is the code of design resource, we have defined 4 different types of properties here.


<design:component >
 
    <!-- properties -->
    <design:attribute name="check" label="Check" />
    <design:attribute name="Name" label="Label" />
    <design:attribute name="Number" label="Number" description="Only numbers." />
    <design:attribute name="Picklist" label="Pick One" datasource="Yes,No, May be" default="Yes" description="Please select one"/>
    
</design:component>

No go ahead, add you you lightning component in a detail page of any object in lightning experience, and then set the properties values.

I've tried to create more type of property but can't as the error itself show while you try to create a new type of property. You'll get something like below




How to remove a Property !

That is a little tricky part while adding your property its easy add an attribute in component and then in design done. But while removing it, you need to use these below steps to remove it from the lightning component

1. Remove Implements from the lightning component source.
2. Then remove Design attribute from the design resource.
3. Now remove the attribute in the component. click save.

Done.

Hope this helps!!
thanks

Friday, 19 May 2017

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 !

Thursday, 11 May 2017

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 !!

Wednesday, 26 April 2017

Re Factoring of Flow Error While Running Test Classes #Salesforce

Hi folks,

Hope you all are doing great in your life, today I am going to post about the error we used get while running the test classes, most of the time all error are understandable, but after Process Builder ws introduced we got a new error while running the test classes, that say something like below


How to resolve this error now,


Go to setup and search flow like below


Click on any flow that you have in your org, and click Open link next to the flow.


After opening the flow paste the Id that we have in the Test Run in URL, like below


Now what you see after the page refresh, might not be the process flow can be a process builder as well, the good part is the name of the process builder name will be same, so you can search the name in the process builder name list. Now you have a process builder to look into and resolve your error.


Might be there will some other way around also to look into the error , but I got this.

Hope it helps
thanks !!


Friday, 31 March 2017

Lightning Record Type Selector Component #Salesforce

In this blog, I am going to create a lightning component which is a replica of the record type selector in lightning, its so simple, its a continuation of my last blog about lightning model link

So lets get started,

Here is the controller, which is fetching all the record type of the Account object

public class RecordTypeSelectorController {
    
    @AuraEnabled
    public static List<RecordType> getListOfRecordType(){
        String query = 'SELECT Id,Name FROM RecordType WHERE IsActive=TRUE AND SobjectType =\''+'Account'+'\' ';
        List<RecordType> rtNames = new List<RecordType>();  
        Schema.SObjectType  objType = Account.SObjectType;        
        
        for(RecordTypeInfo rt : objType.getDescribe().getRecordTypeInfos()){
            rtNames.add(new RecordType(Id = rt.getRecordTypeId(),Name = rt.getName()));
        }    
        return rtNames;    
    }
    
    @AuraEnabled
    public static Id getAccountRecordType() {
       Id ClientRecordTypeId = Schema.SObjectType.Account.getRecordTypeInfosByName().get('Client').getRecordTypeId();
       return ClientRecordTypeId;
    } 
}



Now here is the lightning component code

Here is the component, if you have read the last blog about the lightning model, then it would be easy to understand this one

This is the Component code, here we have a modal and button, which will have functionality of opening the modal, and the other button will open the Account record creation modal which is standard.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" controller="RecordTypeSelectorController" access="global">
    
    <ltng:require styles="/resource/SLDS103/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" access="public"/>
    <aura:attribute name="recordTypes" type="String[]" access="public"/>
    
    <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">
                            
                            Select a record type : 
                            <br/>
                            <div style="margin-left:30%">
                                <aura:iteration items="{!v.recordTypes}" var="rt">
                                    <ol class="slds-list--vertical slds-list--vertical-space">
                                        <input type="radio" value="{!rt.Name}" name="recordTypeRadio" id="{!rt.Id}" style="margin-right: 5px;" />{!rt.Name}
                                    </ol>   
                                </aura:iteration> 
                            </div>
                        </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" onclick="{!c.createRecord}">Next</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Open Modal</button>
        </div>
    </div>
    
</aura:component>


Here is the controller code, which you can add to the controller which we have written earlier in the lightning modal blog, just add these two methods in the controller and we are done with the controller, init method is to initialise method of the helper and createRecord is a standard function which you can use in the lightning component to get the standard functionality of creation of the records.

createRecord : function (component, event, helper) {
        var rtDet = document.querySelector('input[name="recordTypeRadio"]:checked');
    
        if(rtDet != null) {
            document.getElementById("newClientSectionId").style.display = "none" ;
            var createRecordEvent = $A.get("e.force:createRecord");
            createRecordEvent.setParams({
                "entityApiName": "Account",
                "recordTypeId":rtDet.id
            });
            createRecordEvent.fire();
        }    
    },
    
    doInit : function(component, event, helper) {   
        helper.RecordTypeSelectorController(component);   
    } 
    


Here is our helper, where we are calling the controllers method, which will return us a list of the all the record type of the Account object,

({
   RecordTypeSelectorController: function(component) {
    var action = component.get("c.getListOfRecordType");
    action.setCallback(this, function(actionResult) {
        var infos = actionResult.getReturnValue();
        component.set("v.recordTypes", infos);  
    });
    $A.enqueueAction(action);
  }
})


You are done, now lets see how it looks,

Here is the modal having list of record types of Account.


And here is the record detail to create a new Account record


To run the above component, create a lightning app

<aura:application >
    <c:RecordTypeSelector />
</aura:application>


Post a comment if you have any query, I would be happy to help,
thank you !!

Thursday, 9 March 2017

Lightning Tips for Visualforce Devs! #Salesforce

Hey everyone, today we are going to discuss about some great features of lightning, and how Visualforce developers should start utilising these features.




 Why Lightning ?

As per salesforce, lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce platform. There are many things salesforce launched under lightning like Process Builder, Lightning App Builder, Community Builder are all build using aura framework.
Using Lightning component, we make business ready components, and the component are ready to use in Salesforce1, Lightning experience and communities.
And if we talk about the performance, then lightning calls the server whenever it needed not all the times, not like we do in visualforce pages, just for clicking a button visualforce calls the server, but lightning framework is not designed like that. because of that it increases the efficiency of the application.
Aura framework uses JSON to send the data to client and to the server, the best part is lightning development is faster compared to visualforce pages, as the application we develop lightning facilitates parallel design.


 What's the difference between Lightning and Visualforce?

As we all were using Visualforce pages, they were static, basically page-centric model, as we discussed earlier visualforce page was designed to help implement salesforce classic look and feel, where on click of a button, it will hit to the server, but in lightning its different.

Visualforce pages has optional use of Javacsript and CSS, using Javascript we can do some client side processing in visualforce, Visualforce was meant for desktop, later on after Salesforce1, we started adding more CSS or Bootstrap etc, to make our visualforce pages work with Salesforce1.




Its kind of changing our way of working on apps, Lightning follows app-centric model, with Lightning you can send an interaction to the Salesforce servers and then update a specific component, this make performance of the application far more better. We can decide in lightning weather to process functionality on client side or server, lightning component comes in Bundles, that has there own files, for example Component, Controller, Helper, CSS, Documentation etc, you can optionally define weather you want to use the controller or not. Developing lightning component is much more complex then visualforce as you building an app not a page. It supports the latest in browser technology such as HTML5, CSS3, and touch events.


Wait....what about my visualforce page ?

You can still use your visualforce pages, as still many things lightning doesn't supports, visualforce are still standing strong, Lightning can't make a Homepage Component, email templates, or render pages as PDFs.
Lightning is still growing and it will take years to remove visualforce pages from salesforce, lightning is a new age of development of apps, and visualforce pages are everywhere, people still have to think about before migrating an existing visualforce pages to lightning.


Switching Visualforce page to Lightning 

I still say it not that easy to convert your visualforce pages to Lightning, it needs allot of analysis and rework to change a visauforce to lightning. Using SLDS you can have look and feel of a visualforce like lightning pages.


Important Links to know more about Lightning & Learning

These below link can surely help you learn and explore lightning experience and their advantages.

Share Visualforce Pages Between Classic and Lightning Experience

Lightnign FAQ

Using Lightning Components in Lightning Experience

Lightning Experience Development

Visualforce & Lightning Experience


So go ahead and explore...


Thank you!

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