Dynamic List Item (Developer Preview)

1<lightning-card title="Dynamic Lists - Contacts" icon-name="standard:contact">
2  <div class="slds-card__body slds-p-around_medium">
3    <lightning-dynamic-list-container
4      list-items={listItems}
5      onrenderlistitems={handleRenderListItems}
6    >
7      <template for:each={listItemsToRender} for:item="item">
8        <lightning-dynamic-list-item key={item.id} item-id={item.id}>
9          <div class="contact-tile slds-p-around_small">
10            <p>{item.name}</p>
11            <p>{item.email}</p>
12          </div>
13        </lightning-dynamic-list-item>
14      </template>
15    </lightning-dynamic-list-container>
16  </div>
17</lightning-card>

1/* Required: bounded height for lightning-dynamic-list-container */
2.list-container {
3  height: 400px;
4}
5
6.contact-tile {
7  border: 1px solid #c2c8d4;
8  margin: 0.5rem;
9}

1import { LightningElement, wire } from "lwc";
2import { gql, graphql } from "lightning/graphql";
3
4export default class BaseComponents extends LightningElement {
5  // The full list of items from GraphQL
6  _listItems = [];
7
8  // The subset of items for rendering by lightning-dynamic-list-container
9  _listItemsToRender = [];
10
11  // Expose a list reference for lightning-dynamic-list-container
12  get listItems() {
13    return this._listItems;
14  }
15
16  // Populate data once from GraphQL wire
17  // Avoids repeated new array creation
18  @wire(graphql, {
19    query: gql`
20      query getContacts {
21        uiapi {
22          query {
23            Contact(first: 1000, orderBy: { Name: { order: ASC } }) {
24              edges {
25                node {
26                  Id
27                  Name {
28                    value
29                  }
30                  Email {
31                    value
32                  }
33                }
34              }
35            }
36          }
37        }
38      }
39    `,
40  })
41  wiredContacts({ errors, data }) {
42    if (data) {
43      this._listItems = data.uiapi.query.Contact.edges.map((edge) => ({
44        id: edge.node.Id,
45        name: edge.node.Name?.value || "Unknown",
46        email: edge.node.Email?.value || "N/A",
47      }));
48    } else if (errors) {
49      this._listItems = [];
50      // Handle the errors
51    }
52  }
53
54  get listItemsToRender() {
55    return this._listItemsToRender;
56  }
57
58  handleRenderListItems(event) {
59    this._listItemsToRender = event.detail.listItemsToRender;
60  }
61}