Filtering multiple views (from related tables via lookup) on the same Power Pages page with a single input field requires JavaScript to apply the filter dynamically across both lists, as native Lookup Set filters are per-list and don't cross-filter out-of-the-box. This uses the `adx_fetchAll` or Web API to refresh views on input change, leveraging the lookup relationship (e.g., Table1.LookupField = Table2.Id). Here's a concise setup:
Step-by-Step Implementation
1. Configure Views:
- In Power Pages Studio > Your page > Add two lists (List1 for Table1, List2 for Table2).
- For each list > Advanced options > Filter Type: None (for JS control); set Web Template to default if needed.
- Ensure lookup column (e.g., Table1.ParentId) links to Table2.
2. Add Single Filter Input:
- Add Text Input (e.g., ID: "filterInput") or Dropdown (for lookup values) above the lists.
- Label: "Filter by [Common Field]" (e.g., Name or Category).
3.
JavaScript for Cross-Filtering** (Add to Page Web Template or Custom JS):
$(document).ready(function() {
var $input = $("#filterInput"); // Your input ID
var list1Selector = ".list1-selector"; // e.g., #table1-list or class
var list2Selector = ".list2-selector"; // e.g., #table2-list
$input.on("change keyup", debounce(function() {
var filterValue = $input.val().toLowerCase(); // Or parse for dropdown
// Filter List1 (Table1, filtered by lookup to Table2)
if (filterValue) {
// Use FetchXML via adx_fetch (for related filter)
var fetchXml = `
<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>
<entity name='table1'>
<attribute name='name' />
<filter type='and'>
<condition attribute='parentid' operator='like' value='%${filterValue}%' /> <!-- Lookup column -->
</filter>
<link-entity name='table2' from='table2id' to='parentid' alias='pt'>
<filter type='and'>
<condition attribute='commonfield' operator='like' value='%${filterValue}%' /> <!-- Table2 filter field -->
</filter>
</link-entity>
</entity>
</fetch>`;
// Apply to List1
$(list1Selector).attr("data-fetchxml", fetchXml).trigger("fetch");
// Similar for List2 (direct filter)
var fetchXml2 = `<fetch><entity name='table2'><filter><condition attribute='commonfield' operator='like' value='%${filterValue}%' /></filter></entity></fetch>`;
$(list2Selector).attr("data-fetchxml", fetchXml2).trigger("fetch");
} else {
// Clear filter (default view)
$(list1Selector).removeAttr("data-fetchxml").trigger("fetch");
$(list2Selector).removeAttr("data-fetchxml").trigger("fetch");
}
}, 500)); // Debounce for performance
function debounce(func, wait) {
var timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(func, wait);
};
}
});
- Replace selectors/FetchXML entities/attributes with yours (e.g., table1 = Accounts, table2 = Contacts, lookup = Primary Contact).
- For dropdown: Use `<select id="filterDropdown">` populated via Web API query on Table2.
4. Test and Optimize:
- Publish page > Test input change—views refresh with filtered related data (e.g., filter Contacts by name, shows linked Accounts).
- Performance: Limit results (add <fetch top="50">); use server-side paging if >100 rows.
- Edge: Handle no matches (show message via JS); secure with portal context (no direct DB access).
This cross-filters via the lookup relationship—views update in ~1s. For complex logic, use a Power Automate flow triggered by input (Web API POST) to return filtered data. If helpful, accept the answer.
Best Regards,
Jerald Felix
