Skip to Content

Design Studio Innovation Series – Topic 11: Implementing Double-click Functionality

Design Studio currently supports only single-click events (“On Click” and “On Select”) but an often asked question is how can we implement double-click?  This post has been inspired by the scenario discussed in Geomap of SAP Design Studio which asks this question.  Here I will describe a more generic approach, based on the Timer component, that can be tailored to your needs.


The steps to be carried out are as follows:

1.  Create a Global Script Variable of type int named clickCount with a default value of 0 (zero);

2.  Add a Text component to the application;

3.  Create a Global Script Function named processDoubleClick().  This should include the desired code for your double-click processing.  For the purposes of this example we simply include:


4.  Create a Global Script Function named processSingleClick().  This should include the desired code for your standard click processing.  For the purposes of this example we simply include:

TEXT_1.setText("Single Click");

5.  Add a Timer component to your application with the following settings:

(i)  Interval in Milliseconds property equal to 500.  You can experiment with values from 100 to 900 to apply your ideal click speed;

(ii)  Script code in the “On Timer” event:


if (clickCount == 1) {
} else 

if (clickCount == 2 ){

clickCount = 0;

The “On Timer” event is triggered when the time interval specified for the Interval in Milliseconds property has elapsed.  Therefore, at this point we stop the Timer to check how many clicks occurred during the time interval (in this example 500 milliseconds) and call the appropriate global script function to process accordingly, after which the click counter is reset.

6.  Add an Icon component to the application.  This serves as the trigger for click events.  You can use any component with an “On Click” or “On Select” event, as relevant to your needs.  In this example we include the following code in the “On Click” event of the Icon component:

if (TIMER_1.isRunning()) {
	clickCount = 2;
} else {
	clickCount = 1;

The logic behind the above code is that if the Timer is already running when an “On Click” event is triggered then this means that a single click must have already occurred, so this is the second click.  If on the other hand the Timer is not running when the “On Click” event is triggered, this implies that this is the first click, so we start the Timer in order to check if any subsequent click falls within the time interval to be classified as a double-click (in this example 500 milliseconds).


The completed application looks like this:



Blog Series Index:  Design Studio Innovation Series – Welcome

You must be Logged on to comment or reply to a post.
  • Interesting way to simulate a double-click.  🙂  My only concern would be when server latency is a factor, as each BIAL statement is technically a round-trip.  A shame we cannot do this purely client-side...  Maybe an SDK component is in order 🙂

    • Yes, I guess it could be considered a creative approach ?  You make a valid point about server latency but I guess that would also apply to any script sequence.


      An SDK component could certainly be a good exploration exercise.  I’d be interested to see how a double-click event could be attached to a standard component via the SDK ?

      • I was more thinking just a visible SDK component that itself accepted double-clicks, rather than monkeying with the DOM of a different component.  Should be a rather simple one to write.  Maybe in the airport Monday 🙂

  • Hi Mustafa,

    It's interesting the way you described to achieve double click. But here Single click is always pre-requisite for a double click. What in case if i want to achieve double click functionality without the selection of cell/row or a single click on it.

    Yes, i agree with you with SDK to support double click for standard crosstab is required instead of a new table or crosstab in SDK.




    • Hi Chandra,

      This is one approach for implementing double-click functionality.  Based on the current BIAL scripting API, a double click can only be detected as a series of single clicks within a specified time, hence the use of the Timer component.

      What in case if i want to achieve double click functionality without the selection of cell/row or a single click on it.

      You might be able to achieve this visually via CSS by disabling the selection highlight on the Crosstab.