5 Lightning Tips for Visualforce Devs!

About an year ago, the word “Lightning” was a bit daunting, not because there were less information available to admins and developers, but as we were so used to Sales-force Classic that we were not ready to acquire this fascinating skill that time. Nowadays, things are rapidly changing and everybody is getting on to the lightning aspects. This is leading to increase in demand for LEX and Custom Component Development.

Most of the enterprises are migrating to Lightning experience from their traditional classic Salesforce application. This causes for a big ask for Salesforce developers who has hands on experience on Lightning framework.

I’ve been working on Lightning since a year and still exploring more exciting features while developing custom lightning components. So, here are some tips to help Visual-force Page Developers while working on Lighting.

1) #Lightning Component Development Tools :

Below specified tools will help you in Lightning component development.

  1. Force.com IDE – You just need to install a new version of force.com plugin and you can directly start the component development there.
  2. Developer Console – Salesforce developer console is the most ideal one for developing the Lighting Component.
  3. Salesforce Lightning CLI – Use CLI Tool to validate your code for use within the LockerService Service Architecture.
  4. Salesforce Lightning Inspector Chrome Extension – The Salesforce Lightning Inspector is a Google Chrome DevTools extension that enables you to navigate
    the component tree, inspect component attributes, and profile component performance. The extension also helps you to understand the sequence of
    event firing and handling.
  5. Sublime Text 3 – This tool is also available for lightning development.

2) Available Documentation : It always helps us to learn a new technology or new way of development. If every thing is documented, it becomes so easy to understand and apply.
That’s why we love Salesforce Trailhead.

  • Lightning Trailheads – Apply your learning skills with the new approach provided by Salesforce. There are various trailheads added for Lightning.
  • http//yourinstance.lightning.force.com/auradocs – This page will show you the aura standard components along with custom developed components in your org. Just replace “yourinstance” by your own org’s instance.
  • This is a lightning component development guide.

3) Base Lightning Components : Remember, we used to refer the “Component Reference” while designing the visual-force page. Now, we have the same one for Lightning Components. But it is just that instead of Apex tags, Salesforce has added base lightning components which are useful for Lightning experience, Salesforce1 and Lightning commuties user interfaces.

For more details, refer this link – Lightning Overview

basic-lightning-com

4) Error: In Development process we do mistakes and the new error log view is very useful to know where the code is breaking with new error log UI.

lighting-error-message

5)  Security Works Differently : As Visualforce developers, you have been spoiled as far as security is concerned. Visualforce apps operate out of the Force.com domain, which is not shared with Salesforce code. But, Lightning apps and components run in a special domain that is shared with Salesforce-authored Lightning code.

This means that the security for Lightning components are subject to a Content Security Policy (CSP). The rules surrounding what is and what is not allowed with these components will just tighten as time goes on. Go here to learn more about all the concerns regarding Lightning Security.

One important thing that you need to know is that any of your AuraEnabled Apex classes must do an explicit check for CRUD and FLS permissions. This was handled automatically for you in Visualforce pages, but in Lightning, unless you are using the new Lightning Data Service, you will need to do this check manually. You can do so using the isAccessible(), isCreateable(), isDeleteable(), and isUpdateable() methods. You can learn more about how this is done here.

Extras Points

6)  CSS (Cascading Style Sheets) : I really like the CSS feature of Lightning. if you are using the same class name for two different components, still you don’t have to worry about the fact that they may collapse with each other some day. (.this) allows you to separate style sheet for different components.

7) Returning Errors from an Apex Server-Side Controller :

Errors happen. Sometimes they’re expected, such as invalid input from a user, or a duplicate record in a database. When your server-side controller code experiences an error, two things can happen. You can catch it there and handle it in Apex. Otherwise, the error is passed back in the controller’s response.

When you use an AuraHandledException you have an opportunity to add some detail back into the response returned to your client-side code.

8) How to get URL Param :-

urlparam

 

Advertisements

Page Block Section Collapse By Default

Hi All,

Hope may you are aware of page block section behavior on Visual Force Page. Page block section is always open by default on page. Some times we need to show all page block section collapse when page is loaded on screen. So Below is the code by which we can collapse all the page block section/specific page block section will be collapse on UI.

Defalut Collapse

<apex:page sidebar="false" >

 <!-- Included Js file for jquery -->
 <apex:includeScript value="{!URLFOR($Resource.NewBootstrap, '/bootstrap/js/jquery.min.js')}"/>
 <script>
 $(document).ready(function()
 {
 /*
 When page get load then below script will run
 and collapse all the section which are under .firstSectionClass( Element Class).
 */
 var element= $('.firstSectionClass .hideListButton');
 for(var i = 0;i<element.length;i++)
 twistSection(element[i]);

 /*
 Below script it bind with arrow icon (Icon which are being used for collapse) which are displaying on section.
 When Icon are clicked then below script will run.
 */
 $('.firstSectionClass .showListButton').bind('click',function(event){
 event.preventDefault();
 var el= $('.firstSectionClass .hideListButton');
 for(var i = 0;i<el.length;i++)
 twistSection(el[i]);
 if(el.length!=0)
 twistSection(this);

 //this --> represent currently pressed section img element. You can write any script for this element fi you want to do something on section.
 });
 });
 </script>

 <!-- The First page block section where we are showing collapsed section -->
 <apex:pageBlock title="By Default Collapsible">

    <apex:outputPanel styleClass="firstSectionClass">

       <apex:pageBlockSection collapsible="true" title="First Collapsed Section By Default">
         First Section
       </apex:pageBlockSection>

       <apex:pageBlockSection collapsible="true" title="Second Collapsed Section By Default">
          Second Section
       </apex:pageBlockSection>

    </apex:outputPanel>

 </apex:pageBlock>

 <apex:pageBlock title="Actul Section Provide by SF (Not Collapse by Default)">

   <apex:outputPanel styleClass="SecondSectionClass">

      <apex:pageBlockSection collapsible="true" title="Third UnCollapsed Section By Default">
        Third Section
      </apex:pageBlockSection>

      <apex:pageBlockSection collapsible="true" title="Fourth UnCollapsed Section By Default">
         Fourth Section
      </apex:pageBlockSection>

   </apex:outputPanel>

 </apex:pageBlock>

</apex:page>

Hope this will help you.
Thanks,
Ashlekh Gera