Blogs / SAP / SAP BusinessObjects / SAP Design Studio / Tips and Tricks / SAP Design Studio Tips & Tricks #6: Search Functionality in a Dashboard

SAP Design Studio Tips & Tricks #6: Search Functionality in a Dashboard

Nov 13, 2014


Search functionality within a dashboard is really nice to have. This is especially helpful if it is a heavy dashboard, loaded with components, displaying lots of data. The introduction of arrays in version 1.3 has made it easy to do that.

Here’s how you implement a ‘Search’ in SAP Design Studio.

SAP Design Studio Tips & Tricks #6: Search Functionality in a Dashboard
Basic Setup

To keep things simple, I have only shown search for text in one column of a crosstab. This idea can be extended to the other columns of the crosstab and to other components on the dashboard, as required. The crosstab here lists different regions. We need to search for the partial or whole text depending on the user’s input inside the Input Field component. We’ll also be including a button (hidden by default) for users to clear their search bar. 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 matching members from the list and set 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)”);
//Enables the ‘clear’ button incase the users want to clear the searched value

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”) != “”)

Remember to set the visibility property of BUTTON_CLEAR to “false” during design time to ensure that the button is hidden by default.

The code in action !

SAP Design Studio Tips & Tricks #6: Search Functionality in a Dashboard
At startup (default view)
SAP Design Studio Tips & Tricks #6: Search Functionality in a Dashboard
When searching for an item on the list

An alert is displayed if the search item is not found.

SAP Design Studio Tips & Tricks #6: Search Functionality in a Dashboard
Displaying an alert when the string 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!

Read more blogs on SAP BusinessObjects Design Studio category here.

Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This Blog!

Share this blog with your friends and colleagues!