Building portal search functionality

Building a search functionality in Power Pages (formerly Power Apps Portals) allows users to easily find specific content within a portal. By leveraging Dataverse, Liquid templates, and JavaScript, you can build powerful search capabilities tailored to your portal’s needs.

This guide will walk you through the process of setting up a basic search functionality, refining it to be more dynamic, and optimizing for different use cases, including search on entities, filtering, and displaying results efficiently.

Why Implement a Search Function in Power Pages?

Adding a search feature to your Power Pages portal provides several benefits:

Enhanced user experience: Users can quickly find relevant content, improving overall usability.
Improved productivity: Searching allows users to access large datasets, such as articles, products, or service records, in an organized manner.
Customization: You can tailor the search results to suit your portal’s purpose and the types of data you’re displaying.

🧩 Key Concepts for Building Search Functionality

To build an efficient search, we need to understand the following components:

Dataverse: Power Pages is tightly integrated with Dataverse, which serves as the backend database. You’ll likely be pulling data from Dataverse tables to show in search results.
Liquid Templates: Liquid is a templating language that can help you filter, query, and display data dynamically based on user input.
JavaScript: JavaScript can be used to handle real-time user interaction with the search box, dynamically filtering results and providing a better user experience.
Web Search Index: Power Pages can leverage the search index built for Dataverse, which helps in querying and displaying search results efficiently.

Step 1: Plan the Search Scope

Before you start building the search, define what entities or data you want users to search through. This could be:

Articles (e.g., Knowledge Base)
Products
Service Requests
Customer Data

For instance, if you want users to search through a table of articles, ensure that you’ve published the data to Dataverse and have the necessary fields indexed for search.

Step 2: Create a Search Box

Start by adding a basic search box to your Power Pages portal. This will serve as the entry point for the search functionality.

Steps:

Navigate to your Portal → Go to the Web Page where you want the search bar.
Add a Text Input Field:
- In the Form or Web Page editor, add an input box that allows users to type their query.
- Add a Search Button next to the input field.

<form id="searchForm">
  <input type="text" id="searchQuery" name="searchQuery" placeholder="Search..." />
  <button type="button" id="searchButton">Search</button>
</form>

The searchQuery field will capture user input.
The searchButton triggers the search process.

Step 3: Implement the Search Logic with JavaScript

Once the search box is in place, use JavaScript to handle the user’s input and display search results dynamically.

Basic JavaScript Search Logic

Here’s a simple example where we filter a set of records based on user input. This can be customized to work with real data pulled from Dataverse:

document.getElementById("searchButton").addEventListener("click", function () {
    var searchQuery = document.getElementById("searchQuery").value.toLowerCase();
    
    // Example data (replace with dynamic data from Dataverse)
    var records = [
        { name: "Power BI Tutorial", description: "Learn how to create Power BI reports." },
        { name: "JavaScript Guide", description: "A comprehensive guide to JavaScript." },
        { name: "Power Pages Features", description: "Explore the features of Power Pages." }
    ];

    // Filter records based on the search query
    var filteredResults = records.filter(function (record) {
        return record.name.toLowerCase().includes(searchQuery) || record.description.toLowerCase().includes(searchQuery);
    });

    // Display results
    var resultsContainer = document.getElementById("searchResults");
    resultsContainer.innerHTML = ""; // Clear previous results

    filteredResults.forEach(function (result) {
        var resultElement = document.createElement("div");
        resultElement.className = "search-result";
        resultElement.innerHTML = "<h3>" + result.name + "</h3><p>" + result.description + "</p>";
        resultsContainer.appendChild(resultElement);
    });
});

Key Components:

User Input: Captured by the searchQuery input field.
Search Logic: Using JavaScript, we filter the records based on the search query.
Displaying Results: The results are dynamically displayed below the search box using appendChild() to create new elements.

Step 4: Querying Dataverse for Search Results

Instead of using static data, you’ll likely want to query real records from Dataverse. You can use Liquid to query records and dynamically filter them based on the search query.

Liquid Example: Querying Dataverse Records

{% assign searchQuery = request.query['searchQuery'] | downcase %}
{% assign results = entities['articles'] | where: 'title', searchQuery %}

<div id="searchResults">
  {% for result in results %}
    <div class="search-result">
      <h3>{{ result.title }}</h3>
      <p>{{ result.summary }}</p>
    </div>
  {% else %}
    <p>No results found.</p>
  {% endfor %}
</div>

In this example:

We are searching the articles entity for records where the title matches the search query.
If no results are found, a default message is displayed.

Step 5: Enhance with Advanced Features

1. Fuzzy Search:

Power Pages allows for fuzzy search capabilities when querying Dataverse. This ensures that users get relevant results even if their query contains minor typos.

2. Refinement Filters:

After search results are displayed, you can offer users additional refinement filters. For example, after searching for “Power Pages,” users can filter the results by date, category, or tags.

<div id="filters">
  <label for="category">Category:</label>
  <select id="categoryFilter">
    <option value="All">All</option>
    <option value="Tutorials">Tutorials</option>
    <option value="Documentation">Documentation</option>
  </select>
</div>

Add logic to filter results further based on the selected category.

3. Search Autocomplete:

You can implement autocomplete for the search query field, providing suggestions to the user as they type.

Step 6: Styling and UX Enhancements

To improve the appearance and usability of the search:

Style the search results: Use CSS to give each search result a clean layout and make it easy for users to scan.

.search-result {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
.search-result h3 {
  font-size: 18px;
  color: #333;
}
.search-result p {
  color: #666;
}

Pagination: For large datasets, consider adding pagination to the results to prevent overwhelming the user.