Introduction:
In this blog post, we’ll explore how to create a custom list view in Salesforce using Lightning Web Components (LWC) and Apex. This will enable you to fetch, display, and print Task records based on specific filters. We will walk through the Apex controller and LWC code step by step. Additionally, we’ll cover how to create a list layout button, a custom list view, and how to pass the current list view ID to an LWC.
Prerequisites
- Basic understanding of Salesforce development.
- Familiarity with Apex and Lightning Web Components.
- Access to a Salesforce org with appropriate permissions.
Step 1: Create a Visualforce Page
First, we need a Visualforce page to connect to the LWC (ListviewPage).
<apex:page standardController=”Task” recordSetVar=”tasks” extensions=”CustomListViewInLwcCtrl”>
<apex:includeLightning />
<style>
#lightning {
height: 100vh;
}
@media print {
#lightning {
height: auto;
overflow: visible;
}
.print-section {
height: auto;
overflow: visible;
}
}
</style>
<div id=’lightning’></div>
<script>
console.log(‘work6’);
var filterId = ‘{!filterId}’;
console.log(‘Filter ID:’, filterId);
$Lightning.use(
“c:ExampleLWCApp”,
function() {
$Lightning.createComponent(
“c:listviewpage”,
{
‘filterId’: filterId
},
“lightning”
);
}
);
</script>
</apex:page>
Step 2: Create an Aura Component
<aura:application extends=”ltng:outApp” >
<aura:dependency resource=’listviewpage’/>
</aura:application>
Step 3: Create an Apex Controller
First, we need an Apex controller to handle the fetching of list views and their records. Here’s the CustomListViewInLwcCtrl Apex controller:
Step 4: Create a Lightning Web Component
Next, let’s create the Lightning Web Component that will interact with our Apex controller to fetch and display the Task records. Here’s the listviewPage LWC:
HTML Template
JavaScript Controller
PAGE_SIZE;}}
Handle Internal Errors
If an internal error occurs while fetching the records, we will display an appropriate error message to the user. The catch block in the fetchRecords
method handles this by setting the error
property.
Steps 1 Add Remote Site Settings
To allow your Apex class to make callouts, you need to add your Salesforce org’s URL to the Remote Site Settings. Here’s how to do it:
- Navigate to Setup:
- Go to the Setup menu in Salesforce.
- Search for Remote Site Settings:
- In the Quick Find box, type “Remote Site Settings” and select it.
- Create a New Remote Site:
- Click the “New Remote Site” button.
- Fill in the required fields:
- Remote Site Name: Give it a name like “MyOrgSite”.
- Remote Site URL: Enter your Salesforce org URL (e.g.,
https://myorg.my.salesforce.com
).
- Save the settings.
By adding the remote site settings, you ensure that your Salesforce org can make callouts to itself, which is necessary for the Apex class to function correctly.
Creating a List Layout Button
To create a button on a list view that opens our custom list view Visualforce page:
- Go to Salesforce Setup.
- Navigate to Object Manager.
- Select the Task object (or the desired object).
- Under Buttons, Links, and Actions, click New Button or Link.
- Fill in the details:
- Label: Custom List View
- Name: Custom_List_View
- Display Type: List Button
- Behavior: Display in existing window without sidebar or header
- Content Source: URL
- URL: /apex/customListViewPage
- Click Save.
- Add the button to the Search Layouts for the object.
Getting the Current List View ID in LWC
To get the current list view ID in the LWC, you can use the filterId parameter passed from the Visualforce page. This parameter is set in the connectedCallback method and used to fetch the relevant data.
Putting It All Together
- Create the Apex controller, Visualforce page, and LWC component with the functionalities described above.
- Deploy the code to your Salesforce org.
- Create the list layout button and add it to the object.
- Access the Visualforce page from the Lightning Experience.
- You should see a dropdown to select a list view, followed by the corresponding data displayed in a table format.
Final Output
Conclusion
By following these steps, you can create a custom list view in Salesforce using Lightning Web Components and Apex. This solution allows you to fetch and display Task records dynamically and print the list view. Adjust the code as needed to fit your specific requirements.