Sorting search results by relevance is important for enhancing user experience, especially when users need to find the most pertinent information quickly. Relevance sorting can be applied in Power Pages to prioritize search results based on how closely they match user input.
Here’s how you can approach it:
Approach 1: Client-Side Sorting Using JavaScript
This approach is useful when you have all your data available on the page (e.g., pre-rendered by Liquid or fetched via an API) and want to sort it dynamically on the client side without refreshing the page.
Step 1: Display Data
Use Liquid to render the data in HTML.
<ul id="articleList">
{% fetchxml articles %}
<fetch>
<entity name="knowledgearticle">
<attribute name="title" />
<attribute name="description" />
</entity>
</fetch>
{% endfetchxml %}
{% for article in articles.results.entities %}
<li class="article-item" data-title="{{ article.title | downcase }}" data-description="{{ article.description | downcase }}">
<h4>{{ article.title }}</h4>
<p>{{ article.description }}</p>
</li>
{% endfor %}
</ul>
Step 2: Add Search Input for Filtering
<input type="text" id="searchInput" placeholder="Search articles...">
Step 3: Implement Sorting Logic in JavaScript
Use JavaScript to sort the results based on how well the search query matches the title or description. The closer the match, the higher the relevance score.
<script>
document.addEventListener("DOMContentLoaded", function () {
const searchInput = document.getElementById("searchInput");
const listContainer = document.getElementById("articleList");
searchInput.addEventListener("input", function () {
const query = this.value.trim().toLowerCase();
if (!query) return;
const articles = Array.from(listContainer.querySelectorAll(".article-item"));
// Score each article based on keyword match
const scored = articles.map(item => {
const title = item.dataset.title;
const desc = item.dataset.description;
let score = 0;
if (title.includes(query)) score += 2; // Higher weight for title match
if (desc.includes(query)) score += 1; // Lower weight for description match
return { item, score };
});
// Sort articles by relevance (highest score first)
scored.sort((a, b) => b.score - a.score);
// Reorder the list based on the sorted scores
listContainer.innerHTML = "";
scored.forEach(obj => {
listContainer.appendChild(obj.item);
});
});
});
</script>
This will dynamically filter and sort the list of articles based on the search query entered by the user.
Approach 2: Sorting Using FetchXML (Server-Side)
If you want to implement relevance sorting on the server side, for example using FetchXML in Power Pages or Dataverse, the options are more limited because FetchXML doesn’t support full-text ranking. However, you can still use sorting based on fields like title
or createdon
.
Here’s an example of how to filter and sort records based on a search query in FetchXML:
{% assign searchQuery = request.params['query'] | escape %}
{% fetchxml articles %}
<fetch>
<entity name="knowledgearticle">
<attribute name="title" />
<attribute name="description" />
<filter>
<condition attribute="title" operator="like" value="%{{ searchQuery }}%" />
<condition attribute="description" operator="like" value="%{{ searchQuery }}%" />
</filter>
<order attribute="createdon" descending="true" />
</entity>
</fetch>
{% endfetchxml %}
In this example:
- We filter articles by
title
anddescription
containing the search query. - We sort the results by the
createdon
field (you could add custom logic for more advanced sorting).
Approach 3: Using External Search Solutions
For larger datasets or more advanced relevance ranking, consider using Azure Cognitive Search or another external service for ranking and relevance scoring. These services provide more sophisticated full-text search capabilities, allowing you to rank results based on factors like:
- Term frequency
- Matching positions
- Synonyms
This approach is recommended when working with large sets of data or when needing more precision in relevance scoring.
Best Practices for Relevance Sorting:
- Use Multiple Fields: When calculating relevance, don’t just focus on the title. Also consider description, tags, and metadata fields.
- Assign Weights: Give higher relevance weight to more important fields (e.g., title matches vs. description matches).
- Real-time Sorting: Implement client-side sorting for a faster, more interactive user experience.
- Handling Large Datasets: If your dataset grows large, consider server-side sorting with external search services or Dataverse Search.