Lightning Web Components Specialist- Challenges

Doing a post after long time, As of now I’m doing Lightning web component specialist Superbadge, I’ll be posting problems I’ve faced while doing so as I’m finding not enough suggestions are available online.

  1. Problem : We can’t find the correct settings for tileClass() in the component boatTile JavaScript file…… on Challenge 5

For me this problem took lot of time as everything was fine in tileClass(), actually error was because of little wrong implementation of some other method: selectBoat(). Make sure it it like this :

selectBoat() {      

 this.selectedBoatId = !this.selectedBoatId;     

 const boatEvent = new CustomEvent(‘boatselect’,      

 {detail: {          boatId: this.boat.Id      }});      


For more info, check details posted on :

Problem 2 : We can’t find the required imports in the component boatMap JavaScript file. Make sure the component was customized according to the requirements, including the imports from Lightning Web Components.

Ensure you’ve following 4 imports in the JS file(specially api decorator in first line- this is what I’ve missed) :

import { LightningElement, wire,api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import BOATMC  from '@salesforce/messageChannel/BoatMessageChannel__c';
import { subscribe, unsubscribe, APPLICATION_SCOPE, MessageContext } from 'lightning/messageService';

Problem 3 : We can’t find the required constants in the component boatMap JavaScript file. Make sure the component was created according to the requirements, including the correct values for LONGITUDE_FIELD, LATITUDE_FIELD, and BOAT_FIELDS.

Seriously didn’t know what exactly went wrong : but I’ve to use the below code to make it work:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

// import BOATMC from the message channel

import { APPLICATION_SCOPE, MessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import BOATMC from '@salesforce/messageChannel/BoatMessageChannel__c';

const LONGITUDE_FIELD = 'Boat__c.Geolocation__Longitude__s';
const LATITUDE_FIELD = 'Boat__c.Geolocation__Latitude__s';

export default class BoatMap extends LightningElement {

  // private
  subscription = null;
  @api boatId;

  get recordId() {
    return this.boatId;

  set recordId(value) {
    this.setAttribute('boatId', value);
    this.boatId = value;

  error = undefined;
  mapMarkers = [];

    // Initialize messageContext for Message Service


  @wire(getRecord, {
  recordId: this.boatId,
  fields: BOAT_FIELDS})  

  wiredRecord({ error, data }) {
    // Error handling

    if (data) {

      this.error = undefined;
      const longitude = data.fields.Geolocation__Longitude__s.value;
      const latitude = data.fields.Geolocation__Latitude__s.value;
      this.updateMap(longitude, latitude);

    } else if (error) {
      this.error = error;
      this.recordId = undefined;
      this.mapMarkers = [];



  // Encapsulate logic for Lightning message service subscribe and unsubsubscribe

  subscribeToMessageChannel() {

    if (!this.subscription) {

        this.subscription = subscribe(
            (message) => {
              this.boatId = message.recordId;
            { scope: APPLICATION_SCOPE }


unsubscribeToMessageChannel() {
  this.subscription = null;

  // Runs when component is connected, subscribes to BoatMC

  connectedCallback() {
    if (this.subscription || this.recordId) {
    // Subscribe to the message channel to retrieve the recordID and assign it to boatId.

   subscribeMC() {

    let subscription = subscribe(
      (message) => { this.boatId = message.recordId }, 
      { scope: APPLICATION_SCOPE });

  // Creates the map markers array with the current boat's location for the map.
  updateMap(Longitude, Latitude) {
    this.mapMarkers = [Longitude, Latitude];
  // Getter method for displaying the map component, or a helper method.
  get showMap() {
   return this.mapMarkers.length > 0;


Procedure to apply Indian Passport Application of new born in London(UK)

Recently I’ve to apply Indian passport for my new born baby from London. Though there are couple of sites, which provide step by step  information, how to do the same. But finding some of the information is either incomplete or little outdated. Still there are very useful blogs/sites. In this post, I’m not going to repeat the information provided. I’d suggest to visit these sites(links given below) and come back in case of doubts. May be I’ve faced same issue(s) and this post could provide pointers for the same:

Birth Registration- Links 1

Birth Registration- Links 2

Passport Application

Few pointers for main passport application :

    1. Link of passport application site is :
    2. In home page of above site, it is mentioned, to apply passport, you’ve to click on folllowing link, once logged-in
        • “Apply for Ordinary Passport/Emergency Certificate/Police Clearance Certificate/Surrender of Indian Passport/Diplomatic Passport/Official Passport/Identity Certificate”
        • There is no such link you will find, once you’re logged in as shown below:)
    3. You’ve to click ‘Apply for Ordinary Passport’ link
    4. First page while filling application is self explanatory , where it asks ‘applying for’ fresh passport or Re-issue of passport
    5. In applicant details section, for minor : fill following fields like this : 
      • Marital Status : Single
      • Citizenship of India by : Registration/Naturalization
      • PAN : Keep Blank
      • Voter ID : Keep blank
      • Employment type : Not Employed(if new born or could be Student)
      • Educational qualification : 7th pass or less( Most relevant option should be filled)
      • Is either of your parent (in case of minor)/spouse, a government servant?* : Fill accordingly
      • Is applicant eligible for Non-ECR category?*  : Yes 
      • No need to fill fields like ‘visible distinguishing mark or Aadhar
      • No need to take undertaking I agree etc as you’re not providing Aadhar.
    6. Ensure first address in Applicant Address  Details is Indian address You can give 2nd address as your UK address  
    7. Emergency contact could be of your Spouse/Partner/Friend/Relative of UK(preferably) or India.
    8. In All other following pages, Nothing major, you might be clicking ‘No’ on all of questions.











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.