Skip to main content

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 


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

Popular posts from this blog

TLS 1.0 has been disabled For Sandbox - Salesforce

Salesforce has finally disabled TLS 1.0 in sandboxes .This is in preparation for disablement later in 2017 for PRODUCTION instances .

Now this would have not impacted your integrations in PRODUCTION org but if your integration is broken in your sandbox ,this means you have only few months to sort this and fix before this affects your integration for PROD live users .
Before we deep drive on how to possibly fix this and work with your external systems to figure solution ,lets first understand what is TLS and why did SFDC moved to 1.x and had to disable TLS 1.0
TLS 1.0 Explained

TLS 1.1 Improvements 
Added protection against cipher-block chaining (CBC) attacks. Support for IANA registration of parameters.

Clearly TLS 1.1 is more secure(Compared to 1.0) and protects salesforce resources against CBC attacks .
Identify if this change broke anything .The things that can be affected in your instances are as below Web requests to Salesforce URLs that require authenticationWeb requests to the login pag…

Opening Modal Using Lightning Component Framework of SFDC

One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .

So here we start ..

Business Use Case - Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .

The component can be dragged in lightning design experience or in App builder lightning Page .

Video Demonstration-

SalesLeaderBoard from Mohith Kumar Shrivastava on Vimeo.

Frameworks Used -
Lightning Design Systems (SLDS) for CSSLightning Component Framework for client side logicApex aura enabled class for backend logicApproach
The component hierarchy is very important to imagine or mindmap before we dig deeper- SalesLeaderMain

Writing Test Classes For Apex Rest Service

I came across a question in a developer community on how to write Unit Test Classes for the Rest API service for POST HTTP calls

Unit Test Classes for REST API following link is very useful and inspired by this jeff had an article on his blog on how to write the test method for same .

Here is the Jeff Blog Link Test Class for REST API(Good reference for GET Rest Services)

In one of my previous blog post i demonstrated how to use native parsing technique for Rest api for User Defined Type
I wrote the Test class for the same and this post is helpful for all those searching for how to write test classes for apex rest service annotated with POST Call
Here is the Rest Service Class for which i attempted the test class
@RestResource(urlMapping='/DemoUrl/*') global with sharing class MyRestResourcedemo { global class RequestWrapper{ public Account acct; public Contact[] cons; } global class ResponseWrapper { public String StatusCode; …