7. Component Creation and Placement

[rodriggj]

We will now begin to build out Components that make up our front end application.

Recognize that Component front-end design is all the rave right now. Several "Non-Salesforce" frameworks are widely used to create Component Design for front end interfaces. Examples include Angular, React, View, ANT, etc. therefore, Salesforce has adopted its own version called Lightning Web Components (LWC)

For our app we will ultimately create and use 4 components:

• carFilter
• carCard
• carTileList
• carTile

The carFilter component will populate our left column The carTileList and a nested component carTile will populate our center column The carCard component will populate our right column

To build these components we will leverage the Lighting Web Component Library which is documentation on pre-built components that Salesforce makes available to developers for use in their own custom applications.

[rodriggj]

carFilter Component

1. Go to View / Command Palette / SFDX: Create Lightning Web Component
2. When prompted for a file name enter carFilter and hit Enter.
3. When prompted for file location hit Enter, which will place the file in the default lwc directory in the folder structure.
4. Now if you view the directory you should see 3 files created by default:
   • carFilter.html
   • carFilter.js
   • carFilter.js-meta.xml

5. Open the file carFilter.html and lets add the details of the lightning component by using the lighting-card tag.

As the inteli-text indicates, the lightning-card is a container that is provided to us by Lighting Web Components Library. We will use standard HTML to assign a title to the container. And then use an attribute of the lightning-card, which is the icon-name to provide a standard icon to the container.

<template>
    <lightning-card title="Filters" icon-name="standard:calibration">

    </lightning-card>
</template>

6. We will return to this component to add additional HTML which will render additional UI, and assign functionality to the component with Javascript to make the "Filters" work. But for now we will simply leave the "container" as is.
7. Before this container will be usable, we have to modify the carFilter.js-meta.xml file which is what Salesforce uses as a configuration file for this component. We need to tell Salesforce in this configuration file, that it is "available" and we need to specify where this component will be used, (aka the targets / target). To do this nav to carFilter.js-meta.xml and add the following code:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Car Filter</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

8. We now need to deploy this component to our DevOrg. We do this by right-clicking on the carFilter parent folder and selecting Deploy to Source Org.

9. We need to now repeat this process for our other components.

NOTE: By default there is no .css file that is created. You can add a carFilter.css file if you want to implement some explicit styling, but it is not created for you.

[rodriggj]

carTileList Component

1. Go to View / Command Palette / SFDX: Create Lightning Web Component

2. When prompted for a file name enter carTileList and hit Enter.

3. When prompted for file location hit Enter, which will place the file in the default lwc directory in the folder structure.

4. Now if you view the directory you should see 3 files created by default:

   • carTileList.html
   • carTileList.js
   • carTileList.js-meta.xml

5. Again, create a lighting-card tag and this time provide a different Title and icon-name

<template>
    <lightning-card title="Car Tile List" icon-name="standard:account">

    </lightning-card>
</template>

6. Make the modification to the carTileList.js-meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Car Tile List</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

7. Right-click on parent carTileList folder and select Deploy to Source Org

[rodriggj]

carTile Component

1. Go to View / Command Palette / SFDX: Create Lightning Web Component

2. When prompted for a file name enter carTile and hit Enter.

3. When prompted for file location hit Enter, which will place the file in the default lwc directory in the folder structure.

4. Now if you view the directory you should see 3 files created by default:

   • carTile.html
   • carTile.js
   • carTile.js-meta.xml

5. Again, create a lighting-card tag and this time provide a different Title. We won't provide an icon for this one.

<template>
    <lightning-card title="Car Tile">

    </lightning-card>
</template>

6. Make the modification to the carTile.js-meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Car Tile</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

7. Right-click on parent carTileList folder and select Deploy to Source Org

[rodriggj]

carCard Component

1. Go to View / Command Palette / SFDX: Create Lightning Web Component

2. When prompted for a file name enter carCard and hit Enter.

3. When prompted for file location hit Enter, which will place the file in the default lwc directory in the folder structure.

4. Now if you view the directory you should see 3 files created by default:

   • carCard.html
   • carCard.js
   • carCard.js-meta.xml

5. Again, create a lighting-card tag and this time provide a different Title and icon-name

<template>
    <lightning-card title="Car Card" icon-name="standard:apex_plugin">

    </lightning-card>
</template>

6. Make the modification to the carCard.js-meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Car Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

7. Right-click on parent carTileList folder and select Deploy to Source Org

[rodriggj]

Add to the Car Hub application

1. Now that all lwc components have been deployed to your DevOrg, we need to now go use them in our Car Hub application. In your DevOrg navigate to Setup / Lighting App Manager / on the Car Hub line item click Edit. And you should be directed back to your Application Editor. On the lower left, you should see all the Custom components we just created and deployed to our DevOrg.

2. Drag and drop the components to the regions indicated in the diagram above, and click Save.
3. Use App Manager to navigate to the Car Hub application and you should now see components on our Layout.

[rodriggj]

So What Impact does this have on Testing?

Recall in our "Development" we created 4 components, and placed them on our Custom Layout.

Recall also that Automated Testing Tools are going to use Document Object Model (DOM) Elements as Locators to identify UI Elements that we will test. So let's take one of the Components we created and see what DOM Impact it has.

Let's look at the carTileList component and see what the DOM Elements and therefore Locator Options are.

Here is the code we wrote, for the carTileList component. Realize we haven't given it any real content or functionality ... right now its just a "placeholder". Here we literally wrote/edited 7 lines of code! That's all 7 lines of code

So what did it do to the DOM? Here is what Google Chrome shows as all the DOM identifiers just to get to that carTileList Component...

And that is all before we even get to the the label "Car Tile List". If you dive lower and open just that header element on the carTileList Component you see the following...

Take-Aways:

1. Where is all this "extra" stuff coming from? The Lighting Platform and the Lighting Web Component Framework.
2. Is this unique to Salesforce? Yes and No. Yes, All Frameworks (React, Vue, MaterialUI, etc.) may add extra HTML tags and CSS classes. No. There is no Standard set of things that are generated. They differ from Framework to Framework. Salesforce will implement its own CSS class Naming and HTML elements that will be different than you may see in Rust, Vue, React, Larvel, Django, Angular, etc.
3. Why is this important?
   • Because these naming conventions of HTML Tags and CSS identifiers drive the DOM Locator mappings. If you don't know what they are you have to map them Manually, or you have to get specialized tooling that does the translation for you.
   • Because "other" frameworks won't have Salesforce specific differences. If you use a "general design" tool, you are likely NOT to have Salesforce specific conventions. Mocha, Chai, Jest, Selenium, etc. based Automated Testing engines don't know what <slot> or <lightning-card/>" tags are.
   • These tags are dynamically inserted. Meaning if you have to map them manually and the UI changes, an element that was not there earlier may be now inserted into the DOM based on Javascript Logic Handlers.
   • Because these Elements, Names, and Styles are versioned and will change. So if you don't have a tool that is keeping current with these DOM elements then your tests that depend on this will break.