📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by April 19th. Learn more.
close

Add Styles and Data to a Lightning Web Component

Learning Objectives

After completing this unit, you’ll be able to:
  • Use CSS and Lightning Design System with a component.
  • Get data from a Salesforce org.
  • Deploy your app to an org and test it.

Adapt Your Component

We’ve almost wrapped up our introduction to Lightning web components, but let’s get a taste of how we can control a component’s appearance and pull in live data. We can adapt the look and feel to the Lightning environment, and use live data in the org. In this unit, we liven up the appearance of some of the text and draw in an account name dynamically from a record in your org.

CSS and Component Styling

The implementation of CSS for Lightning Web Components adheres to the W3C standard. You can create a style sheet in the CSS file, and it’s automatically applied to the corresponding HTML file.

The Lightning Web Component model provides full encapsulation of component styles and elements, keeping your HTML, JS, CSS separate from the global DOM. We do this through a mechanism called Shadow DOM. Shadow DOM is a common implementation that allows a component’s elements to live in a “sub tree” of the DOM (learn more about Shadow DOM in the link provided in the Resources section). The component can keep its appearance and behavior within other apps or as a child of another component. You can also design your component to inherit style and behavior from the page or parent.

For example, let’s set the price of a bike to display as bold, green text. Add the following .price entry to the detail.css file.

ebody{
  margin: 0;
} 
.price {
  color: green;
  font-weight: bold;
}

Deploy your files. The CLI remembers your previous commands so you can use the up-arrow key to recall your deploy command.

Tip

Tip

You can specify a folder to grab the new files and not wait for the entire project to deploy. For example:

sfdx force:source:deploy -p force-app/main/default/lwc -u <username>

In your org, you might need to refresh the page to see the changes in case it is cached. Then, when you select a bike, the price is green and bold.

Price style makes the text green and bold.

Applying Lightning Design System Styles

Salesforce Lightning Design System (SLDS) is a CSS framework that provides a look and feel that’s consistent with Lightning Experience. Lightning web components that live in Lightning Experience or in the Salesforce mobile application can use SLDS without any import statements or static resources.

For example, you can use the SLDS heading styles to give the detail component text that looks more like the standard Lightning text. Update the detail.html file to use the slds-text-heading_small and slds-text-heading_medium font settings as follows.

<template>
    <template if:true={product}>
    <div class="container">
        <div class="slds-text-heading_small">{product.fields.Name.value}</div>
        <div class="price">{product.fields.MSRP__c.displayValue}</div>
        <div class="description">{product.fields.Description__c.value}</div>
        <img class="product-img" src={product.fields.Picture_URL__c.value}></img>
        <p>
            <lightning-badge label={product.fields.Material__c.value}></lightning-badge>
            <lightning-badge label={product.fields.Level__c.value}></lightning-badge>
        </p>
        <p>
            <lightning-badge label={product.fields.Category__c.value}></lightning-badge>
        </p>
    </div>
    </template>
    <template if:false={product}>
    <div class="slds-text-heading_medium">Select a bike</div>
    </template>
</template>

Deploy your files.

Now try the component in your org and see the difference (you’ll need to refresh the page).

SLDS heading font treatments applied.

Looks great! Now we have the look and feel ready to go. But so far, we’ve been using static data pulled from the data component. Let’s add one more shiny thing to our page... dynamic data.

Get Salesforce Data

This is a Salesforce app after all, and what you really want is to be able to pull dynamic data from a Salesforce org. Lightning web components use a reactive wire service, which is built on Lightning Data Service. We walk through an example of pulling an account name into our app, dynamically.

The Wire Service Brings Data to Your App

The wire service is part of our platform and delivers a stream of data. The @wire decorator, which we mentioned briefly before, implements the wire service for your app. To use the wire service, do the following.

  1. Import a wire adapter in the JavaScript file.
  2. Decorate a property or function with the @wire decorator.

Here’s the syntax.

import { adapterId } from 'adapter-module';
@wire(adapterId, adapterConfig)
propertyOrFunction;
  • adapterId (Identifier)—The identifier of the wire adapter.
  • adapter-module (String)—The identifier of the module that contains the wire adapter function.
  • adapterConfig (Object)—A configuration object specific to the wire adapter.
  • propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property.
And here’s how to add it to the selector.js file in the project we’ve been working on to pull the current user’s name from your org.
import { LightningElement, track, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import NAME_FIELD from '@salesforce/schema/User.Name';

const fields = [NAME_FIELD];


export default class Selector extends LightningElement {
    @track selectedProductId;

    handleProductSelected(evt) {
        this.selectedProductId = evt.detail;
    }

    userId = Id;

    @wire(getRecord, { recordId: '$userId', fields })
    user;

    get name() {
        return getFieldValue(this.user.data, NAME_FIELD);
    }
}
You can try this out by also editing the selector.html file to include the name. For example:
<template>
    <div class="wrapper">
    <header class="header">Available Bikes for {name}</header>
    <section class="content">
        <div class="columns">
        <main class="main" >
            <c-list onproductselected={handleProductSelected}></c-list>
        </main>
        <aside class="sidebar-second">
            <c-detail product-id={selectedProductId}></c-detail>
        </aside>
        </div>
    </section>
    </div>
</template>

When you deploy the selector component files to your org (make sure your deployment includes the selector files) , you should see the following with your name instead of Mary Jones. You might need to refresh the page.

Dynamically loaded user name in the UI.

Conclusion

This is only the beginning, and you can do a lot with the Lightning Web Components model. The model includes support for testing, security, Apex integration and more. Keep exploring, try new things, keep building. As the W3C web components standard evolves, so will our model.

The road to the future of Lightning web components.
retargeting