Skip to Content
0

How to make Formatting Function dynamic

Sep 11, 2017 at 06:30 PM

256

avatar image
Former Member

Below is a screenshot of the dashboard I am currently developing. My issue is with data binding for the gauges. My selectors on the left is supposed to control the data that feed into the bar graphs and the gauges. The bar graphs are responding dynamically based on the value selected from the selectors, but the gauges are not. Here are the things I've tried so far:

1. I used data binding for each gauge. First, I created a global script function that retrieves the data from the data source based on the user selection (I used the .getdata() function and assigned the value in global variables -- each gauge has a unique value; therefore, each gauge has its own variable.).

2. I called the global function when the "Salary Analysis" tab is selected. I then used formatter function to return the value of the variable from the global function. So far, the gauges show the correct values when I first click on the "Salary Analysis" tab, but the values don't change when I change the values of the selectors.

3. I then tried to call the same global function for each selector (I added the function to the "On Select" event scipt) hoping that the global function will be executed and change the values of each variable that are eventually assigned to the gauges, but with no success.

It looks like my other option is to create a button that will execute the global function, but I am trying to avoid that because the customer wants to see data change quickly without having to press a button (i.e. Apply) to see the change. I'm sure there is a way I can make this happen. I have only been using Design Studio for about 2 months now (I used to develop in Xcelsius), so I am not completely familiar with DS just yet. I hope someone can give me some ideas on how to make the gauges to work or the data binding to work dynamically. Thank you!

data-binding.jpg (151.1 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Mustafa Bensan Sep 12, 2017 at 12:44 AM
0

Hi Alexandra,

What you are facing is probably not an issue related to the Gauge component but related to how you are applying data binding or scripting. Also, I think there is a misunderstanding here about the term "data binding". Data binding involves directly linking a data source value to a component property. If you are using the getData() function then this means you are not in fact using data binding to update the Gauge component but scripting instead.

As I understand it, you are populating a Global Variable with the Gauge value and then must be using some kind of setter script function to set the value of the Gauge. It would be helpful if you posted the script code that you are applying in the Global Script function as well as the script code in the "On Select" event of the selector controls.

Regards,

Mustafa.

Show 5 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Mustafa,

Yes, my apologies. You can tell I am a Design Studio newbie. I used the Formatter Function and not the data binding feature. Here is the code for the global script function; it's very straight-forward. Each gauge has its own value/global variable. I then used the formatter function for each gauge. The formatter function for each gauge simply returns the variable. For example: For my "ALL" Gauge, I only have "return gaugeAll" in my formatter function. So far, the value being returned from the function is correct. So, I tried to call the function in each selector/drop-down menu hoping that for every change the user makes, the function is executed and the value for the global variables are updated. Apparently, that did not work. The only time variables are updated is when I click ton the "Salary Analysis" tab (which is also a button that I turned into a tabular format). I just want the values to update dynamically when the users make their selection.

level2SalaryAnalysis = LEVEL_2_SALARY_ANALYSIS.getSelectedValue();  // Global variable; Get user selection for level 2
fiscalMonthSalaryAnalysis = FISCAL_MONTH_SALARY_ANALYSIS.getSelectedValue();  // Global variable; Get user selection for fiscal month

// Get value of "ALL" Gauge  --> "gaugeAll" is a global variable
gaugeAll = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "ALL",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

// Get value of "ALL of 4.0" Gauge
gaugeAllOf4_0 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "ALL",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

// Get value of "Band 1" Gauge
gaugeBand1 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 1",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

// Get value of "Band 2" Gauge
gaugeBand2 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 2",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

// Get value of "Band 3" Gauge
gaugeBand3 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 3",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

// Get value of "Band 4" Gauge
gaugeBand4 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 4",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;
0

Hi Alexandra,

I think there has been some confusion here regarding Data Binding and Formatter Functions. If you have assigned a Formatter Function in the Properties Sheet of the Gauge component then you will not be able to achieve the desired result. Formatter Functions and Data Binding go hand-in-hand. One cannot be used without the other. The Formatter Function only influences the bound property when there is a change in the value of the bound cell. Therefore, calling the Formatter Function independently from the "On Select" script of your various selectors will have no effect.

Since you need to dynamically update the gauges based on user selection which drives a dynamic selection of a result set cell, you cannot use Data Binding and Formatter Functions to achieve this. Here is what I suggest:

1. Remove the data binding of the gauges' Value property and hence Formatter Function reference in the Properties Sheet;

2. Recreate the same Formatter Function as you have defined above as a standard Global Script Function. To avoid confusion you can name it something like updateGauges();

3. After each getData() call in your Global Script Function, update the corresponding gauge using the setter function of the gauge's value property. As an example, your updated script would look something like this, depending on the name of the gauge components and the exact syntax of the value setter function:

level2SalaryAnalysis = LEVEL_2_SALARY_ANALYSIS.getSelectedValue();  // Global variable; Get user selection for level 2
fiscalMonthSalaryAnalysis = FISCAL_MONTH_SALARY_ANALYSIS.getSelectedValue();  // Global variable; Get user selection for fiscal month

// Get value of "ALL" Gauge  --> "gaugeAll" is a global variable
gaugeAll = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "ALL",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

GAUGE_ALL.setValue(gaugeAll); // Update gauge value

// Get value of "ALL of 4.0" Gauge
gaugeAllOf4_0 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "ALL",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

GAUGE_ALL_OF_4.setValue(gaugeAllOf4_0); // Update gauge value

// Get value of "Band 1" Gauge
gaugeBand1 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 1",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

GAUGE_BAND1.setValue(gaugeBand1); // Update gauge value

// Get value of "Band 2" Gauge
gaugeBand2 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 2",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

GAUGE_BAND2.setValue(gaugeBand2); // Update gauge value

// Get value of "Band 3" Gauge
gaugeBand3 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 3",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

GAUGE_BAND3.setValue(gaugeBand3); // Update gauge value

// Get value of "Band 4" Gauge
gaugeBand4 = DS_6_GAUGE.getData("0MEASURE0", {
	"ORG_RPTG_TIER_2": level2SalaryAnalysis, 
	"PAY_BAND_TIER": "BAND 4",
	"FISCAL_MONTH_ABBR": fiscalMonthSalaryAnalysis
}).value;

GAUGE_BAND4.setValue(gaugeBand4); // Update gauge value

4. Call the above function from the "On Select" event of each of your selector components.

Let me know how you go,

Mustafa.

0
Former Member
Mustafa Bensan

Thank you so much, Mustafa. I will go ahead and try that. We haven't really had any sit-down training on the Design Studio. I've just been learning things on my own for the past two months and sometimes, it can be counter-productive because as you can see, I was pounding on something that was not going to work in the first place. I'm glad SAP has this Q&A section. Anyway, I will surely try this out today and I will get back to you.

0
Former Member

It worked!! Thank you so much! There is a .setIndicatorValue property, which sets the value of the gauge, and a .setShowedValue, which sets the label inside the gauge. I added the scripts after each .getData and called this function for each selector. I don't know why I didn't think of this before as I have used the .setvalue property of other metrics in the dashboard. Thank you again for your help.

0

You're welcome, Alexandra. Happy to help.

0
Mohd Fahad Sep 11, 2017 at 06:52 PM
0

Hi Alexandra,

I cant replicate the issue on my end as i dont have Guage component. I had demo from few vendors in the past but we didn't finalize yet.

However we had similar use case to make Guage dynamic by binding property or using script. May i know where can i get similar Guages as yours please?

Regards,

Fahad

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

The gauge component is part of the SCN SDK that I downloaded from SAP since design studio doesn't have a gauge component out of the box. I downloaded it from this link:

https://blogs.sap.com/2015/12/22/scn-design-studio-16-sdk-components-ver-30/

(I just noticed that there is a better version for Lumira 2.0. We will upgrade to 2.0 by the end of this month and download the latest version of the sdk).

0

Hi Alexandra,

Thanks great to hear that. I think sap site is going through website transition most of my bookmark links including your are broken as of now.

0