Problem when trying to apply dinamic style to a <div> (LWC Superbadge Step 5) - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
Ignacio de la TorreIgnacio de la Torre 

Problem when trying to apply dinamic style to a <div> (LWC Superbadge Step 5)

This problem appears as soon as I copy and paste the code provided in Trailhead into my VS Code.
<template>
  <div onclick={selectBoat} class={tileClass}>
    <div style={backgroundStyle} class="tile"></div>
    <div class="lower-third">
      <!-- Boat information goes here -->
      
    </div>
  </div>
</template>
I'm getting an error in this line:
<div style={backgroundStyle} class="tile"></div>
and I can't figure out what's wrong with it.

My backgroundStyle function in the js is the following:
// Getter for dynamically setting the background image for the picture
get backgroundStyle() {
  return `background-image: url(${this.boat.Picture__c})`;
}

boatTile.css
.tile {
    width: 100%;
    height: 220px;
    padding: 1px !important;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
  }
  .selected {
    border: 3px solid rgb(0, 95, 178);
    border-radius: 5px;
  }
  .tile-wrapper {
    cursor: pointer;
    padding: 5px;
  }

Any idea why this is happening ?
Best Answer chosen by Ignacio de la Torre
Jean-Noel CasassusJean-Noel Casassus
    Try something like that

const selectedEvent = new CustomEvent('boatselect', { detail: { boatId: this.boat.Id } });
this.dispatchEvent(selectedEvent);

All Answers

Jean-Noel CasassusJean-Noel Casassus
Try something like return 'background-image:url(' + this.boat.Picture__c + ')';
Ignacio de la TorreIgnacio de la Torre

Hi Jean Noel !

Thanks for the help ... still throwing the same errors. I will paste a picture of them:

User-added image

I BELIEVE the js file is ok ... but maybe I'm wrong

Jean-Noel CasassusJean-Noel Casassus
That look like more a vscode plugin (PMD may be ?) issue than one from the challenge. In the output for the CLI, is your file saved ?
Ignacio de la TorreIgnacio de la Torre
Hi Jean ... yes, it's all saved and sound except for this problem ... I've just retrieved the code in another computer and the problems is still there.
Jean-Noel CasassusJean-Noel Casassus
The files are saved, so I think it's related to a plugin like PMD.
Could you try to disable PMD if it's one of the plugin you are using ?
Ignacio de la TorreIgnacio de la Torre
I'm not really using any crazy plugin ... just VS Code, Salesforce CLI and SF extension pack .... I don't even know what a PMD is haha.
It is a crazy error indeed .... I'll write to SF help to see what they can tell me about it ....
Thanks a LOT for your time Jean Noel :D
Jean-Noel CasassusJean-Noel Casassus
If the files is saved, try to ignore that message and keep going with the super badge.
Ignacio de la TorreIgnacio de la Torre
The thing is that I can't validate step 5 until I solve this issue ... it will throw an error and won't "understand" anything that comes after this line of code
Jean-Noel CasassusJean-Noel Casassus
What is the error during validation ?
Ignacio de la TorreIgnacio de la Torre
Challenge Not yet complete... here's what's wrong:
We can’t find the correct settings for the div tags related to the boat price, length, and type in the component boatTile. Make sure the component was created according to the requirements, including the correct fields for price, length and the boat type’s name.

and this is the hole html file for boatTile.html
 
<template>
    <div onclick={selectBoat} class={tileClass}>
      <div style={backgroundStyle} class="tile">

      </div>
      <div class="lower-third">
        <!-- Boat information goes here -->
        <h1 class = "slds-truncate slds-text-heading_medium"> {boat.Name}</h1>
        <h2 class = "slds-truncate slds-text-heading_small">{boat.Contact__r.name}</h2>
        <div class = "slds-text-body_small">Price: 
          <lightning-formatted-number value= {boat.Price__c} minimum-fraction-digits="2"></lightning-formatted-number>
        </div>
        <div class="slds-text-body_small">
          <span class="label">Length:</span> 
          <span>{boat.Length__c}</span>
        </div>
        <div class="slds-text-body_small">Type: {boat.BoatType__r.Name}</div>
        </div>    
      </div>
  </template>

boatTile.js
// imports
import { LightningElement, api } from 'lwc';

export default class BoatTile extends LightningElement {

    @api boat;
    @api selectedBoatId;
    
    // Getter for dynamically setting the background image for the picture
    get backgroundStyle() {
      return `background-image: url(${this.boat.Picture__c})`;
    }
    
    // Getter for dynamically setting the tile class based on whether the
    // current boat is selected
    get tileClass() {
      const TILE_WRAPPER_SELECTED_CLASS = 'tile-wrapper selected';
      const TILE_WRAPPER_UNSELECTED_CLASS = 'tile-wrapper';

      if(this.boat.Id === this.selectedBoatId){
        return TILE_WRAPPER_SELECTED_CLASS;
      } else return TILE_WRAPPER_UNSELECTED_CLASS;

    }
    
    // Fires event with the Id of the boat that has been selected.
    selectBoat() { 
        const boatselect = new CustomEvent('boatselect', {
          detail: { boatId : this.boat.id }
        });

        this.despatchEvent(boatselect);
    }

  }

boatTile.css​​​
.tile {
    width: 100%;
    height: 220px;
    padding: 1px !important;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
  }
  .selected {
    border: 3px solid rgb(0, 95, 178);
    border-radius: 5px;
  }
  .tile-wrapper {
    cursor: pointer;
    padding: 5px;
  }

Image of the errors in html​​​​​​​
Jean-Noel CasassusJean-Noel Casassus
lightning-formatted-number is incorrect, it's max and not min
get backgroundStyle contain an error
tileClass: Const should be in the header
tileClass is missing a test
selectBoat javascript is case sensitive for Id
Ignacio de la TorreIgnacio de la Torre
Thank you Jean Noel.
I've changed those things but now I have another problem with the const variables

User-added image

User-added image

since when I can only use const in Typescript files ? 
Jean-Noel CasassusJean-Noel Casassus
The header mean that the constants will nee to be between import and export

// imports
import { LightningElement, api } from 'lwc';

// Constants here

export default class BoatTile extends LightningElement
Ignacio de la TorreIgnacio de la Torre
User-added image
User-added image

do you see any problems now  ?
The html errors are still there ....

Is the backgroundStyle function badly written  ? 
Jean-Noel CasassusJean-Noel Casassus
lightning-formatted-number is missing a format
Length could be formatted like Type

backgroundStyle should return something like 'background-image:url(' + ...
Jean-Noel CasassusJean-Noel Casassus
tileClass need to test if no boat are selected too
Ignacio de la TorreIgnacio de la Torre
I think the problem is because I'm missing this part of the solution

User-added image
wich is very unclear ... it says messageContext has to be @wire but it doesn't tell you to what ....

 
Jean-Noel CasassusJean-Noel Casassus
Still with BoatTile or you are now on another step ?
I'm almost sure that there is no messageContext in that step.
Ignacio de la TorreIgnacio de la Torre
Nop, still in boatTile .... 
User-added image

it's very confusing where the steps starts and finish, this is very unclear in the description.
Jean-Noel CasassusJean-Noel Casassus
messageContext will be for a later stage for anoher component (boatSearchResults in that case).
Part of that step is to use selectBoat to dispatch an event that will be used by boatSearchResults later.
There is no messageContext in that Boattile component.
If you update:
  • lightning-formatted-number is missing a format
  • Length could be formatted like Type
That should make you pass the HTML checking

Those one are for the JS check
  • backgroundStyle should return something like 'background-image:url(' + ...
  • tileClass need to test if no boat are selected too
Ignacio de la TorreIgnacio de la Torre
I see ... thanks for everything !!
I've changed the HTML but the problem is still there.
Now when trying to validate the challenge I get this error
Challenge Not yet complete... here's what's wrong:
We can’t find the correct settings for selectBoat() in the component boatTile JavaScript file. Make sure the function was created properly, dispatching the event boatselect with the correct detail and settings, according to the requirements, using the proper case-sensitivity and quotation.
selectBoat()
// Fires event with the Id of the boat that has been selected.
    selectBoat() { 
        const boatselect = new CustomEvent('boatselect', {
          detail: { boatId : this.boat.Id }
        });

        this.despatchEvent(boatselect);
    }
can't see what is wrong with it ... I did corrected the id for Id as you pointed out before
Jean-Noel CasassusJean-Noel Casassus
    Try something like that

const selectedEvent = new CustomEvent('boatselect', { detail: { boatId: this.boat.Id } });
this.dispatchEvent(selectedEvent);
This was selected as the best answer
Ignacio de la TorreIgnacio de la Torre
I can't believe that worked !
THANK YOU SO MUCH Jean Noel !!!
Kate SpryKate Spry
I'm having the same HTML issue as above.  I'm following along here and tried several things, but I'm still getting the HTML file errors.  Here is my current code:User-added image
Ignacio de la TorreIgnacio de la Torre
Hello Kate!
I haven't solved the HTML issue yet ... I could pass the challenge but the issue still persists ...
I believe it's a kind of bug or something because it shouldn't let us deploy and check the challenge if not ....
I'm stil trying to figure out what's wrong.
Let me know if you could PLEASE
Kate SpryKate Spry
Ok, I thought maybe you figured it out.  It's driving me nuts.  I'll let you know if I come across a solution.
Kate SpryKate Spry
Can you share your full html file again with the current changes?
Ignacio de la TorreIgnacio de la Torre
User-added image

That's the boatTile.html file Kate
The 3 errors are still there as you can see, but the challenge was passed, weird as f**k hahaha.

Let me know if you need me to share the other files.

It's driving me nuts too, sience 3 days now
Kate SpryKate Spry
It appears that I have what you have, but my challenge does not pass. I’m getting the following errors: We can’t find the correct settings for the div tags related to the boat price, length, and type in the component boatTile. Make sure the component was created according to the requirements, including the correct fields for price, length and the boat type’s name.
Ignacio de la TorreIgnacio de la Torre
User-added image
I'm starting to deslike this superbadge ....
Here is the JS so you can guide yourself ....

It might be the same problem than I had, try changing stuff in the functions and try again, I had that error before and the problem was not in the html file but in the JavaScript
Kate SpryKate Spry
I made one small change in the js file, we have everything the same and I still get the same error as though it’s not reading the html file. I need to take a break. I will try to look at it tomorrow.
Jean-Noel CasassusJean-Noel Casassus
That could be a falsepositive from SLDS Validator too
Kate SpryKate Spry
Ignacio, I'm back tracking a little and double checking everything.  Would you mind sharing your boatsearch.js file from #4.
Judy WilsonJudy Wilson
Ignacio, I also noticed in your js file you have despatch instead of dispatch (under selectBoat).
Kate SpryKate Spry
A Component error occurred:  afterRender threw an error in 'c:boatTile' [Cannot read property 'Id' of undefined] in function r.get tileClass [as tileClass}.    Any ideas?

import { LightningElement, api } from 'lwc';
const TILE_WRAPPER_SELECTED_CLASS = 'tile-wrapper selected';
const TILE_WRAPPER_UNSELECTED_CLASS = 'tile-wrapper';
export default class BoatTile extends LightningElement {
@api boat;
@api selectBoatId;
//Getter for dynamically setting the background image for the picture
get backgroundStyle() {
return 'background-image:url(' + this.boat.Picture__c + ')';
}
//Getter for dynamically setting the tile class based on whether the
//current boat is selected
get tileClass() {
if(this.boat.Id === this.selectedBoatId){
return TILE_WRAPPER_SELECTED_CLASS;
} return TILE_WRAPPER_UNSELECTED_CLASS;
}
// Fires event with the Id of the boat that has been selected.
selectBoat() {
const selectedEvent = new CustomEvent('boatselect', {
detail: { boatId : this.boat.Id }
});
this.dispatchEvent(selectedEvent);
}
}
Kate SpryKate Spry
I changed my code a bit in the js file and I passed the challenge, but I still get an error in the app builder which says, "afterRender threw an error in 'c:boatTile' [Cannot read property 'Name' of undefined'], function a?  Let me know what you need from me to resolve this.  Thanks!
Jean-Noel CasassusJean-Noel Casassus
tileClass is incorrect, there is no test for undefined values
Judy WilsonJudy Wilson
Jean-Noel, I don't know what that means as I'm not a developer.  Can you provide more information?
Kate SpryKate Spry
Jean-Noel, this is my current js file - it passed but the component has the error: "afterRender threw an error in 'c:boatTile' [Cannot read property 'Name' of undefined], function a. 

import { LightningElement, api} from "lwc";
const TILE_WRAPPER_SELECTED_CLASS = "tile-wrapper selected";
const TILE_WRAPPER_UNSELECTED_CLASS = "tile-wrapper";
export default class BoatTile extends LightningElement {
@api boat;
@api selectedBoatId;
get backgroundStyle() {
return "background-image:url(${this.boat.Picture__c})";
}
get tileClass() {
return this.selectedBoatId ? TILE_WRAPPER_SELECTED_CLASS : TILE_WRAPPER_UNSELECTED_CLASS;
}
selectBoat() {
this.selectedBoatId = !this.selectedBoatId;
const boatselect = new CustomEvent("boatselect", {
detail: {
boatId: this.boat.Id
}
});
this.dispatchEvent(boatselect);
}
}
Jean-Noel CasassusJean-Noel Casassus
tileClass is incorrect, there is no test for undefined values
selectBoat this.selectedBoatId is not a boolean, it's an Id
Kate SpryKate Spry
I tried changing this based on the above thread and based on other research but no luck.  It does not make any sense.
Kate SpryKate Spry
I passed all the way through challenge 7, but still cannot fix the error on this challenge to make the app work properly.  I'm not worried about the HTML errors any longer, but the tileClass still presents some concern.  Is there any body of knowledge you can direct me too that might give me examples of what I need to do?  Thanks!
Jean-Noel CasassusJean-Noel Casassus
  // Getter for dynamically setting the tile class based on whether the
  // current boat is selected
  get tileClass() {
// If the variable is valid
    if (this.selectedBoatId) {
// If it's the current boat
      if (this.selectedBoatId == this.boat.Id) {
        return TILE_WRAPPER_SELECTED_CLASS;
      }
    }
// All other possibility
    return TILE_WRAPPER_UNSELECTED_CLASS;
  }
  // Fires event with the Id of the boat that has been selected.
  selectBoat() {
// Create the custom event
    const selectedEvent = new CustomEvent('boatselect', { detail: { boatId: this.boat.Id } });
// Dispatch the event
    this.dispatchEvent(selectedEvent);
  }
Ignacio de la TorreIgnacio de la Torre
Hello all !
Sorry for the late reply Kate, I've been super bussy.
I just noticed your messages and you pointed out the despatch intead of dispatch in my code ... WOW, I don't know how that worked then and validated the challenge. Should be let Salesforce know about it ?
Please let me know if I can help with anything
Ignacio de la TorreIgnacio de la Torre
Please share the code to see what you are talking about ... What's the name you're trying to reference ? boat, boatType ?

I also have a question for you ... I'm in step 6 now and I can't find the boatMap component anywhere in the org ... do you know where is it ? I've tried opening the lightning resources in dev console and not there ... pulled the source from the org in VS Code and nothing changed ... 
Ignacio de la TorreIgnacio de la Torre
Ok .... I've got the boatMap component with the CLI

sfdx force:source:retrieve -m LightningComponentBundle:boatMap

if anyone is having this issue as well !!!
 
Kate SpryKate Spry
Ignacio, you have to create the boatMap component in VS.
Kate SpryKate Spry
Hi Jean-Noel,
Thank you for the code help.  I tried your code above, but still get the error, afterRender threw an error in 'c:boatTile'[Cannot read property 'Name' of undefined]
anuj garganuj garg
Same error  i get
Ignacio de la TorreIgnacio de la Torre
Then this is clearly a bug ... Has anyone reported this to Salesforce help ?
Mayur SolankiMayur Solanki

I am getting error but challenge got passed.

Error1:

On UI  - Error during LWC component connect phase: [Cannot read property 'Name' of undefined]

Error2:

On VS code -   } expected    &  at-rule or selector expected
erroevs

My component details:

 

boatTile.css
.tile {
    width: 100%;
    height: 220px;
    padding: 1px !important;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
  }
  .selected {
    border: 3px solid rgb(0, 95, 178);
    border-radius: 5px;
  }
  .tile-wrapper {
    cursor: pointer;
    padding: 5px;
  }
------------------------------------------------------------------------------------------------
boatTile.html

<template>
  <div onclick={selectBoat} class={tileClass}>
    <div style={backgroundStyle} class="tile"></div>
    <div class="lower-third">
      <h1 class="slds-truncate slds-text-heading_medium">{boat.Name}</h1>
      <h2 class="slds-truncate slds-text-heading_small">{boat.Contact__r.Name}</h2>
      <div class="slds-text-body_small">
        Price: <lightning-formatted-number maximum-fraction-digits="2" format-style="currency" currency-code="USD"
          value={boat.Price__c}> </lightning-formatted-number>
      </div>
      <div class="slds-text-body_small"> Length: {boat.Length__c} </div>
      <div class="slds-text-body_small"> Type: {boat.BoatType__r.Name} </div>
    </div>
  </div>
  </div>
</template>

------------------------------------------------------------------------------------------
boatTile.js

import { LightningElement, api } from "lwc";
const TILE_WRAPPER_SELECTED_CLASS = "tile-wrapper selected";
const TILE_WRAPPER_UNSELECTED_CLASS = "tile-wrapper";
export default class BoatTile extends LightningElement {
  @api boat;
  @api selectedBoatId;
  get backgroundStyle() {
    return "background-image:url(${this.boat.Picture__c})";
  }
  get tileClass() {
    // If the variable is valid
        if (this.selectedBoatId) {
    // If it's the current boat
          if (this.selectedBoatId == this.boat.Id) {
            return TILE_WRAPPER_SELECTED_CLASS;
          }
        }
        // All other possibility
        return TILE_WRAPPER_UNSELECTED_CLASS;
      }
  selectBoat() {
    this.selectedBoatId = !this.selectedBoatId;
    const boatselect = new CustomEvent("boatselect", {
      detail: {
        boatId: this.boat.Id
      }
    });
    this.dispatchEvent(boatselect);
  }
}

--------------------------------------------------------------------------------------------------

 

Please can you suggest what is wrong here? 

 

Gnandendra MatavalamGnandendra Matavalam

@mayur,

I only issue I see in your code, is the Template literal is enclosed in double quotes but it should be enclosed with back-ticks.

 return "background-image:url(${this.boat.Picture__c})";  should be  return `background-image:url(${this.boat.Picture__c})`;

David MendozaDavid Mendoza
Based on this article: https://github.com/trailheadapps/lwc-recipes/issues/122 it's a vs code html setting. I disabled it and was able to pass 

Go to settings: Extensions: HTML: Validate: Styles: and turn off "Controls whether the built-in HTML language support validates embedded styles"
Pankaj Ramesh PatilPankaj Ramesh Patil
Hey all...Thanks for everyones suggestion....I was able to pass the challenge but the Boat images were not displayed...The issue was resolved by following code:
return `background-image:url( ${this.boat.Picture__c} )`; --- using back-quote ( ` ) and images were displayed. 
But still struggling with the following error related to .html code in VS Code.
<div style = {backgroundStyle} class="tile"></div> 

User-added image