In digital platforms, delivering an optimal search experience is essential. Accentuating searched terms within the results is an effective way to enhance user experience by making it easier for users to find the precise information they need. This guide will explore the steps to highlight search keywords within a gallery control in Canvas apps.
Improving Search Screens
Highlighting the specific terms that users have inputted in search results can improve clarity significantly. By creating a specialized HTML markup, we can emphasize these terms, making them stand out amidst other information.
Practical Application
For example, imagine users searching within a table named ‘Issue Details.’ A text input control named “SearchBoxInput” within an app’s search screen allows users to input search criteria.
Search results appear in a gallery control. We structure the relevant formula within the gallery control’s Items property as:
Search([@'Issue Records'],
SearchBoxInput.Text,
"issue_description"
)Highlighting the Search Keywords
To make the searched terms stand out, replace the label within the gallery control’s item template with an “HTML text” control. Set the following formula for the HTMLText property:
Substitute(ThisItem.IssueDetail,
SearchBoxInput.Text,
"" & SearchBoxInput.Text & ""
)With this change, every occurrence of the searched term within the results gets enclosed within a font tag and renders in blue, clearly highlighting it.
Alternatively, for a different visual appeal, you can enclose the search terms within a span tag, applying a background color using inline CSS:
Substitute(ThisItem.IssueDetail,
SearchBoxInput.Text,
"" & SearchBoxInput.Text & ""
)Reference: Substitute functions
Implementing the “Highlight Keywords Gallery Search” feature can transform the way users interact with search results in Canvas apps. By visually distinguishing searched terms, this functionality caters to efficient data retrieval and improved platform navigation. The substitution formula utilized in the app’s gallery control ensures that users can swiftly spot their search terms, highlighted with HTML markup, thus optimizing the overall search experience.
Conclusion
Integrating keyword highlighting within search results is a pivotal enhancement in user experience. By leveraging HTML markup within Canvas apps, you can ensure that matching search terms are accentuated, ensuring users locate the information they seek quickly. If you’re aiming for advanced customizations or face challenges in implementation, don’t hesitate to contact us. Our expert team is always here to guide and assist you.
