Set visible dependent on selected members in Input Control using SAC script

[#1]

Hi All,

I am using an input control in SAC for dimension "Country" (Single Selection) and would like to display specific images depending on the selected Country.

1. Is this possible using an onSelect script on my input control, or do I need to read from a table?

2. How can I read the selected member from an input control or table?

3. How do I use setVisible to display the correct image?

Looking forward to your support,

Anu

#sacapplicationdesigner #scripting #sapanalyticscloud

[N1kh1l]

@anu37 @CLTGravesen 

You can follow the instruction on how to read the Input Control member from the below post. I would just like to add on setting up the correct image of the flag based on selected Input Control country. I am not sure how many possible countries you are dealing with. If they are just a few you could Create an Image object per country and then use the .setVisible properties of the image. 

If the countries list is more the better way could be to use the below url as a source of the Image using the method setImage. My example is for just US but you can follow the same approach for other countries.

var country = "US";
Image_1.setImage(" https://flagpedia.net/data/flags/w580/" + country.toLowerCase() + ".webp");

below is how it shows up in stories.

Hope this helps !

Nikhil

[CLTGravesen]

Hello @anu37 ,

What you need is absolutely possible. 

---

1. Is this possible using an onSelect script on my input control, or do I need to read from a table?

You can use the onSelect method from your input-contol, you don't need to read from a table. 

---

2. How can I read the selected member from an input control or table?

You can read all about the different functions in the official script reference, but the way to read the values is :

var selectedCountry = InputControl_2.getInputControlDataSource().getActiveSelectedMembers();

Note: Even if your input-selection is set to "Single Selection", the function will always return an array. 

So, to get the value, you have to fetch the first element of that array:

//Get All Values:
var selectedValues = InputControl_2.getInputControlDataSource().getActiveSelectedMembers();
console.log(selectedValues); //Display Array - Only for demonstration :) 

//Get first element in array:
var selectedCountry = selectedValues[0];
console.log(selectedCountry); //Display Selected Value - Only for demonstration :) 

Which will give you the value:

You can then use selectedCountry.id in an IF or switch statement.

//Get All Values:
var selectedValues = InputControl_2.getInputControlDataSource().getActiveSelectedMembers();
//Get first element in array:
var selectedCountry = selectedValues[0];
switch (selectedCountry.id) {
	case 'France':
		//do something
		break;
	case 'Germany':
		//do something else
		break;
	default:
		//do something	
}

---

3. How do I use setVisible to display the correct image?

---

Now, I don't know how your report is set up, but the "Image" object itself does not have a setVisible method, as you can see here.

However, you can wrap the images in a Panel, which does:

...
case 'France':
		Panel_12.setVisible(true);
		break;
	case 'Germany':
		//do something else
		break;
	default:
		//do something	

That will hide the panel and all the content.

Hope this helps! 🙂