Designing Script-Based Pop-Up Variable Screens with Mandatory Field Selection in SAC

[bilgeyasar]

Brief Snapshot

The Best Run Bike model was used as the model in the study.

Introduction

Hello! Have you ever faced a situation where precise variable selection is mandatory to ensure accurate data display in your reports? If you answer yes, in this blog I’ll walk you through an interactive popup-based variable selection screen in SAP Analytics Cloud (SAC). The example covers a scenario where users must select Country and Customer Status before continuing, ensuring better data relevance and user experience.

Let’s explore this hands-on implementation step by step, breaking down the scripting logic behind creating this functionality.

Why Use a Variable Screen?

Variable screens in SAC are essential for guiding users to make the right data selections before interacting with dashboards. By using a popup for variable selection:

• Data accuracy is improved by forcing mandatory selections.
• System performance is optimized by reducing unnecessary queries.
• User experience is enhanced by providing a clear, guided process.

This method is especially useful in scenarios where filtering data by key dimensions (like Country or Customer Status) is critical for business decisions.

Key Functionalities

Here’s what we’ll achieve:

1. A popup screen to select Country, Customer Status, and optionally Sales Agent.
2. Validation to ensure mandatory fields are filled before applying the filters.
3. Data refresh controls to prevent backend queries while the popup is open.
4. Efficient application of user selections via scripting.

Step-by-Step Implementation

1. Filling the Dropdowns

Page_Screen oninitialization codes:

//open Popup_Screen
Popup_Screen.open();

//call function which fills dropdowns
VariableObjects.fillVariableDropdowns();

//call function which pause widgets refresh on the initial state
VariableObjects.pauseOn();

The values in the dropdown lists are taken from the current data set and added to the corresponding list. For this, the fillVariableDropdowns() function is defined.

This function takes the Country, Customer Status, and Sales Agent fields from the data source and adds them to the dropdowns accordingly. This way, when users open the popup, they can see all the options for that field.
Dropdown Information:

  

fillVariableDropdowns() function:

//Create variables selected for Country, selected2 for Sales Agent and selected3 for Customer Status variables
var selected = Table_13.getDataSource().getMembers("Country");
var selected2= Table_13.getDataSource().getMembers("Sales_Agent");
var selected3= Table_13.getDataSource().getMembers("Customer_Status");

//Related members are added to the dropdown of each variable
if(selected.length>0) {
	for( var i=0; i<selected.length; i++) {
		Dropdown_Country.addItem(selected[i].id, selected[i].description);
	}
}

if(selected2.length>0) {
	for( var k=0; k<selected2.length; k++) {
		Dropdown_SalesAgent.addItem(selected2[k].id,selected2[k].description);
	}
}

if(selected3.length>0) {
	for( var j=0; j<selected3.length; j++) {
		Dropdown_CustStatus.addItem(selected3[j].id,selected3[j].description);
	}
}

2. Controlling Data Refresh

To improve performance and avoid unnecessary backend queries, data refresh is paused while the popup is active.

pauseOn: Pauses the refresh for all widgets (tables, charts, etc.).

Table_12.getDataSource().setRefreshPaused(PauseMode.On);
Chart_10.getDataSource().setRefreshPaused(PauseMode.On);
Table_13.getDataSource().setRefreshPaused(PauseMode.On);

pauseOff: Resumes the refresh once the user completes their selections.

Table_12.getDataSource().setRefreshPaused(PauseMode.Off);
Chart_10.getDataSource().setRefreshPaused(PauseMode.Off);
Table_13.getDataSource().setRefreshPaused(PauseMode.Off);

3. Handling User Actions

The popup includes three buttons:

1. Set: Applies the user’s selections and closes the popup.
2. Cancel: Closes the popup without making any changes.
3. Reset Selections: Resets the selections in the dropdowns.

Set Button Logic

When the Set button is clicked:

• Selections are validated to ensure mandatory fields are not empty.
• If validation fails, error messages are shown, and the popup remains open.
• On success, filters are applied to the widgets, and data refresh is resumed.

Cancel Button Logic

Close the popup screen.

Popup_Screen - onButtonClick


//Country and Customer status selections are mandatory, Sales Agent is not.
//If the selection is empty, it stops the page refresh.

//The code block that runs when the Set button was clicked
if(buttonId === "buttonSet") {

	//get selections of dropdowns
	var selectedCountry=Dropdown_Country.getSelectedKey();
	var selectedAgent= Dropdown_SalesAgent.getSelectedKey();
	var selectedStatu= Dropdown_CustStatus.getSelectedKey();
	
	//If Country and Customer Status are not selected
	if(selectedCountry===undefined && selectedStatu===undefined) {
		Popup_Screen.open();
		Application.showMessage(ApplicationMessageType.Error,"Country selection is mandatory.");
		Application.showMessage(ApplicationMessageType.Error,"Customer Status selection is mandatory.");
		VariableObjects.pauseOn();      //Stops the refresh.
	}
	
	//Only if the Country is not selected
	else if(selectedCountry===undefined) {
		Popup_Screen.open();
		Application.showMessage(ApplicationMessageType.Error,"Country selection is mandatory.");
		VariableObjects.pauseOn();      //Stops the refresh.
	}
	
	
	//Only if the Customer Status not selected.
	else if(selectedStatu===undefined) {
		Popup_Screen.open();
		Application.showMessage(ApplicationMessageType.Error,"Customer Status selection is mandatory.");
		VariableObjects.pauseOn();      //Stops the refresh.
	}
	
	//If Country and Customer Status are both selected and Sales Agent selection is up to the user and selected
	else {
			Table_12.getDataSource().setDimensionFilter("Country", selectedCountry);
			Chart_10.getDataSource().setDimensionFilter("Country", selectedCountry);
			Table_13.getDataSource().setDimensionFilter("Country", selectedCountry);
		
			Table_12.getDataSource().setDimensionFilter("Customer_Status", selectedStatu);
			Chart_10.getDataSource().setDimensionFilter("Customer_Status", selectedStatu);
			Table_13.getDataSource().setDimensionFilter("Customer_Status", selectedStatu);
		
			Table_12.getDataSource().setDimensionFilter("Sales_Agent",selectedAgent);
			Chart_10.getDataSource().setDimensionFilter("Sales_Agent",selectedAgent);
			Table_13.getDataSource().setDimensionFilter("Sales_Agent",selectedAgent);

			VariableObjects.pauseOff();
			Popup_Screen.close();
	}
}

//Runs when the Cancel button was clicked
if(buttonId === "buttonCancel")  {
	Popup_Screen.close();
}

Reset Selections Button Logic

Resets the selections in dropdowns.

Dropdown_Country.setSelectedKey("undefined");
Dropdown_SalesAgent.setSelectedKey("undefined");
Dropdown_CustStatus.setSelectedKey("undefined");

Variable Screen Button Logic

With the Variable Screen button on the page, the popup with the Variable screen is made visible.

//onClick
Popup_Screen.open();

Real-Time Usage

When implemented, this logic ensures that:

• Users cannot proceed without selecting mandatory variables.
• Backend resources are preserved by pausing widget refresh during selection.
• Data accuracy is maintained by applying relevant filters before any query is executed.

Conclusion

Implementing a variable screen with popups in SAC not only improves data relevance but also boosts overall performance and user satisfaction. This approach is ideal for scenarios where precise filtering is essential before any data is displayed.

I hope this guide helps you design similar solutions for your SAC projects. Stay tuned for more tips, and happy scripting!

Feel free to share your thoughts and questions in the comments below!

SAP Community SAP Analytics Cloud Cloud SAP Analytics Cloud, analytics designer