Skip to Content
Author's profile photo Eshwar Prasanna

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

It is really convenient to have search functionality within an SAP Design Studio dashboard. This becomes particularly significant when the dashboard is loaded with components or displays a lot of data. With the introduction of arrays in version 1.3, it has become quite easy to implement this functionality.

Here’s how you implement a ‘Search’ inside SAP Design Studio !

1-Basic-Setup.png

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:

2-on-Startup.png

Initial Set-Up

3-on-Searching.png

On Searching

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


4-Not-Found.png

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!




Source: http://visualbi.com/blogs/design-studio/search-functionality-in-sap-design-studio/

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Howles
      Michael Howles

      APPLICATION.alert won't work outside of local Design Studio client.

      Author's profile photo Eshwar Prasanna
      Eshwar Prasanna
      Blog Post Author

      Hi Michael,

      You're right. But users can also modify the code accordingly - say, use a text component or a separate panel/pop-up container to display the alert according to their requirements. This is just a prototype of sorts.

      Thanks and Regards,

      Eshwar Prasanna

      Author's profile photo Former Member
      Former Member

      Hi Eshwar,

      Great post. Thank you!

      Best regards,

      Alfred

      Author's profile photo Former Member
      Former Member

      Hi,

      I wrote a small uppercase function:

      Re: How to convert into Uppercase entries in Filter Panel Search

      Regards,

      Bogdan

      Author's profile photo Mohd Fahad
      Mohd Fahad

      Hi Eshwar,

      thanks for the great post!!

      I noticed something if the the result output for SEARCH is Crosstab, it works smooth, like the way it is expected.

      BUT

      If it is ListBox then it do not trigger/refresh the list(perhaps cache issue), until you add last piece of code "DS_LoadDataSource(); this trigger then list with updated search result with your code.

      Thanks

      -Fahad

      Author's profile photo Andreea-Gabriela Zota
      Andreea-Gabriela Zota

      Hi, I have a checkbox group that should be affected by this search, but nothing happens in the checkbox. DO you have any idea how could I do this?

       

      Thanks,

      Andreea

      Author's profile photo Former Member
      Former Member

      Thanks ! That's a nice feature !

      Author's profile photo Former Member
      Former Member

      so which var we need to put in Search bar input field and which variable we need to put in the result box ?

      Could you please let us segregate the var as per the search bar and result box

      Author's profile photo jyothi prema
      jyothi prema

      How can I please know whether I can achieve search functionality for multiple components in a page i.e. for whole page? Each DS might have many number of dimensions.