Sunday, 12 July 2015

Salesforce Lightning Components Hello World SPA Project

Lightning component framework from salesforce is amazing add on to platform .To build Single Page Applications there are lot of modern  framework like angular ,backbone,ember,meteor,react Js and lot more.Every framework comes with its own advantages and disadvantages .Salesforce lightning is one among them which is fast maturing .

I was reading through lightning component developer guide recently and just to explore  art of possibilities I did a quick Lightning SPA project that shows below listed  functionality:

  1. Quick Add ,Edit and Delete Account to Salesforce from standalone lightning App or Salesforce 1
  2. Using bootstrap library for UI in lightning project
  3. How to achieve simple navigation using CSS toggle 
  4. How to display error messages from server by dynamically creating lightning component markups
  5. Effective use of Events to communicate between components .
Lets take a demo video of the application before deep dive into some of the awesome stuff I have



Some of the key points I noted while doing this SPA Project are as below

Events :

Events are really cool .If you are not familiar with event driven pattern then you will have some tough time .In event driven pattern key is two components communicate with each other using events .There will be  Subscriber component and a publisher component .

Publisher component will publish event using aura:register tag.The events needs to be fired on action from button click or through any events.A simple example in my application when I create New Account ,my edit component fires an event and the main LightningSPA component listens to the Event and performs necessary actions needed 



The below code self explains the principle of firing events and then handling the event back 


Routing:

I miss angular routing here where one could easily navigate between templates .If your application is not running as standalone and you want only for salesforce 1 mobile client ,there are bunch of navigation support provided 


If we need for both standalone and SF1 one way document recommends is using below code

For my app I  prefered old  school approach of toggling using CSS as it makes it super fast .


Displaying Error Message:

Error handling at client side is easier if we dynamically create alert messages .One of the approaches for same is as below 




What are key things that would be needed if you are submitting for security review

  1. Make sure FLS is handled in backend code for apex 
  2. Make sure you do DML access check at backend apex
  3. As far as possible avoid use of third party libraries (We cant totally avoid agree),but would recommend to use framework specified tags 
  4. Name space your bootstrap .There is an online tool that can help you do this https://bootstrap-namespacer.herokuapp.com/
  5. Avoid usage of aura:unescapedHtml
  6. On page load init handlers avoid DML .
Few more documented below



The fun part 

I am sharing all code in my github library .So feel free to pull and do changes ,suggest changes ,tweet me concerns .







6 comments:

  1. swiss replica watches sale, combining elegant style and cutting-edge technology, a variety of styles of swiss replica omega watches sale, the pointer walks between your exclusive taste style.

    ReplyDelete
  2. The article is so appealing. You should read this article before choosing the Google Cloud Big Data Services you want to learn.

    ReplyDelete
  3. Your website is very beautiful or Articles. I love it thank you for sharing for everyone. Token Advertising

    ReplyDelete
  4. I recommend only good and reliable information, so see it: Construction Management

    ReplyDelete
  5. Construction Management Arrowsmith Project Management Limited Site Management Quality Management Project Management Quality Management Services

    ReplyDelete

Introducing Lightning Base Components

Lightning Base Components are great addition to the platform and in fact revolutionary .One of the concerns around lightning component ...