Welcome to episode four of HowToDev.
I'm your trusted developer
advocate, Stephan Chandler-Garcia,
and we're about to jump back into the app
we're building for our favorite
fictitious company, Dreamhouse.
Over the course of this series,
simple and data driven user interface
and turn it into this visually polished
and intuitive experience,
making users’ lives easier
to other programing languages.
and we learned how to use DML to modify
my favorite part of Salesforce
Here we are in Salesforce,
and what you're looking at here
is the Lightning Experience.
But what even is Lightning?
for the Salesforce user interface.
that you do in Salesforce
by providing a way for you
to break up every page into components
that have standard design
But Lightning doesn't stop there.
There's a huge amount of functionality
that developers need to know about.
So let's start with the Lightning page.
for one of the property records.
is a Lightning Record Page,
and each of the elements on this page
using the Lightning App Builder.
This is how you build and customize pages
with using point and click tools
and see that the entire page
all the way from the heading down
to the record details is componentized.
On the left hand side of the screen,
we have all of the available components.
We then have the content region
for you to construct your page,
and when we click a component,
all of the component’s properties.
different types of components
that you need to know about.
First, we have standard components.
These are provided out of the box,
party components that have been created
components or Lightning Web Components.
HTML elements built using HTML
only what's necessary to perform
And because they're built on code
that runs natively in the browser,
and deliver exceptional performance.
What I love about building
is that they allow me to lean
on my existing web development skills.
We want to build a component
a list of interactive properties.
So let's go ahead and jump into VS code
and build an LWC from scratch.
in our property service Apex class.
This is because we want to use
add the @ AuraEnabled annotation
and set it to cacheable=true
This is what allows Salesforce
to securely expose this method
Now we can create the LWC.
We can use the command palette again
to create a new Lightning Web Component.
the PropertyList component,
and it will automatically generate
all of the files we need.
that we have an HTML, JavaScript
and metadata file that make up the LWC.
and the first thing we want to do
is import the PropertyService class
and the GetProperties method.
Now how do we actually use this method?
For that we need Decorators.
functions that are called on classes,
syntax forms during their definition
Components Programming model,
there are a number of Decorators
to a property or a function.
we're going to use the wire decorator
to connect to the database.
simple, we can import the wire adapter.
We're going to just declare @ wire
pass in the name of the method,
and then provide a JavaScript property
for us to store the result.
Let's call it PropertyList.
This returns an array of the records
that we can use in our component,
Now let's go over to the HTML
The file will always start
The template tag is a fundamental
building block of a components
HTML that generates UI elements.
All of the code that you write
will exist between these two tags.
We're going to skip the Hello World
example and fill it with something
list of property records.
We can do this with a template iterator.
we can define a new template with the
for: each to pass in the array.
Then we use for: item to give each record
Anything that you put between
the iterator will be repeated
The element inside of each
template needs a key to use
we specified as our item.
In this case we would use the record dot
Then when we want to display values
to display the record’s name,
you would use the record dot name variable.
If we check this out in Salesforce,
you can see it's getting the data,
but it's not very pretty.
That's where SLDS comes in.
for short, is a comprehensive toolkit
pre-built UI components, styles
to create visually consistent
and user friendly applications
on the Salesforce platform.
It ensures that there is a seamless
user experience across all Lightning Apps
while promoting maintainability
and most importantly, accessibility.
to the next level in no time.
You can go to getSLDS dot com
to the design system at any time.
here are the component blueprints.
that you can use in your app.
Let's select card, for example.
there are multiple variations
and it's as easy as copying the HTML
and pasting it into your components.
updated the property list
component to take it to the next level.
that the component fits perfectly
The layout feels much better
Well, let's check the code.
that I've included styles
to space out all of the elements
But this is a lot of markup
thanks to Base Lightning Components,
we don't need all of this.
There is an entire component
you can bring right into your components.
Remember all of that card markup?
Well, this is the card base component.
All you have to do is pass in the title,
instead of all of the markup.
You can see there is a lightning card,
lightning layout, lightning buttons.
Now we have a Lightning Web Component
the interactive property list
And like that, it's so easy
to create outstanding apps fast.
So what have we covered here today?
all about Lightning Web Components
and how they are the foundation
for extending the Salesforce UI.
We explored the Salesforce
you style your components in no time.
how you can use base components
You'll be building LWCs in no time.
Now, this sets us up to use automation
and data driven user interface
and turn it into this visually polished
and intuitive experience.
lives easier and more efficient.
and we'll see you next time.
