ReactJS and Salesforce Lightning SLDS 101

Having worked on writing visualforce page with React using Salesforce Lighting Design System I would like to share some experience  through this blog post.

Clearly  ReactJs can cherry pick difference in the DOM structure and updates the only part of DOM that is part of component, you read this post to know little in detail about ReactJs on getting started and understaning basics.

ReactJs with Remote Objects

Salesforce Remote Objects allows you query salesforce without glueing apex and purely writing UI intensive apps see here. I wrote code snippet that consume remote object and query salesforce, on top of it, he have imported Lighting Design System to fabricate the UI.

Salesforce Lighting Design System (CSS from Salesforce)

Salesforce have opened stylesheets now, for the world to incorporate Salesforce user experience with new Lighting UI. Out of the many components available, I will be using datatable component and header components to carve the layout of this page.

Single Page Application (SPA)

To showcase, component driven functionality with React, I wrote single page, keeping concepts simply to absorb, to give a kick start and direction for consuming this framework in the universe of Salesforce.Below is visualforce page that consume React component, click below to open in new page

Hello React

Code Walkthrough

If you carefully notice, we reference all external javascript through CDN and some hosted on github, learn how to use Github as CDN with Salesforce.

The components are divided from top to bottom in two prime category of components nested

1. Account View : Parent component nesting child component

2. Account List : Child component polling Salesforce to list data rows

To visualize neatly you can see this tree structure shown below

  --Accountview

      ---AccountList

--Account 1

--Account 2

--Account 3

As you can see three component are primary designed here, Account Component is component to draw header of the table (list) declared as below

Secondly, AccountView is nesting drawing the view of table and nesting list component that queries Salesforce in the back

AccountList binds data into Tabular view and generates table

Notice, the use of  promises with Visualforce Remote Objects using code from in this repo (check it out) and not a single line of html code is written on visualforce end besides skeleton of the page, all code is written in JSX compiled into Javascript, also note for converting React JSX to javascript in production release, you can do it through Node React Tool

Whole code snippet is embedded below is ready to be served out of the box (import all required resources from CDN)

Migrating to Lightning Experience with Trailhead

I have been fan of Trailhead since I used it for first time to learn on how to build lightning components .Trailhead makes learning fun and enjoyable .You get to learn at your own pace at your own time and at your convenience .

Many of you would have heard salesforce launching new User Experience which is seamless experience of your salesforce data on any device size ,right from your apple watch to your apple macbook pro or air .

Migration is always not easy .Its cultural change .It will come with time and people will require some support and Training to get trained .

Trailhead is our friend that will guide us in right path as we transition from our aloha look and feel to this new exciting lightning experience .Whether you are Developer ,Architect ,Customer or Partner related to Salesforce ,Trailhead has content for everyone .

Lets Summarize the content that will make you feel confident and comfortable while you go through each of these  new modules in the Trailhead

Admin Trail

For Admins Migration to lightning experience means they need to be familiar with below

1. How can they customize or change layouts ?
2. How can they configure objects and relationships?
3. How can they enable their users to this new experience ?
4. What should be the Roll out strategy while they migrate the users to new experience ?
5. Where can they configure actions and what are the differences with respect to old aloha UI ?

Lot to answer.If an admin goes through all the modules present in above Trailhead I am sure you will get to the meat of the content .

Developer Trail

With new Lightning ,Developers will need to worry about following 

1)What will break in their existing code and wont work with lightning ?

2)How can they make their Visualforce code work with lightning ?

3)What is Salesforce Lightning Design System ?

4)How can they detect via code how to differentiate between aloha environment and lightning environment ?

5)If you are an ISV ,what factors you have to consider when you build your visualforce pages ?

6)What changes app exchange packages will need to get the Lightning Certified Sash?

All the answers to this has been embedded inside the Developer Trail for Lightning experience .

Sales Rep Training

Sales Rep Trail will enable your organization to train your sales reps 

Asking Sales Rep to go through this Trail will help them use the system effectively .Your sales rep will learn below in detail

1. How to work with leads and opportunities with new user experience 
2. Various tools that will help them to track their performance and help them sell effectively
3. New reports and dashboards and chatter feeds .

This is the first content for end users from Trailhead team and step definitely in right direction

If you are a new admin there is one more and you can start right from there 

https://developer.salesforce.com/trailhead/trail/lex_admin_implementation

Trailhead URL

https://developer.salesforce.com/trailhead

Also don't forget to share your progress on twitter and share your badge selfie as I do often 

If you love projects ,there are few new projects as well  for you 

https://developer.salesforce.com/trailhead/projects

Lightning Connect Apex Adaptor

If your organization has already subscribed to the Lighting Connect feature(This is available based on Subscription with additional fees .Contact your salesforce AE to learn more ) to create External Objects,it is good to know that apex can be used by your developer to expose data from any system which uses SOAP or REST as external Objects .

The advantage of using External Objects will be saving some storage space .The data will not reside inside salesforce but can be viewed in salesforce User Interface just like any other objects .

There are number of limitations worth noting before you decide to go with external objects and salesforce documentation can help you in regards to this 

https://help.salesforce.com/HTViewHelpDoc?id=platform_connect_considerations_compatibility.htm&language=en_US 

There are lot of chances that you need data only for reading from external system and may later run apex to convert few into transaction data .One of the ways to address this business use case can be using lightning connect .There may be millions of data and with lightning connect you can keep it outside salesforce but still use salesforce interface to view ,search and use apex to convert some to SFDC native objects .

When lightning connect feature was launched you needed an adaptor to convert data into Odata before you could actually consume and bring into salesforce as an external object.

Its good to know you dont need an Odata now and an apex written by developer can be used by salesforce administrators to bring any data via SOAP or REST to salesforce .

Aim of the blog Post:

   The main aim of this blog post to show an example to developer community on how to extend  data source provider and data source Connection classes to build external data source in salesforce.

We will connect to a simple REST end point available for Non commercial financial  purpose .To explore more about this webservice please read below 

http://www.exchangeratelab.com/docs

Exchangerate Lab provides us free end point for non commercial use to fetch some data that shows latest currency rates for selected Currencies .Please note the aim of calling this webservice is just to demonstrate the Lightning connect feature.

• The first step is to create a DataSource Connection class.

The Connection class will provide 

1. Metadata definition of the external schema which admin of salesforce will generate based on need by just clicking a button
2. Query method to query the data from API.
3. Search method to implement the search via global search
4. Filters and pagination if needed can be implemented in query and search methods
5. Write a JSON parser for mapping data to fields

The below code is self explanatory and it connects to exchangedate labs to fetch currencies and exchange rates

• The next step is to create a Data source Provider class that describes the functional  abilities like authentication mechanism ,capabilities provided by the data source

The below code shows an example class and format 

The below shows the video on how Admin will configure with simple clicks for magic 

References:

https://help.salesforce.com/HTViewHelpDoc?id=limits_external_data.htm&language=en_US

https://developer.salesforce.com/blogs/engineering/2015/05/introducing-lightning-connect-custom-adapters.html

http://docs.releasenotes.salesforce.com/en-us/summer15/release-notes/rn_forcecom_external_data_apex_adapter.htm

TrailHead Goodness

Most of my friends who come from Java world into apex often ask me about where can they find quick tutorial on CRM lifecycle and quick hands on tutorial on how to use Account Management ,Contact Management ,opportunity management and so on.

TrailHead has got some modules now to explain all of this in depth .

Lets summarize each of the modules and see what they help us learn

Account & Contacts

If you quickly want to learn how to create some Test Accounts and Contacts and understand relationship among them worth spending your half an hour with this module


CRM Basics

Now this may sound silly if you know the concepts but fact is most of developers we dont think of business case for which we spent hours writing code .The basics of salesforce starts with knowing CRM .This module for me should have been first module of TrailHead .Never too late .Grab a coffee and spend some time working on this Trail Badge .


Leads and Opportunities

I would open this module for Training end users .Before we onboard our sales or marketting team ask them to get this badge and I am sure this will help them to gain better understanding on how salesforce will increase their productivity.Explain them the significance of keeping data clean and ask them to create some test data in training environment before they start using the system in their Production Environment .

Event Monitoring

If you are a system architect I would recommend you to learn more about Event Monitoring module .This will give you great insight of how to track various events like login ,logout ,usage of API ,UI clicks .All this will help to draw inference about how the system you have built is being adopted .

Adoption is key metric and this module will help you understand how to pull event log files from SFDC and how to report and analyze reports .

Finally if you are going to dreamforce how cool it is to gather information prior to that and do some homework.Dreamforce module is amazing way to prepare you for this .

If you are a geek and Nerd ,then do some Projects and get hands dirty .Follow the Trailhead Project link below

https://developer.salesforce.com/trailhead/projects

Finally grab all Trailhead badges as I did and beat me up :))

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 

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_one.htm

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

https://developer.salesforce.com/page/Lightning_Security

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 .

https://github.com/msrivastav13/Lightning-SPA-App

Installing Lightning Package Plugin On Sublime Text On Windows 8

Building Lightning components is next task we will all be bombarded with as Lightning from salesforce emerges as a mature framework .

Having proper developer environment set up locally helps us to code effectively and helps to organize code .Subime text 3 editor makes editing files simpler and mavens mate plugin for writing apex and VF is great.

For lightning components we luckily have a package control plugin which we can install on top of sublime text and edit lightning components directly using mavensmate .

Already Raja from Salesforce describes how to install the plugin on MAC machine .Please watch the below video from him 

https://www.youtube.com/watch?v=g65FcLVSLX0

For windows machine i have one below ,if you are using windows I hope below video is helpful

Dallas MeetUp -May 27

Last night  Dallas meetup was so much fun .I had the chance to present on Angular + Bootstrap + Visualforce with sample code .

I am so glad it went really well and also provided me opportunity to connect with lot of local folks who are excited to be a part of Salesforce Community .

Quickly wanted to share the code sample that I presented at meetup .

A simple responsive page to add Account Card was built using bootstrap and JS remoting along with angular concept of using modules .

The Presentation is at slideshare so that if you missed my session you can go through the same .It covered basics of bootstrap and angular JS and then explained the code snippet of how to use angularJs in salesforce .

Dallas meetup session  on Bootstrap + Angular + Visualforce from Mohitkumar Srivastav

The code samples I have shared on Github

Apex Controller


Visualforce Page

Hopefully this session was helpful .Please let me know how you feel about the whole session .Thanks