Using query string parameters for filtering

Query string parameters are a powerful way to pass information between pages or filter data dynamically based on user input in Power Pages (formerly known as PowerApps Portals). By appending query string parameters to a URL, you can control the content displayed on a page or within a form, providing users with a personalized experience.

Here’s a detailed guide on how to use query string parameters for filtering in Power Pages:

---

Step 1: Understanding Query String Parameters

A query string is part of a URL that contains data in the form of key-value pairs. For example, in the URL:

https://www.example.com/products?category=electronics&price=low

• category=electronics and price=low are query string parameters.
• Key: category, price
• Value: electronics, low

These parameters are passed along with the URL to provide filtering options or other dynamic content.

---

Step 2: Setting Up a Power Pages Page for Query String Parameters

Power Pages allows you to use Liquid Templates and JavaScript to access and process query string parameters. To filter data dynamically based on the parameters in the URL, follow these steps:

1. Create or edit a page in Power Pages where you want to apply the filtering logic.
2. Add a Liquid Template or use JavaScript to read the query string and filter the data.

---

Step 3: Using Liquid Templates to Access Query String Parameters

In Power Pages, Liquid is the templating language used to access query string parameters. You can use the request object to capture the query string and filter the content accordingly.

Example: Accessing a Query String Parameter Using Liquid

To capture a query string parameter, use the following Liquid code in the page or template:

{% assign category = request.params.category %}
{% assign price = request.params.price %}

<p>Category: {{ category }}</p>
<p>Price: {{ price }}</p>

In this example:

• The request.params.category will fetch the value of category from the query string.
• Similarly, request.params.price will fetch the value of price.

Example URL:

https://www.example.com/products?category=electronics&price=low

This would display:

Category: electronics
Price: low

---

Step 4: Filtering Data Based on Query String Parameters

Once you capture the query string parameters, you can use them to filter data from a list or entity in Power Pages.

For instance, if you want to filter product data based on the category and price parameters, you would:

Example: Filtering a Product List Based on Query String Parameters

Let’s say you have a list of products in Power Pages, and you want to filter this list based on the category and price passed in the query string.

{% assign category = request.params.category %}
{% assign price = request.params.price %}

<ul>
  {% for product in site.products %}
    {% if category == product.category and price == product.price %}
      <li>
        <a href="{{ product.url }}">{{ product.name }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

Explanation:

• site.products: This is a collection of product records available in your portal.
• product.category and product.price: These are the fields associated with each product.
• Conditional Check: The products are filtered to only show those that match the category and price parameters from the query string.

---

Step 5: Handling Multiple Filters

If you have multiple filters (e.g., category, price, brand), you can check multiple query string parameters and apply more complex filtering logic.

Example: Filtering with Multiple Parameters

{% assign category = request.params.category %}
{% assign price = request.params.price %}
{% assign brand = request.params.brand %}

<ul>
  {% for product in site.products %}
    {% if category == product.category and price == product.price and brand == product.brand %}
      <li>
        <a href="{{ product.url }}">{{ product.name }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

Explanation:

• category, price, and brand: Multiple query string parameters are used to filter products based on these attributes.
• The filtering logic ensures that only products that match all selected filters are displayed.

---

Step 6: Redirecting Users Based on Query String Parameters (Optional)

You can also use query string parameters to redirect users to different pages based on the parameters they select. For example, you could redirect a user to a different page if a specific filter is selected.

Example: Redirecting Based on Query String Parameter

{% assign category = request.params.category %}
{% if category == "electronics" %}
  {% assign redirect_url = "/electronics" %}
  <meta http-equiv="refresh" content="0; url={{ redirect_url }}">
{% endif %}

Explanation:

• category == "electronics": If the category parameter is electronics, the user is redirected to the /electronics page.
• meta tag: The <meta> tag is used for page redirection, which immediately redirects the user to the specified URL.

---

Step 7: Using JavaScript for Advanced Query String Handling (Optional)

Sometimes, you may need to use JavaScript to handle query string parameters, especially for more dynamic filtering or to manipulate the URL.

Example: JavaScript for Query String Parameter Filtering

// Get query string parameters
const urlParams = new URLSearchParams(window.location.search);
const category = urlParams.get('category');
const price = urlParams.get('price');

// Filter the content based on parameters
if (category && price) {
  document.querySelectorAll('.product').forEach(function(product) {
    const productCategory = product.getAttribute('data-category');
    const productPrice = product.getAttribute('data-price');
    
    if (productCategory === category && productPrice === price) {
      product.style.display = 'block';
    } else {
      product.style.display = 'none';
    }
  });
}

Explanation:

• URLSearchParams(window.location.search): This JavaScript function parses the query string and allows you to get parameters such as category and price.
• product.style.display: Based on the filter, it shows or hides specific products using their data attributes.

---

Step 8: Testing and Troubleshooting

• Test the URL: Make sure the query string parameters are correctly passed to the page.
• Check Filtering Logic: Ensure that the filtering logic works correctly with different query string values.
• Debug JavaScript: If using JavaScript, use browser developer tools to check for any errors and debug your code.