How to add a search bar with suggestions in SAP Build Apps

[botazhat]

Hello community,

In this blog, I’ll show you how to add a search bar with suggestions to your SAP Build Apps application.

Scenario Overview

Imagine you have an app where you need to search through a list of manufacturers containing over 40,000 entities. Efficiently navigating such a large dataset can be challenging. You want to search using a search bar while also being able to manually browse the list.

Step 1: Creating the Search Component and a Data Variable for the Manufacturers List

Start by creating a component that serves as your search bar, along with a button to open the full list of manufacturers. Here’s how to do it:

1. Input Field & Icon: Add a simple input field for the search. Next, add an icon (I used journey-arrive from the Fiori icon set) and position it on the right side of the input field. This icon will function as a button to open the complete list of manufacturers.
2. Data Variable: Create a data variable linked to the data source to retrieve the list of manufacturers.
3. Text Element: Add a text element that repeats for each manufacturer in your list, stored in a data variable. This list is visible only if your search variable is not empty and the current repeated element does not match the search variable.
   Visibility Formula:

!IS_EMPTY(appVars.selected_manufacturer) && appVars.selected_manufacturer != repeated.current.manufacturerName

Note: Here, selected_manufacturer is stored as an app variable because it's needed outside of this page. However, if it's only required on this page, you can use a page variable instead.

Step 2: Displaying the Manufacturer List

When you click on the search bar icon, it should navigate to a page displaying your manufacturer list. This list is fetched using pagination. If you need help with pagination, refer to this blog on handling OData pagination in SAP AppGyver.

Step 3: Implementing Search Functionality

The search process should be triggered when the variable tied to your custom component changes. You can use the following approach when retrieving your record collection from the backend:

1. Get record collection: Search with the formula, when a user enters a search term in the search bar, you want to filter the list of manufacturers based on this term. This is achieved through a formula:

{"type":"and","conditions":[{"type":"containsIgnoreCase","property":["manufacturerName"],"value":appVars.selected_manufacturer }]}

•   type: The filtering method. "containsIgnoreCase" means the search will be case-insensitive and will look for the term anywhere within the property’s value.
•   property: The field in your data to search within. "manufacturerName" should match the field name in your data variable where manufacturer names are stored.
•   value: This is the search term, taken from appVars.selected_manufacturer, which holds the user’s input from the search bar.

2. Set Data Variable: Slicing the results. After applying the search filter, limit the results to the first eight records:

SLICE(outputs["Get record collection"].records, 0,8)

Alternative Approaches

Here are some alternative methods and tools that can be used for implementing a search bar with suggestions in SAP Build Apps:

OData Search Capability

• Description: If your OData service supports a built-in search capability, you can leverage this feature directly without the need for complex filtering logic. For more details, refer to this blog: How to Filter Data in SAP Build Apps Using Record Collection.
• Advantages: This method simplifies the implementation process since the search is handled by the OData service itself.
• Limitations: Ensure that your OData service supports search operations. 

Search Bar with Suggestions (Video Tutorial)

• Description: This video tutorial provides a step-by-step guide on creating a search bar with suggestions in SAP Build Apps: Search bar with suggestions || SAP Build Apps.
• Advantages: It’s a practical guide for scenarios with a small amount of records.
• Limitations: This approach may not be suitable for large datasets as it only searches among the first few retrieved records.

Combo Box Component

• Description: The SAP Build Apps marketplace offers a ready-to-use Combo Box component that provides a dropdown with search capabilities.
• Advantages: It's a straightforward solution that doesn’t require additional pages or custom components.
• Limitations: This component might not be ideal if you need to search through very large datasets, as you would need to scroll through a drop-down.

Conclusion

Depending on your specific requirements, you can choose from several approaches to implement a search bar with suggestions in SAP Build Apps. For smaller datasets, you can refer to the video tutorial included in this blog. Alternatively, you can use a pre-built component for simpler implementations or build a custom component to handle larger datasets.

Now, go ahead and build something amazing!