Quick Search in UI by using Custom UI Component
Author:
Valery Kornilovich
Changed on:
5 July 2024
Key Points
- Quick Search Functionality: Enables users to find information rapidly by typing keywords or phrases.
- User Efficiency: Quick search is designed to save time and streamline workflows.
- Learning Curve: New users can quickly become proficient in finding the information they need due to the intuitive nature of quick search.
- Integration: These features should seamlessly integrate with the user interface for maximum effectiveness.
Prerequisites
Steps
Overview
Quick search allows the use of a specific component to make a quick search through the data on the page (usually in a list component). It is designed to be “as few clicks as possible” to navigate throughout the data and open the single page with the information you are looking for (order/customer/etc.).
Use case
As a customer service representative (or store assistant) I’d like to have the ability to jump into the information page using as few clicks as possible, when on the phone with the customer. When we are talking about specific orders, or I’m trying to find the customer page.
Solution Approach
The Quick Search bar is an essential tool that allows users to efficiently locate information by entering relevant keywords or phrases. This functionality is not only a time-saver but also significantly enhances user experience. The approach to implementing a Quick Search feature involves several key considerations:
- User Efficiency: The search bar must provide instant results as the user types, ensuring that the search process is fast and does not interrupt their workflow.
- Learning Curve: It should have an intuitive design so that even new users can utilize it effectively without extensive training.
- Integration: The Quick Search should be seamlessly integrated into the user interface, making it easily accessible at all times without cluttering the screen.
By focusing on these core aspects, the Quick Search bar will serve as a powerful tool for users to swiftly find the necessary information, contributing to a more productive and user-friendly environment.
UI Component
1ComponentRegistry.register(['fc.se.quick.search'], QuickSearch, {
2 category: 'content',
3});Language: typescript
Name: Component Registration
Description:
Example of registration of component
Properties
Name | Type | Required | Default | Description |
label | string | yes |
| Label for the component. Will be run through the TemplateRender, so you can add dynamic variables or other renders here. |
linkTemplate | string | no | undefined | Template for the link to be used when the user presses “Enter” if there is only one entry. |
data | any | no | undefined | Data to be used in searching through. In the manifest, you should use dataSource as a string value to provide the converted data object later on. |
variable | string | yes |
| The variable that is used to filter the current data source on the page. You can use it as a variable of GraphQL query or as a synthetic variable, that is automatically generated when the page engine executes the query (for example orders_ref, where a query is named orders and there is a field inside called ref). |
autoFocus | boolean | no | true | Flag for autofocusing the component. |
responsiveness | ResponsiveCardWidth | no | | Responsiveness constraint for the component. |
predefinedFilters | MystiqueComponentInstance[] | no |
| An array of MystiqueComponents will be added to a menu of “Predefined Filters”. Can be any component, but usually use |
Manifest changes
1{
2 component: 'fc.se.quick.search',
3 props: {
4 linkTemplate:
5 '#/orders/{{node.id}}/{{node.retailer.id}}/{{node.ref}}',
6 dataSource: 'orders',
7 variable: 'orders_ref',
8 label: 'Order Ref'
9 },
10}Language: typescript
Name: Example of component usage
Description:
Example of component usage
Result
Component after loading the page
Multiply quick search component on one page
Filtering data list
