Customizing Napili Template Of SFDC For Communities - Community Cloud

Recently I have been busy working with salesforce community cloud platform and I am impressed by the new added features of Spring 16 .

You can watch the Release Readiness webinar for more details on what are added features for community cloud 

Lets talk about something which most of client (Either SI or ISV ) would love to have with the Napili template .The first question that clients ask with Napili is its flexibility to customize and tailor to their specific needs .

The very straight forward questions that people familiar with Napili template ask are as follows 

Can I change the CSS and look and feel ?      
        
   Well yes and No ....The new branding editor you can sparingly use CSS and change look and   feel   and community editor can also help you to some extent to change labels and the color and you can really get closer to what you want .Just note that efforts will be high if we want to change the entire template design.

Will i be able to populate data from custom objects and standard objects and Will i be able to build my own pages ?  

Certainly yes .You can first choose your lightning templates and then build lightning components and drag and drop them .If you understand art of possibilities ,then i am sure its all about working with designer and nailing the UI with mutual consent .    

Can i integrate with third party systems ?Say your knowledge or content is outside SFDC ,Say your idea portal is different ,you want Single Sign on to work as well

The answer is yes and you will build lightning components and use apex to make callouts to external world .I have a sample blog that shows how to build components for communities .

How will I get the context variables of the lightning page so that I can pass those variables to external system to get the data related to that search item ?

A simple example for this use case could be ,I am looking at Topics page of the community and I want to get data from external world related to that topic .

Lets go in detail here on the challenge in hand ...Take a look at one of my stackexchange question i posted lately and got no response nor upvote to appreciate the question 

http://salesforce.stackexchange.com/questions/105627/napili-template-standard-search-event

Ok so context variables in simple terms can be imagined similar to Standard Controller ID ...So the question is how can i identify which Topic I am browsing in my lightning component to fetch matching terms related to that Topic from external world ..The document does horrible and gives no clue .Imagine its Utility for ISV apps .

Lot of ISV partner would like to know the context User is browsing so that their lightning component can give right results in the widget they have on appexchange.

So yes Finally lets come to main aim of this post 

How to find context variables values so that I can build my lightning component based on those ?

Here is the hidden secret (At least no document confirming this)

Every page inside community builder is a lightning page .Check below screenshots ..

Also every page has some environment variables listed ,

Lets try to capture these and read these via lightning component to see what they actually have 

A sample lightning component code to read the Topic name can be as below

The Design file is most important to capture environment variables

The apex code ::

The last part is configuration when the component is dragged to community builder .Place the exact context variables to derive values from them 

The key again here is to have a design value and use same merge variables as it is used in other variables on the page .

The output is as below when accessed in Topic page

In short the conclusion is ---"One can create design file and use same context variables as other components uses on a lighting page and use the variables to send back to apex to get data related to that context ".

This also answers my own question on stackexchange 

http://salesforce.stackexchange.com/questions/105627/napili-template-standard-search-event

I hope this is a framework for many upcoming appexchange ISV apps and also many communities .Please share this post in case you liked it .

Lightning components - Where all can I have thee...

With Salesforce investing lot on lightning components and I am sure lot of devs in salesforce world have started working with lightning components .

I have also started working on lightning components and below is some cool list on where all currently salesforce allows these components and a small snippet for each showing the interface that lightning component must implement .

Exciting ...Exciting ...Lets start...

• Add Lightning Components to Salesforce1

 The appHostable interface makes the component available as a custom tab.

All that one has to do is to create a lightning custom tab from salesforce Tabs and add to SF1 Navigation's .

• Add Lightning Components to Lightning Experience

The interface implemented remains as appHostable .The key here is how we can add this tab to new App launcher 

• Configure Components for Communities

• Configure Components for Lightning App Builder

• Configure Components for Lightning Experience Record Home Pages (PILOT)

A good example can be one demonstrated by BalaKishan.Please read his articles on lightning .Some great insights into it .

The key here is you have an attribute recordId and sObjectName populated automatically with correctId and API name

<aura:attribute name="sObjectName" type="String"></aura:attribute>

    <!-- Atrribute Defination for Record Id -->

 <aura:attribute name="recordId" type="String"></aura:attribute>

• Add Lightning Components to Visualforce Pages

This is coolest feature that's been added lately .To add a lightning component to the VF you first define an aura:application that has aura:dependency and extends  ltng:out .

The sample component code The VF code will look like below




I hope you enjoyed this little article :)

Lightning Components Tokens

One of the coolest addition to lightning components in Spring 16 release has been Lightning components Tokens .This feature is in developer preview mode and I already see use case for this feature .

Tokens make it easy to ensure that your design is consistent, and even easier to update it as your design evolves.

In this blogpost we will discover how to create these design tokens and how to use it inside the lightning components .I am using spring 16 pre-release org to demonstrate .This feature will be available only after your sandboxes are upgraded to spring 16 release .

Developer console is quickest method to edit and create lightning resources .In developer console you will see lightning tokens 

To create a design token simply click on the lightning Tokens

File | New | Lightning Tokens.

One important thing thats mandatory is to name the lightning Tokens file as "defaultTokens" .This is very important the tokens defined within it are automatically accessible in all Lightning components.

Before we actually start creating lightning Tokens file one thing to note is  Salesforce exposes a set of “base” tokens that we can access in our component style resources apart from custom tokens we create .To do this we will also extend our lightning component tokens from Base tokens .

Here is a sample lightning component tokens file 

Once we have created the file named "defaultTokens" these are directly available in any components in our namespace using small function token() .One just needs to use these in CSS resource of a component bundles.

Here is a sample example component showing how to use design tokens in CSS resource file .


It almost feels like custom labels to me but this is meant for use in the CSS design variables .It makes it easy to keep all design variables in a single resource and any change or update later one can avoid duplication of code and update from one single file .

I am eagerly waiting to see updated lightning components developer guide where salesforce will expose some of the tokens used in the SLDS .

Feel free to spread the word of this upcoming feature but note that salesforce safe harbour applies .