Creating a custom Spinner component in SAP Lumira Designer

Introduction:

In SAP Business Objects Dashboard(Xcelsius) there is a spinner component to increment or decrement the input value at runtime in the dashboard. But in Lumira Designer there is no such component to alter the input value. We have done a workaround to create a spinner composite in Lumira Designer and can be consumed in applications.

What’s the problem:

In this blog post we will see how to create an alternate component in Lumira Designer that works similar to spinner component in Xcelsius.

Solution:

Follow the below steps to increment or decrement the input value at run time.

Step 1: Create a spinner composite.

Step 2: In the spinner composite create the below basic components.

1. Input field
2. Icon 1 – media-rewind
3. Icon 2 – navigation-left-arrow
4. Icon 3 – navigation-right-arrow
5. Icon 4 – media-forward

It will look like the below image :

Step 3: Create two global variables: input_value(type as int) and output_value(type as int).

Step 4: Create a function ‘output ’ to set output value with return type ‘int’ and write the below code in script area :

return output_value ;

Step 5: Create an event ‘ValueEnteredinInputField’ to pass the value from composite to application.

Step 6: Write the below code in OnChange event of the following components to get the value in input field and to set the value to icons.

1. Input field: to get the input value

output_value =  Convert.stringToInt(INPUTFIELD_1.getValue());

COMPOSITE.fireEvent(“ValueEnteredinInputField”);

2. Icon 1: to increment the input value by 5

output_value = input_value+5;

INPUTFIELD_1.setValue(Convert.floatToString(input_value));

COMPOSITE.fireEvent(“ValueEnteredinInputField”);

3. Icon 2: to increment the input value by 1

output_value = input_value+1;

INPUTFIELD_1.setValue(Convert.floatToString(input_value));

COMPOSITE.fireEvent(“ValueEnteredinInputField”);

4. Icon 3: to decrement the input value by 1

output_value = input_value-1;

INPUTFIELD_1.setValue(Convert.floatToString(input_value));

COMPOSITE.fireEvent(“ValueEnteredinInputField”);

5. Icon 4: to decrement the input value by 5

output_value = input_value-5;

INPUTFIELD_1.setValue(Convert.floatToString(input_value));

COMPOSITE.fireEvent(“ValueEnteredinInputField”);

Now call the created composite Spinner in our application.

Step 7: Create a Text box component in the layout of the application to display the output value.

Step 8: Write the below code in Events of Spinner composite to get the output value to text box:

var output = SPINNER_1.output();

TEXT_1.setText(Convert.floatToString(output));

Now run the application. When you enter the value in input field and click on icons, it will accordingly, i.e. input value will increment by 1 or 5 or decrement by 1 or 5.

Output:

Conclusion:

Using the the above components we can achieve the requirement of incrementing or decrementing an input value at run time in Lumira Designer. Since this composite returns the output value after incrementing or decrementing it can be used for a variety of purposes in the application. The spinner can also be modified based on your requirements.