Technology has always been a bridge, but today, it feels more like a mirror. With the rapid rise of AI , we are seeing things enter our lives and leave them at a pace we can barely track. To understand where this is going, we first have to understand how technology actually impacts the core of who we are. The Survivalist vs. The Ego Our minds are biologically wired for one thing: survival . We are designed to handle the worst-case scenario, an ancient instinct gifted to us by nature. We consider ourselves conscious decision-makers, but a critical question remains: Who is really making the call?
Introduction:
In this blog post, we will explore how to create a Global List View component using Lightning Web Components (LWC). List views are a powerful feature in Salesforce that allow users to filter and display records based on specific criteria. By creating a custom Global List View component, we can extend this functionality and provide a more tailored experience for our users. We will walk through the steps of creating the component and provide a sample code that you can use as a starting point for your own implementation.
Prerequisites:
Before we begin, make sure you have a basic understanding of Lightning Web Components and have set up a development environment with the necessary tools and permissions to create and deploy components in Salesforce.
Step 1: Set up the project
- Create a new LWC project using your preferred development tool or the Salesforce CLI.
- Navigate to the project directory and create a new LWC component using the following command:
sfdx force:lightning:component:create --type lwc --componentname GlobalListView
Step 2: Implement the Global List View component
1. Open the newly created component file (`GlobalListView.js`) and modify the default code as follows:
import { LightningElement, wire } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
export default class GlobalListView extends LightningElement {
listViews;
@wire(getListUi, {
objectApiName: 'Account',
listViewApiName: 'AllAccounts' // Replace with the API name of the desired list view
})
wiredListViews({ data, error }) {
if (data) {
this.listViews = data.lists;
} else if (error) {
console.error(error);
}
}
}
2. Save the file.
Step 3: Create the Global List View component markup
1. Open the HTML file (`GlobalListView.html`) and replace the default code with the following markup:
<template>
<lightning-card title="Global List View" icon-name="utility:filter">
<div class="slds-p-around_medium">
<template if:true={listViews}>
<ul class="slds-list_horizontal">
<template for:each={listViews} for:item="listView">
<li key={listView.id} class="slds-m-right_medium">
<a href={listView.url}>{listView.label}</a>
</li>
</template>
</ul>
</template>
<template if:false={listViews}>
<p>No list views available.</p>
</template>
</div>
</lightning-card>
</template>
2. Save the file.
Step 4: Add styles to the component
1. Open the CSS file (`GlobalListView.css`) and add the following styles:
.slds-p-around_medium {
padding: 1rem;
}
.slds-m-right_medium {
margin-right: 1rem;
}
2. Save the file.
Step 5: Deploy and use the Global List View component
- Deploy the component to your Salesforce org using your preferred deployment method.
- Once deployed, you can use the Global List View component on any Lightning page or app by adding the following markup:
<c-global-list-view></c-global-list-view>
3. Replace c-global-list-view with the appropriate namespace or prefix, if applicable.
Conclusion:
In this blog post, we learned how to create a Global List View component using Lightning Web Components. We explored the necessary steps to implement the component and provided a code sample that you can use as a starting point for your own development. By leveraging the power of LWC and the Salesforce UI API, you can enhance the list view functionality in your Salesforce org and provide a more tailored experience for your users.