SAP Learning Journey

Creating a Data Action Popup with Scripting

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Create a data action popup with scripting

Scenario: Create a Data Action Popup with Scripting

Watch this video to learn more about the team's requirement for a data action that is extended with scripting to include custom popups.

Business Scenario

Your team has started working with the extended planning story and have been copying versions and year using the extended data action button you created. They have added a number of new data actions due to the different version and year combinations required in the planning stories.

You suggest further enhancing the data action button with a popup, where instead of simply running the data action, planners will be prompted to select the required source and target version and year.

After working with your colleague Kevin to fully understand the business requirement for the extended data action, you'll create a data action popup that:

  1. Prompts the planner to select the source and target year when they select the Copy Data data action button.
  2. Provides them with a custom dialog when the data action is running and copying and refreshing the data in the table.
  3. Refreshes and sorts new members alphanumerically each time the page is opened, ensuring the planners have the most up to date options to select.

Code Used in the Scenario

In the following examples, you can see the code used in the scenario and exercise to extend the planning story.

Select Data Popup

The following script is used so that when the OK button is selected:

  1. The wait popup dialog is triggered.
  2. The data selection popup prompts planners to specify the values for the four parameters using the dropdowns.
  3. The Copy Data data action begins running, copying and refreshing the data in the table.
  4. The wait popup saying The process is running. Please wait... appears then closes when the data action has finished running.
  5. The data selection popup closes.
Code snippet
if (buttonId === "Btn_Ok") {
POPUP_Wait.open();
DataAction_1.setParameterValue("SourceVersion", DD_SOURCE_VER.getSelectedKey());
DataAction_1.setParameterValue("TargetVersion", DD_TARGET_VER.getSelectedKey());
DataAction_1.setParameterValue("SourceYear", DD_SOURCE_YR.getSelectedKey());
DataAction_1.setParameterValue("TargetYear", DD_TARGET_YR.getSelectedKey());
DataAction_1.execute();
TBLPLANNING.getDataSource().refreshData();
POPUP_Wait.close();
}
POPUP_DA_SELECT.close();
Expand

Copy Data Button

The Copy Data button script is updated so that instead of the data action running with specific source and target parameters, a popup dialog will appear allowing the planners to select source and target versions and years they require.

​The script you will use to do this is:

Code snippet
POPUP_DA_SELECT.open();
Expand

Refresh the Dropdown List of Versions

The following script is added to POPUP_Copy to refresh and sort the dropdown list of versions:

Code snippet
TBLPLANNING.getDataSource().refreshData();


var i = 0;
var version_mbr = TBLPLANNING.getDataSource().getMembers("Version");
var sort_list_version = ArrayUtils.create(Type.string);
var temp = ArrayUtils.create(Type.string);

for (i = 0;i<version_mbr.length; i++)
{
   sort_list_version[i] =  version_mbr[i].description + "," +version_mbr[i].id;
	//sort on description
}

sort_list_version.sort();

for (i = 0;i<sort_list_version.length; i++)
{
   temp = sort_list_version[i].split(",");	  
   DD_SOURCE_VER.addItem( temp[1], temp[0]);
   DD_TARGET_VER.addItem( temp[1], temp[0]);
}

POPUP_Copy.close();
Expand

Refresh on Page Initialization

The following script is added to Page_1 - onInitialization to ensure that any additional members that have been added are available to the planners:

Code snippet
var i = 0;
var count_of_year = 0;
var version_mbr = TBLPLANNING.getDataSource().getMembers("Version");
var year_mbr = TBLPLANNING.getDataSource().getMembers("YearMonth");

var sort_list_version = ArrayUtils.create(Type.string);
var sort_list_year= ArrayUtils.create(Type.string);
var temp = ArrayUtils.create(Type.string);

for (i = 0;i<version_mbr.length; i++)
{
   sort_list_version[i] =  version_mbr[i].description + "," +version_mbr[i].id;
}

sort_list_version.sort();

for (i = 0;i<sort_list_version.length; i++)
{
   temp = sort_list_version[i].split(",");	  
   DD_SOURCE_VER.addItem( temp[1], temp[0]);
   DD_TARGET_VER.addItem( temp[1], temp[0]);
}

for (i = 0;i<year_mbr.length; i++)
{
   if (year_mbr[i].description.length === 4)
   {
	   console.log (year_mbr[i].description); 
	   sort_list_year[i] = year_mbr[i].description + "," + year_mbr[i].id;
	   count_of_year++;
   }   
}

sort_list_year.sort();

for (i = 0;i < count_of_year; i++)
{
   temp = sort_list_year[i].split(",");	
   DD_SOURCE_YR.addItem(  temp[1], temp[0]);
   DD_TARGET_YR.addItem(  temp[1], temp[0]);	
  
}
Expand

Update Dropdowns on Page Initialization

The following script is added to SO_Planning - updateDropdowns to ensure that new dimension members are available in the dropdowns when the page is opened:

Code snippet
// clean up the dropdowns before adding values to them
DD_PublishAs_Versions.removeAllItems();
DD_Delete_Version.removeAllItems();

// retrieve all private versions available in the model
var privVersions = TBL_Planning.getPlanning().getPrivateVersions();

//if private version exists
if (privVersions.length > 0) {
          // iterate over the private versions
          for (var i=0; i<privVersions.length; i++ ) {
                     // add them to the dropdown boxes
          DD_PublishAs_Versions.addItem(privVersions[i].getId(),privVersions[i].getDisplayId());
          DD_Delete_Version.addItem(privVersions[i].getId(),privVersions[i].getDisplayId());
                     if (selectedPrivateVersion === "" && i === 0) {
                     DD_PublishAs_Versions.setSelectedKey(privVersions[i].getId());
                     DD_Delete_Version.setSelectedKey(privVersions[i].getId());
                     }
          }
          
          BTN_PublishAs.setVisible(true);
          BTN_Delete.setVisible(true);
          BTN_Copy_Data.setVisible(true);
                     
          DD_Delete_Version.addItem("ALL","All versions");
          DD_Delete_Version.setSelectedKey("ALL");
          
} else {
          BTN_Delete.setVisible(false);
          BTN_PublishAs.setVisible(false);
          BTN_Copy_Data.setVisible(false);
}
Expand

Create a Data Action Popup with Scripting

Extend a Story with Custom Popups

What skills will you develop in this practice exercise?

In this practice exercise, you will:

  • Create a custom wait message popup and data selection dialog popup with dropdowns
  • Add script to run data selection dialog and display wait message when the data action is running
  • Add scripts to the page and popups to ensure that they are always up to date
  • Update script for the Copy Data data action button
ExerciseStart Exercise

Log in to track your progress & complete quizzes