LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.
So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !
Please check complete code below from LWC Stack EP-27
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <template>
<lightning-card title="Wire List View" icon-name="utility:user">
<div class="slds-var-m-around_medium">
<div style="padding: 10px">
<template if:true={listView.data}>
<template for:each={contacts} for:item="contact">
<p key={contact.fields.Id.value}>{contact.fields.Name.value}</p>
</template>
</template>
</div>
</div>
</lightning-card>
</template>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { LightningElement, wire } from "lwc";
import { getListUi } from "lightning/uiListApi";
import CONTACT_OBJECT from "@salesforce/schema/Contact";
import NAME_FIELD from "@salesforce/schema/Contact.Name";
export default class WireListview extends LightningElement {
@wire(getListUi, {
objectApiName: CONTACT_OBJECT,
listViewApiName: "Contact_test_view",
sortBy: NAME_FIELD,
pageSize: 10
})
listView;
get contacts() {
return this.listView.data.records.records;
}
}
|
Output
Checkout complete tutorial below
If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !
Thanks
.png)
%20(1).png)
%20(1).png)
4 Comments
Hi,
ReplyDeleteI would like do it for Event Object. How can I draw this with the same design?
Have you tried the same way for event ?
Deleteas getListUi (Deprecated), is there any alternative to get list view data
ReplyDeleteNot sure about it, I will check and update it here.
Delete