Auto-generated Content Data-Filter Attribute

data-filter

If records in an array have fields that differentiate products with different criteria, data-filter allows you to display only records that meet your criteria.

Example Use Cases:

  • A table should only include one-time fee products (Product Family = Setup Fee)
  • A table of food items should only include fruits (Product Family = Fruit)
  • A table should only include items whose prices are greater than $1,000 (UnitPrice > 1000)Syntax: data-filter="field_name LIKE 'value'"value: a user-defined value that you use to set up your filter criteria

data-filter is almost always used with a data-source. Here is example HTML in context with data-source:

<table data-source="OpportunityLineItems" data-filter="field_name LIKE 'value'">

This will set up a table that only includes OpportunityLineItems records with a field_namevalue of 'value'.

*Note: data-filter can be used on most HTML elements that include a data-source, but it is important to note that within a standard auto-generated table, data-filter will not work on the <thead>, <tbody>, or <tfoot> elements. It can be used on the <tr>element within those parent elements, but not on those three elements themselves.

Consider this example, where we can see how the table output changes when data-filter is used to only display products with the family of Fruit.

Output:

Without data-filter:

Product NameProduct FamilyTotal Price
AppleFruit1.0
CarrotVegetable2.0
PearFruit3.0


With data-filter:

Product NameProduct FamilyTotal Price
AppleFruit1.0
PearFruit3.0


HTML:

<table data-source="OpportunityLineItems" data-filter="PricebookEntry.Product2.Family LIKE 'Fruit'"> <thead> <tr> <th>Product Name</th> <th>Product Family</th> <th>Total Price</th> </tr> </thead> <tbody> <tr> <td>[PricebookEntry.Product2.Name]</td> <td>[PricebookEntry.Product2.Family]</td> <td>[TotalPrice]</td> </tr> </tbody></table>