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:

TEXT_1.setText("Double-click");

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:

me.stop();

if (clickCount == 1) {
	GLOBAL_SCRIPTS_CLICK_PROCESSING.processSingleClick();
	
} else 

if (clickCount == 2 ){
	
GLOBAL_SCRIPTS_CLICK_PROCESSING.processDoubleClick();
	
}

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;
	TIMER_1.start();
	
}

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