The Search functionality within an SAP Design Studio dashboard is extremely useful. This becomes particularly significant where the dashboard is quite heavy & loaded with components, displaying lot of data. With the introduction of arrays, it has become quite simple & easy to do implement the Search functionality in SAP Design Studio.
Here’s how you implement a ‘Search’ inside SAP Design Studio!
Note: For the sake of simplicity, let us look at how to search in one field alone (Countries, in this case). You can extend it to other fields & components as well, depending on your requirement.
We can search using partial or whole text depending on the user’s input into the ‘Input Field’ component. To clear the search bar, we can also include a button (hidden by default). Our aim is to search for the string entered by the user and to shortlist those entries on the crosstab. If the string is not found, we will display an alert accordingly.
Writing the function
We need to compare the search string entered by the user, with the list of members, and filter on the matching member(s) found on the list. The script to do this is implemented within the “onChange()” event of the Input Field component (INPUTFIELD_SEARCH):
//Initializing a variable to get the input supplied by the user
var Search_Value = INPUTFIELD_SEARCH.getValue();
//Initializing an empty string variable to append searched members from the list and filter
var FilterList = "";
//Getting the list of regions being displayed on the crosstab
var MemberList = DS_REGION.getMembers("ZREGION", 200);
//Iterating the list to identify the list of possible matches
MemberList.forEach(function(element, index) {
if(Convert.indexOf(element.text, Search_Value) != -1)
{
//Appends the key of the element if it matches the user's search string
FilterList = FilterList + element.externalKey + ";";
}
});
//Sets the filter on the Data Source so users can only see results matching the search string
DS_REGION.setFilterExt("ZREGION", FilterList);
if(DS_REGION.getFilterText("ZREGION") == "")
{
//Alerts the users if the search string has not been found
APPLICATION.alert("'" + Search_Value +"' is not found! \nPlease check your search string! (It is case sensitive)");
}
else
{
//Enables the 'clear' button incase the users want to clear the searched value
BUTTON_CLEAR.setVisible(true);
}
Now that we have our logic in place, we will also implement the logic to clear the search within the “onClick()” event of the “clear” button (BUTTON_CLEAR):
//Clear the filter set on the Data Source and hide the button
if(DS_REGION.getFilterText("ZREGION") != "")
{
DS_REGION.clearFilter("ZREGION");
INPUTFIELD_SEARCH.setValue("");
BUTTON_CLEAR.setVisible(false);
}
Remember to set the visibility property of BUTTON_CLEAR to “false” during design time to ensure that the button is hidden by default!
Testing the application, we should be able to observe how it works:
Initial Set-Up |
On Searching |
An alert is displayed if the search item is not found:
One thing to note, however, is that search strings will be case sensitive when using this technique – SAP Design Studio does not have any built-in functions to convert strings to upper or lower case. For the most part, this should cover this functionality for now. I’m still looking at ways to enhance this, so watch out for more on this space!