Create the Session List Web Component
In this step, you create a new web component that displays the list of sessions featured at the conference.
Create the sessionList Web Component
First, let’s create the web component’s CSS file.
- Under the existing
my
folder, create a new folder namedsessionList
. - In the
sessionList
folder, create a new file namedsessionList.css
. -
Define the following styles:
:host { width: 100%; padding: 2rem; color: #080707; } .session { width: 100%; display: flex; font-size: 1rem; justify-content: space-between; text-align: left; margin: 1rem 0; padding: 1rem; background-color: transparent; border: 1px solid #dddbda; align-items: center; border-left: 3px solid #0277bd; border-radius: 0 0.5rem 0.5rem 0; } .session:hover { background-color: #e1f5fe; cursor: pointer; text-decoration: none; } .session p { margin: 0; } .session .title { font-weight: 600; font-size: 1.2rem; } .session .icon { color: #039be5; background-repeat: no-repeat; background-size: contain; padding-left: 1.75rem; } .session .icon.time { background-image: url(https://developer.salesforce.com/files/js-dev/icons/clock.svg); margin-top: .6rem; } .session .icon.room { background-image: url(https://developer.salesforce.com/files/js-dev/icons/location.svg); margin-top: .4rem; } input { border: 1px solid #dddbda; border-radius: 0.25rem; transition: border 0.1s linear, background-color 0.1s linear; display: inline-block; padding: 0 1rem 0 0.75rem; line-height: 2rem; font-size: 1rem; width: 15rem; } .speaker-pictures { display: flex; justify-content: end; } .speaker-pictures > img { border-radius: 50%; height: 3.5rem; margin-left: 0.5rem; }
-
Save the
sessionList.css
file.
Now you create the Javascript file.
- In the
sessionList
folder, create a new file namedsessionList.js
. - Implement the
sessionList.js
class as follows:import { LightningElement } from 'lwc'; import { getSessions } from 'data/sessionService'; export default class SessionList extends LightningElement { sessions = []; connectedCallback() { getSessions().then(result => { this.sessions = this.allSessions = result; }); } }
Properties are always automatically reactive, which means that when the value of the property changes, the component is automatically rerendered. In this case we don't use the@track
decorator, as we replace the value of thesessions
array. If we mutated the array, then we would use the@track
decorator. TheconnectedCallback()
method is a lifecycle method defined in the custom element specification. It is called when the custom element is appended to the DOM. TheconnectedCallback()
method is also a good place to retrieve data. -
Save the
sessionList.js
file.
Next, let’s create the web component’s HTML template.
- In the
sessionList
folder, create a new file namedsessionList.html
. -
Implement the
sessionList.html
class as follows:<template> <div class="list"> <template for:each={sessions} for:item="session" for:index="index"> <p key={session.id}>{session.name}</p> </template> </div> </template>
Thefor:each
directive allows you to iterate over the items in a list, in this case thesessions
property defined in theSessionList
class. To facilitate rendering optimization, you have to provide the outermost element included in thefor:each
directive with akey
that has a unique value. To access properties defined in the JavaScript file of the component, use the curly braces notation. -
Save the
sessionList.html
file.
That’s it! You just created a web component that displays a list of sessions retrieved by invoking the REST data service.
Add the Component to the App
To see your web component in action, the last thing you need to do is to add it to the application.
- Open the
app.html
file undermy/app
. - Replace the comment
<!-- Add components here -->
with:<my-session-list></my-session-list>
-
Save the
app.html
file.
Go back to your browser window to see your changes. The application should look like this.
Improve the User Interface
Everything works great, but the session list looks a little plain. Let’s improve the user interface by providing more information about the sessions.
-
Open the file
sessionList.html
. -
Replace
<p key={session.id}>{session.name}</p>
with:<a key={session.id} class="session"> <div> <p class="title">{session.name}</p> <p class="icon time">{session.dateTime}</p> <p class="icon room">{session.room}</p> </div> <div class="speaker-pictures"> <template for:each={session.speakers} for:item="speaker"> <img key={speaker.id} src={speaker.pictureUrl} alt={speaker.name} title={speaker.name}> </template> </div> </a>
-
Save the
sessionList.html
file.
Go back to your browser: The session list looks much better!
Add Search Capabilities
You only have a few sessions in this sample application. But lists can get long! It’s often a good idea to add a search box to allow users to easily find what they are looking for.
-
Open the
sessionList.html
file. -
Add the following tag as the first tag inside
<div class="list">
:<input type="search" placeholder="Search sessions..." oninput={handleSearchKeyInput} />
Notice theoninput
event: when the user enters characters in the search box, thehandleSearchKeyInput
event handler is called insessionList.js
. This event handler doesn’t exist yet. We create it next. -
Save the
sessionList.html
file. -
Open the
sessionList.js
file. -
Add the
handleSearchKeyInput
event handler right after theconnectedCallback
event handler:handleSearchKeyInput(event) { const searchKey = event.target.value.toLowerCase(); this.sessions = this.allSessions.filter( session => session.name.toLowerCase().includes(searchKey) ); }
-
Save the
sessionList.js
file.
Go back to the browser to see search in action. Enter a few characters in the search box: the list automatically updates to reflect your search criteria.
The list provides a good overview of the conference sessions, but conference attendees often need more information to choose the sessions they want to attend. In the next step, you create a web component that shows the details for a specific session.
We won't check any of your local development. Click Verify Step to go to the next step in the project.