Last year Salesforce introduced Community Builder which provides the ability to generate self service portals with minimal coding effort. Templates were offered out-of-the-box to configure the community on the fly. All that you needed to configure were images with content. Salesforce Community Templates are responsive and work seamlessly on mobile tablets and desktops.

This year there were many enhancements to the Lightning Community Builder and Winter ’16 added some excellent features. The ones that are worth noting include:

  1. Ability to create custom pages 
  2. Ability to provide navigation beyond Topics (this is huge)
  3. Flexibility to add custom CSS to predefined templates (KOA, KOKUA and NAPILI are template names provided out of the box)
  4. Ability to import Lightning components from the AppExchange or build your own Lightning components for communities

The last one is revolutionary and game changing for sure. This means if you are a company and offer services like payment processing, media, marketing/ad content, trend analysis, eCommerce, personalized product recommendations, etc., it’s worth the investment to get your Lightning component on the AppExchange.

Let’s take a simple use case that you are a home loan mortgage provider. Your clients and customers have their portal running in Salesforce. It will sound very cool if you already have a mortgage calculator widget on the AppExchange. The only thing the Salesforce Admin will need to do is to grab it from the AppExchange and use it on communities – no need to build an integration. I created an example component to demonstrate the engineering approach of building a mortgage calculator with sample Zillow Mortgage API.

The core idea of a Lightning component is to build it once and use it in multiple orgs or communities.

Below is a brief video demonstration of how an admin would configure the component inside Communities using Lightning Community Builder.

Let’s dig into the technical details as well. I have a simple Lightning mortgage calculator which uses Zillow webservices to do the calculation and return the results. The entire code can be grabbed from this GitHub link:

 https://github.com/msrivastav13/LightningComponentCommunity

Our component consists of two sub components:

  1. Mortgage Form component that takes input for total price, down payment percentage, and the zip code. Observe the interface implemented on the component to make it available in the Community Builder [gist id=”f195a1d14ca938f75b35″]
  2. The response card that shows output from the Apex service. This will show the net down payment, monthly insurance, monthly payment for thirty year term, fifteen year term, and FiveOneARM term.

Plus:

  1. A simple Apex HTTP callout to Zillow Mortgage API (Please don’t use this for any commercial purpose) 
  2. A response wrapper or the Parser class to parse the output JSON.

Once built, a component can be used in Community Builder, App Builder, and as an App or tab in the new Lightning experience for Salesforce 1 mobile.

I hope you enjoyed this post. For any comments and concerns reach out to us via Twitter, @codescience or me @msrivastav13.