Creating a Data Action Popup with Scripting

Objective

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.

⠀

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.
Custom popup and wait message dialogs.

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
1234567891011
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();
Code for data select popup.

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
1
POPUP_DA_SELECT.open();
Code update to the Copy Data data action button.

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
123456789101112131415161718192021222324
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();
Code to refresh and sort the dropdown list of versions.

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
123456789101112131415161718192021222324252627282930313233343536373839404142
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]);	
  
}
Code for page refresh on initialization.

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
1234567891011121314151617181920212223242526272829303132
// 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);
}
Code for dropdown refresh on page initialization.

Create a Data Action Popup with Scripting

Task Flow: 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

Learning

SAP FacebookSAP YoutubeSAP LinkedIn