1

I am working on a challenging issue. I have created an LWC component that has several buttons. The buttons have labels on top of them that correspond to Status values. If I click the button it opens a list view that I have created (not a custom list view but an actual list view that I had created earlier). The issue is I want the list view to be filtered. For example, if the button says "Open" then it should open that list view and pass a filter criteria of Status="Open" so that the list view only shows the records with Status="Open". I can not get the filter part working or even have any idea how to start. Can someone please help? Thanks

1 Answer 1

2

You can use import { NavigationMixin } from 'lightning/navigation'; and redirect them to a filtered list view.

So if your button has <lightning-button variant="base" label="OpenAccount" icon-name="utility:add" icon-position="right" onclick={handleListViewNavigation}></lightning-button>

You js should look like.

handleListViewNavigation() {
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Account',
            actionName: 'list'
        },
        state: {
            filterName: 'Household_Accounts' // Full name of the list view from listview xml
        }
    });
}

Note: The list view name should be API name of the list view.

UPDATE

More reusable code would be to define your filter name as part of dataset attribute.

    <lightning-button variant="base" label="NextWeekAccount" icon-name="utility:add" icon-position="right" data-filtername="NewLastWeek" onclick={handleListViewNavigation}></lightning-button>
    <lightning-button variant="base" label="HouseHoldAccounts" icon-name="utility:add" icon-position="right" data-filtername="Household_Accounts" onclick={handleListViewNavigation}></lightning-button>

And your JS should look like.

handleListViewNavigation(event) {
    if(event.target.dataset){
        let filtername = event.target.dataset.filtername;
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: filtername
            }
        });
    }
}

UPDATE

As OP requested, he needs a way to dynamically changing filter based on the button. This cannot happen in standard list view, hence here is a small code snippet for creation custom list view and passing dynamic where clause to backend.

NOTE : This is not prod ready code and may be subject to SOQL Injection. Please modify it accordingly.

YOu can create a Component (LWC) and wrap it around Aura to make it URL addressable.

LWC:

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="Id"
                data={accounts}
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

import {LightningElement, wire} from 'lwc';
import fetchAccounts from '@salesforce/apex/HelloWorld.fetchAccounts';
import { CurrentPageReference } from 'lightning/navigation';

const columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' }
];

export default class Dynamiclistview extends LightningElement {

    accounts;
    columns = columns;
    error;
    currentPageReference = null;
    urlStateParameters = null;
    whereClause = null;

    @wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
        if (currentPageReference) {
            this.urlStateParameters = currentPageReference.state;
            this.setParametersBasedOnUrl();
        }
    }

    setParametersBasedOnUrl() {
        this.whereClause = this.urlStateParameters.c__Active || null;
    }

    @wire(fetchAccounts, { whereClause: '$whereClause' })
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    }

}

<targets>
    <target>lightning__AppPage</target>
</targets>

Aura:

<aura:component description="dynamiclistviewaura" implements="lightning:isUrlAddressable">
    <c:dynamiclistview />
</aura:component>

Now from your original LWC component where the button is present, you can open this DynamicListView Component by passing dynamic where clause.

handleListViewNavigation(event) {
    if (event.target.dataset) {
        let filtername = event.target.dataset.filtername;
        const whereClause = "'Yes'"
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__dynamiclistviewaura'
            },
            state: {
                c__Active: whereClause
            }
        });
    }
}

Here in above example I have queried for all Active accounts. Like this you can pass status dynamically and query records based on Status.

4
  • the code you showed assumes that there is a filtered list already available. What I have is one list view but the Status is not applied. When clicking the button it should pass the filter parameter Status="Open" for example and apply to that list view. I dont want to create 10 different list views. Jul 9, 2022 at 4:56
  • The filter criteria in standard list view cannot be dynamic. You need to go full custom. As in your list view should be a custom datatable. Which can fetch data based on your URL params. Standard list view cant support it. Jul 9, 2022 at 5:07
  • I added some example , please have a look at UPDATE 2. Jul 9, 2022 at 6:50
  • Thank you @nagendra singh Jul 9, 2022 at 18:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .