How To Use Tokens in salesforce Lightning

How To Use Tokens in salesforce Lightning?

This is one of the cool features of Salesforce lightning mainly used for styling in components.You need to define code, values only once and use anywhere in the lighting components.

Tokens Bundles

A Token is also a Lightning bundle like any other bundle i.e. components, events, and interfaces.

To create a token bundle follow the steps-

Go to developer console->File-> New->Token bundle

NoteBefore naming your token please make sure that Name of your first token is “defaultTokens”. Token with any other name will not be accessible in a lightning component. To use tokens other than “defaultTokens” you need to import that token in default token first.

Name your token bundle then submit. It will look like below

<aura:tokens>

</aura:tokens>

A token is basically name-value pair that is defined using <aura: token> component name is used in the component to inherit token values.

Sample code-

Lightning Token – (defaultTokens)

<aura:tokens>

<aura:token name=”divFont” value=”italic bold 12px/30px Georgia, serif”/>

<aura:token name=”divFontWeight” value=”bold”/>

<aura:token name=”divBackgroundColor” value=”Green”/>

<aura:token name=”divMargin” value=”6px”/>

<aura:token name=”divTextColor” value=”red”/>

</aura:tokens>

Your token is ready now. To use these tokens in the lightning component just write below code in the CSS section of the lightning component where you want to use this.

Lightning component (TokenTest)

<aura:component >

<div class=”TokenClass”>

<p>Algoworks technologies pvt ltd first line</p>

<p>Algoworks technologies pvt ltd second line</p>

<p>Algoworks technologies pvt ltd third line</p>

</div>

</aura:component>

TokenTest.CSS-  To Use a design token just reference it using token() or t() function.

.THIS.TokenClass {

font-family: token(divFont);

font-weight: token(divFontWeight);

background-color: token(divBackgroundColor);

color: t(divTextColor);

margin: t(divMargin);

}

 

Lightning Application (TokenDemo)

<aura:application >

<c:TokenTest />

</aura:application>

Output-

Token_default

To Use Token Other Than Default token

If you want to create token other than Default token then you need to maintain a hierarchical structure among these Tokens.Default token will be the parent and all other child and sub-child and so on. To extend Tokens in the parent token use the keyword “extends”.

I have created three tokens

1.DefaultToken

2. ChildToken1

3. ChildToken2

Sample code –

ChildToken2

<aura:tokens>

<aura:token name=”divMargin” value=”15px”/>

<aura:token name=”divPadding” value=”10px”/>

</aura:tokens>

ChildToken1– ChildToken2 is extended in the ChildToken1 using extends keyword.

<aura:tokens extends=”c:ChildToken2″>

<aura:token name=”divBackgroundColor” value=”lightblue”/>

<aura:token name=”divTextColor” value=”black”/>

</aura:tokens>

DefaultToken–  ChildToken1 is extended in the DefaultToken using extends keyword.

<aura:tokens extends=”c:ChildToken1″>

<aura:token name=”divFont” value=”Arial, sans-serif”/>

<aura:token name=”divFontWeight” value=”bold”/>

</aura:tokens>

Lightning component (TokenTest)

<aura:component >

<div class=”TokenClass”>

<p>Algoworks technologies pvt ltd first line</p>

<p>Algoworks technologies pvt ltd second line</p>

<p>Algoworks technologies pvt ltd third line</p>

</div>

</aura:component>

TokenTest.CSS-   To Use a design token just reference it using token() or t() function.

.THIS.TokenClass {

font-family: token(divFont);

font-weight: token(divFontWeight);

background-color: token(divBackgroundColor);

color: t(divTextColor);

margin: t(divMargin);

}

Lightning Application (TokenDemo)

<aura:application >

<c:TokenTest />

</aura:application>

Output-

Child-Token

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?