Using tag/category filters – Rishan Solutions

Adding tag or category-based filters to your Power Pages listings (such as articles, events, products, etc.) enables users to refine results easily. This feature boosts usability and navigation, especially in content-rich portals.

Step-by-Step Guide to Implementing Tag/Category Filters

Scenario Example

You have a list of Knowledge Articles, and each article has a related Category (a lookup to another table or a choice field). Users should be able to filter articles based on category tags.

Step 1: Set Up the Data Model in Dataverse

Option A: Lookup Field (Recommended for relational filtering)

Table: Knowledge Article
Field: Category (lookup to Article Category table)

Option B: Choice Field

Field: Tags (choice set like Technical, Policy, Billing)

Make sure these fields are enabled in table permissions for read access.

Step 2: Add Tag/Category Filter UI

<select id="categoryFilter">
  <option value="">-- Filter by Category --</option>
  <option value="technical">Technical</option>
  <option value="policy">Policy</option>
  <option value="billing">Billing</option>
</select>

Optionally, you can make this dynamic by fetching categories from Dataverse using a Web Template or Liquid.

Step 3: Pass Filter as a Query Parameter

Add JavaScript to reload the page with the selected filter:

<script>
document.getElementById('categoryFilter').addEventListener('change', function () {
  const selected = this.value;
  const url = new URL(window.location.href);
  if (selected) {
    url.searchParams.set('category', selected);
  } else {
    url.searchParams.delete('category');
  }
  window.location.href = url.toString();
});
</script>

Step 4: Use Liquid to Apply Filtering

Capture the query parameter:

{% assign selectedCategory = request.params['category'] | escape %}

Now filter your FetchXML based on the selected category:

{% fetchxml articleResults %}
<fetch>
  <entity name="knowledgearticle">
    <attribute name="title" />
    <attribute name="article_category" />
    {% if selectedCategory != empty %}
    <filter>
      <condition attribute="article_category" operator="eq" value="{{ selectedCategory }}" />
    </filter>
    {% endif %}
  </entity>
</fetch>
{% endfetchxml %}

If you’re using a choice field instead of a lookup, adjust the attribute and value accordingly.

Step 5: Display the Filtered Results

<ul>
  {% for item in articleResults.results.entities %}
    <li>{{ item.title }}</li>
  {% else %}
    <li>No articles found under this category.</li>
  {% endfor %}
</ul>

Optional Enhancements

Multiple Tag Filters: Use checkboxes instead of a dropdown and filter on multiple values.
AJAX Filtering: Use JavaScript to fetch and render results without page reload.
Clear Filter Button: Add a button to reset and reload the unfiltered list.

Use Cases

Knowledgebase filtered by category (e.g., Technical, Legal, Billing)
Product catalog by brand or type
Events filtered by date, type, or location
Blog posts by tags or authors

Best Practices

Keep the tag list short and meaningful
For hierarchical categories, consider cascading filters
Combine with keyword search for powerful filtering