10. Creating Car Tiles

[rodriggj]

[rodriggj]

In the carTileList.html file we need to reference the carTile object and populate this carTile component with data we received from the cars property which is in the carTileList.js file.

1. To start go to the carTileList.html file and provide a structure for each carTile that will be displayed. In our code below, we are creating a tile list container which is the first div tag and applying some padding around the container. Then we are using our template and sfdc directive to evaluate if there are any car objects. If so, we are creating another div container to house the carTile and we are again using our sfdc template and directives to iterate over the cars array that is being passed from the carTileList.js property. The next step is to bring in the carTile component and populate it with data.

carTileList.html

<template>
    <lightning-card title="Car Tile List" icon-name="standard:account">
        <div class="slds-p-around_medium">
            <template if:true={cars}>
                <div class="content">
                    <template for:each={cars} for:item="car">

                    </template>
                </div>
            </template>
        </div>
    </lightning-card>
</template>

2. We need to pass the carTile as a child component to our carTileList component. To do this add the following code:

carTileList.html

<template>
    <lightning-card title="Car Tile List" icon-name="standard:account">
        <div class="slds-p-around_medium">
            <template if:true={cars}>
                <div class="content">
                    <template for:each={cars} for:item="car">
                        <c-car-tile key={car.Id} car={car}></c-car-tile>
                    </template>
                </div>
            </template>
        </div>
    </lightning-card>
</template>

Here we are passing the car Object to the carTile component. We need to handle this in the carTile.js file by adding a property to the carTile.js file coming from the parent carTileList component. This is done with the @api decorator which we need to import from the lwc module.

carTile.js

import { LightningElement, api } from 'lwc';

export default class CarTile extends LightningElement {
    @api car
}

[rodriggj]

3. Now lets format our carTile in our HTML file. Enter the following code:

carTile.html

<template>
    <div>
        <div class="content">
            <img 
                src={car.Picture_URL__c} 
                class="slds-align_absolute-center car"
                alt="Car Picture"/>
            <div>
                <p class="title slds-align_absolute-center">{car.Name}</p>
                <p class="slds-align_absolute-center">
                    MSRP: 
                    <lightning-formatted-number 
                        format-style="currency"
                        currency-code="USD"
                        value={car.MSRP__c}
                        class="price"
                        maximum-fraction-digits="0">
                    </lightning-formatted-number>
                </p>
            </div>
        </div>
    </div>
</template>

4. And initialize the carTile.js property of car to an empty array.

carTile.js

import { LightningElement, api } from 'lwc';

export default class CarTile extends LightningElement {
    @api car={}
}

5. Deploy to the DevOrg with right-click on the lwc folder and select SFDX: Deploy Source to Org. You should see something similar to this.

The images seem like they are too big so lets modify the styling of our card by adding a .css flle.

6. Create a file within the carTile directory called carTile.css. In the .css file add the following code:

carTile.css

img.car{
    height:120px;
    max-width: initial;
    pointer-events: none;
}

.title{
    font-weight: bold;
    text-transform: uppercase;
}
.content{
    padding:8px;
    background-color: #ffff;
    border-radius:0.25rem;
}

7. Deploy to the DevOrg by right-clicking on carTile and selecting SFDX: Deploy to Source Org. Go back to the Car Hub application and you should now see something like this:

8. Things are looking better but now the alignment of the cars is up and down and we want it to go horizontally in rows. To do this we need to bump up our styling not to the carTile but to the carTileList component. Go to the carTileList directory and create a file called carTileList.css. In the file enter the following code:

carTileList.css

c-car-tile{
    min-width: 200px;
    flex:1;
}
.content{
    display:flex;
    flex-wrap: wrap;
}

9. Deploy to DevOrg

[rodriggj]

Implications to Testing

Look at how many hops our Cars Array needed to make across files to render to the screen. What would happen if a simple type-o were made. Instead of car you wrote cars; both would have been correct but depending where you were in the exchange of data unintended consequences could occur.

Expand on how testing can be used to avoid this.