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 named sessionList.
In the sessionList folder, create a new file named sessionList.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 named sessionList.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 the sessions array. If we mutated the array, then we would use the @track decorator. The connectedCallback() method is a lifecycle method defined in the custom element specification. It is called when the custom element is appended to the DOM. The connectedCallback() 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 named sessionList.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>
```
The for:each directive allows you to iterate over the items in a list, in this case the sessions property defined in the SessionList class. To facilitate rendering optimization, you have to provide the outermost element included in the for:each directive with a key 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 under my/app.
Replace the comment  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.

The current application with the short list of session data

Note

If you are having trouble seeing your changes, you may have terminated the watch process on the command line. In that case, go back to the command line, make sure you are in the right folder (conference-app), and type: npm run watch. Open a browser window and navigate to http://localhost:3001 for Mac or http://0.0.0.0:3001 for Windows to access your application.

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!

The updated interface with more session information

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 the oninput event: when the user enters characters in the search box, the handleSearchKeyInput event handler is called in sessionList.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 the connectedCallback 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 Conference app when using the search bar to look for patterns.

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.

Tópicos

Create the Session List Web Component