Skip to main content

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 .

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
    -SalesLeaderBoard
    …

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 a…