LWC: Get Filter Name/ID From List View Button

Hey guys! Ever found yourself in a situation where you needed to grab the filter name or ID from a List View in your Lightning Web Component (LWC)? Especially when you're launching that LWC from a Custom List View Button? It's a common scenario, and I'm here to break it down for you. This article walks you through how to achieve this, making your LWC more dynamic and user-friendly. We'll cover everything from setting up the LWC to accessing the filter information, ensuring you have a solid understanding by the end.

So, you've got this cool LWC, right? And you're firing it up from a List View button using a URL like /lightning/cmp/c__myLwcName. Your component is already a pro at exporting records displayed in the List View – awesome! But now, you want to take it a step further. You need to know which filter is applied to that List View. Maybe you want to customize the export based on the filter, or perhaps you have some other clever use case in mind. The challenge here is that Lightning Experience doesn't directly pass the filter name or ID to your component. We need to get a little creative and find a way to extract this information.

Okay, let's get our hands dirty with the solution. We'll break this down into a few key steps to make it super clear.

Step 1: Grabbing the Current URL

First things first, we need to access the current URL in our LWC. Why? Because the List View filter information is often tucked away in the URL parameters. Think of the URL as a treasure map, and the filter ID is the hidden treasure we're after. To do this, we'll use the window.location.href property. This gives us the full URL of the current page, including all those juicy parameters.

const currentUrl = window.location.href;
console.log('Current URL:', currentUrl);

This simple line of code is our starting point. It fetches the entire URL string, which we can then parse to extract the filter information. It’s like getting the whole map before zooming in on the specific location we need.

Step 2: Parsing the URL Parameters

Now that we have the URL, we need to dissect it. We're looking for URL parameters, which are those key-value pairs that come after the question mark (?) in the URL. For example, a URL might look something like this:

/lightning/o/Account/list?filterName=Recent

In this case, filterName is the key, and Recent is the value. We need to write some JavaScript to parse these parameters. A common way to do this is by splitting the URL string and then further splitting the parameters into key-value pairs. Here’s how you can do it:

const urlParams = new URLSearchParams(window.location.search);
const filterName = urlParams.get('filterName');
console.log('Filter Name:', filterName);

Let's break down this code snippet:

• new URLSearchParams(window.location.search): This creates a URLSearchParams object from the query string part of the URL (the part after the ?). It’s a handy utility for working with URL parameters.
• urlParams.get('filterName'): This retrieves the value of the filterName parameter. If the parameter exists in the URL, you'll get its value; otherwise, you'll get null.

This step is crucial. It's where we move from having a long, complex URL string to having the specific piece of information we need – the filter name.

Step 3: Handling Different URL Structures

Okay, here's a little twist. Sometimes, the filter information might not be in the filterName parameter. It could be in a different parameter, or the URL structure might be slightly different depending on how the List View is configured or accessed. For example, you might find the filter ID in a parameter called listViewId or something similar. To handle these variations, we need to be a bit more flexible in our code.

Here’s a more robust approach that checks for multiple possible parameter names:

const urlParams = new URLSearchParams(window.location.search);
let filterValue = urlParams.get('filterName');

if (!filterValue) {
    filterValue = urlParams.get('listViewId'); // Or any other potential parameter name
}

if (filterValue) {
    console.log('Filter Value:', filterValue);
} else {
    console.log('No filter information found in URL');
}

In this code, we first try to get the filterName. If that doesn't work, we try listViewId. You can add more if conditions to check for other potential parameter names. This makes your component more resilient to different URL structures, ensuring it works consistently across various List View configurations.

Step 4: Displaying the Filter Information in the LWC

Now that we've extracted the filter information, let's put it to use! We'll display the filter name (or ID) in our LWC. This not only confirms that we've successfully retrieved the information but also makes it visible to the user. To do this, we'll use a simple LWC property and bind it to the template.

First, in your LWC's JavaScript file, declare a property to store the filter value:

import { LightningElement, track } from 'lwc';

export default class MyLwcName extends LightningElement {
    @track filterValue;

    connectedCallback() {
        const urlParams = new URLSearchParams(window.location.search);
        this.filterValue = urlParams.get('filterName') || urlParams.get('listViewId');
        console.log('Filter Value:', this.filterValue);
    }
}

Here's what's happening:

• @track filterValue: This declares a reactive property named filterValue. The @track decorator ensures that the component re-renders whenever this property changes.
• connectedCallback(): This is a lifecycle hook that runs when the component is inserted into the DOM. We fetch the filter value here to ensure it's available when the component renders.
• this.filterValue = urlParams.get('filterName') || urlParams.get('listViewId'): This line is doing the magic. It tries to get the filterName first, and if that's null (i.e., not found), it tries to get the listViewId. This is a concise way of checking for multiple parameters.

Next, in your LWC's HTML template, display the filterValue:

<template>
    <lightning-card title=