Category Archives: Lightning

Use Design Tokens- Salesforce lightning Framework

We’ve completed few lightning based projects and frequently encountered an issue- How to standardize CSS developed for various components ?

For e.g. how to define a font which should be used across all the components. In other words,  suppose in future, if we need to change it(font), it should be do-able at one place, rather that changing every single component.

Easiest way to do this is via Design Tokens.

But we need to remember few things when using design tokens.

First see, how token are defined:

<aura:tokens extends="force:base">
    <aura:token name="myFontWeight" value="bold"/>
  1. Salesforce provide list of Standard Tokens that can be used directly. They don’t to be defined as shown above. How, those can be used, will provide that information later
    • Another point to note is- it is not recommended to override Stadard Tokens in your code(Lightning Components).
  2. You need to create Token Bundle before using you can use Tokens. Even to use standard tokens, you need to create Token Bundles.For this, you’ve two options:
    • Default Tokens : defaultTokens.tokens. This should always be the name of default tokens as shown below(Image 1).

      Default Tokens

      Image 1

    • Custom Tokens : Any name can be given for e.g. myCustomTokens as show in image 2

      Custom Token

      Image 2

    • To create Token bundles(both default or any custom one), go to Developer Console-> File-> New-> Lightning Tokens
  3. Let us see, how we can use token in lightning components
    • if you see below image, you’ll notice standard tokens(fontFamily, colorBorder) are referred directly, they don’t be defined in our tokens bundles. These are Salesforce defined as per link given above.

Use of Tokens

  1. Now question is -when to use Default token or Custom Tokens ? For this, you’ve to note that-Only those tokens should be defined as Default Tokens, which are common across organisation, while custom tokens can be created for a particular project.
  2. Another point to note : If you see above images properly, Custom Tokens have extended force:base(Standard Tokens), while Standard Tokens have extended ‘Custom Tokens’
  3. This give rise to another point – Suppose you’ve defined a token in both Custom Tokens and Default Tokens bundles, which one is applied, when used in lightning component?
    • Answer is – Value is defined in default tokens bundle. so it makes sense to define only limited number of tokens in ‘default tokens’ bundle. Because if it starts conflicting values in other bundles, then there will be no purpose in defining tokens in custom bundles as default token bundles will always take priority
    • Example for this is token :myDefaultMargin. it is defined in both default and custom token bundle. so value(6 px) defined in default token bundle will take priority.

Steps to work Salesforce Lightning Web components(LWC) with Scratch Org

Though all details to create LWC with scratch Org are mentioned in trailhead(LWC with Scratch Org ), still I faced difficulty in locating those, once I’ve completed above trailhead. Moreever, details are not that much emphasized.

For benefits of everyone- I’m providing  high level steps below. For more details, please visit trailhead links as mentioned in this post.

    1. Ideally start with new project (CTRL+SHIFT +P) in VSCode. Choose Empty new Folder to create it.
      • Once created, Ensure that project has all necessary folders like (.sfdx, force-app, .vscode etc)
    2. Once project got created,  click again CTRL+SHIFT+P and create Lightning web component using command sfdx :create lightning web component.
    3. Give proper name to the component. I’m following this example:(productCardDemo), so, i’ve given the name as productCard. Ensure that productCard.html and productCard.js are properly created.

Create productcard.html with following code.

      Name: {name}
      Description: {description}
      Category: {category}
      Material: {material}
      Price: {price}

Create productcard.js with following code.

import { LightningElement } from ‘lwc’;
export default class App extends LightningElement {
name = ‘Electra X4’;
description = ‘A sweet bike built for comfort.’;
category = ‘Mountain’;
material = ‘Steel’;
price = ‘$2,700’;
pictureUrl = ‘

  1. Next run command- SFDX: Authorize a Dev Hub in VSCode  or
    sfdx force:auth:web:login -d -a myhuborg , in Terminal

    Please note, authorizing DevHub is an essential part, before create new scratch Org.Here we have given alias to DevHub as myhuborg.

  2. Click CTRL+SHIFT+P, run command- SFDX: Create a Default Scratch Org
    • Press Enter to accept the default project-scratch-def.json.
    • Press Enter to accept the default trailhead scratch org alias.
    • Press Enter to accept the default 7 days scratch org duration.
  3. Or you can write following command in terminal to create scratch Org :sfdx force:org:create -s -f config/project-scratch-def.json -a trailhead
  4. Click CTRL+SHIFT+P, type ‘focus terminal’ to open new terminal window.
  5. Type – sfdx force:source:push to push newly created components into your scratch org
  6. Type in the terminal window:sfdx force:org:open, to open your scratch org.
  7. search lightning components in the setup menu to verify, if newly created lightning web component(productCard) is present or not.
  8. To use it. create new lightning app page. for that open lightning app builder from set up menu:
    • Create App page, when prompted
    • Give label as ProductCard.
    • Select ‘One Region’ as standard template
    • Now lightning App Builder, will get opened. Scroll down and add productCard Lightning web component to your app from left menu.
    • Click SAVE on top right and Activate your App.
    • Choose default option in ‘Page Settings’ tab. Ensure you add this new page in one the app for e.g Sales/ Service  in ‘Lightning Experience‘ tab as shown below:
      • Image1
  9. Click Save and visit ‘Sales’ or ‘Service’ app to see the Lightning component created.

Resolving Salesforce Lightning Web Components(LWS) errors(Trailhead example)

Lightning Web Components are launched few months back and already there are many write-ups/blogs to create your first few components. I’ve also recently jumped the bandwagon but faced lots of some challenges during set up and creating my first ‘Hello World’ component. On searching, I’m finding there is not much help available yet if you come across any failure.

I’m writing this blog so that others can benefit, if they face any such issue, which I’ve faced. Please note, as of now I’ve started doing trailhead module for this :

Your First lightning web component

First Error:

After installing  Salesforce CLI, I opened command prompt(same can be done, using ‘New terminal’ option on top bar-> Terminal option) – Typed ‘sfdx’ and as I expected, It gave :

‘sfdx’ is not recognized as an internal or external command,
operable program or batch file.

  • Now, nothing mentioned in trailhead, what to do, in case you fail such issue:
  • Resolving this is simple – all you’ve to do is to ‘edit’ path  in environmental variables and add path of ‘bin’ folder of Salesforce CLI. You can use path variable, mentioned in either User/System environmental variable(s). To edit environment variable,  type ‘edit env’ in Windows search and it will open screen, where you can edit it.
  •  Generally, bin folder is located in following location :C:\Program Files\Salesforce CLI\bin. Copy this path and paste in path of Environment variable as mentioned above.

Second Error :

Cannot find Lightning Component Bundle helloWorld
  • I faced this problem, when I was deploying components to an Org, which already has hello world (Aura) component available. Note that, it seems presence of even aura component with same Name, hinders deployment of LWC.
  • Preferably create new ‘Trailhead Org’, when you’re starting working on LWC.

Third Error : This weird error came from piece of code in helloWorld.html

        value={greeting}       onchange={changeHandler}     >
  • If you notice,  in example, there are no double quotes(“”) around {greeting} and {changeHandler}. But on saving in VScode ,it was automatically adding quotes and because of compilation errors was coming.
  • To resolve this, I’ve to open the folder(again named helloWorld) , containing helloWorld.html file, using windows explorer(note: not from inside VSCode etc). Modify it with notepad(any editor, apart from VSCode) to remove these quotes.
  • After that, then I again right clicked ‘default’ folder and used ‘SFDX:Deploy Source to Org’ and then it worked like a charm!

Fourth Error : This happened while running below command :

Starting SFDX: Create a Default Scratch Org.
ERROR running force:org:create:  Must pass a username and/or OAuth options when creating an AuthInfo instance.
  • This means, that you’ve not set up DevHub Org properly. Scratch org needs DevHub to be set up properly.
  • As per my current understanding, this seems like Parent org for all the temporary scratch orgs. Ensure that, in atleast of your Trailhead(or Dev) org, DevHub(set up-> DevHub) is enabled
  • Then from terminal in VSCode running following commands:
    • sfdx force:auth:web:login -d
    • it should open browser. In that please enter credentials for org in which Debhub settings are enabled
    • You’ll see a message showing that you’ve successfully authorized yourself with org Id(<15/18 digit ID) of DevHub
    • Run next : sfdx force:auth:web:login -d -a DevHub

Another thing to Note: Make sure, you’ve authorized correct org(Trailhead Playground) using SFDC:Authorize an Org. if not sure, do it again.

Happy Coding! 🙂