Extending Button Widgets with Custom Dialog Boxes Using Popups

Objective

After completing this lesson, you will be able to create custom dialogs for buttons using popups and scripting.

Scenario: Create Custom Dialogs with Popups

Watch this video to learn more about the team's requirement for extended buttons and custom dialogs for their planning story.

⠀

Your team has started working with the extended planning story and planner have been copying versions and year using the extended data action button you created. They come to you for advice as they have a number of new data actions that are required due to the different version and year combinations in the planning story.

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.

They also want a way to easily create private versions and delete private versions when the story is in view mode, as well as publish a private version as a new public version.

You work with your colleague Kevin to fully understand the business requirement, and you create a series of buttons and custom popups that:

Creates a private version by copying an existing version, giving the planner the choice to copy the version with or without data.
Runs a data action with a prompt to allow the planner to select the source and target year when they select the Copy Data by Version and Date. It also provides them with a custom dialog when the data action is copying and refreshing the data in the table, as shown below.
Refreshes and sorts new members alphanumerically each time the page is opened, ensuring the planners have the most up-to-date options to select.
Allows them to publish a private version as a new public version.
Gives them the ability to delete a private version that is no longer required.

Story Setup

Before adding scripting, you must first add the required buttons to your story and create and configure popups that you will use.

Copy Version With or Without Data

The team wants to be able to copy an existing version in order to create a new private version directly from the story. They want to have the choice to create it with or without data. To do this, you create the BTN_CopyVersion button and POPUP_CopyVersion popup.

The POPUP_CopyVersion popup is configured as shown:

Copy Data by Version and Date

The team wants to have one data action that will allow them to select versions and years instead of having multiple data action starters in the story. They want a custom popup prompting them to wait until the data action has finished copying the data.

To do this, you rename the BTN_Copy to BTN_CopyData and create the POPUP_CopyData and POPUP_Wait popups.

The POPUP_CopyData popup is configured as shown:

The POPUP_Wait popup is configured as shown:

Publish Private Version As a New Public Version

The team wants to be able to publish their private versions as new public versions and do this directly from the story. To do this, you create the BTN_PublishAs button and the POPUP_PublishAs popup.

The POPUP_PublishAs popup is configured as shown:

Delete a Private Version

If a private version isn't required, the team wants to have the ability to delete it from the story. To do this, you create the BTN_Delete button and the POPUP_Delete popup.

The POPUP_Delete popup is configured as shown:

Code Used in the Scenario

Copy Version

The team wants to be able to copy an existing version in order to create a new private version directly from the story. They want to have the choice to create it with or without data.

The following code is added to the BTN_CopyVersion - onClick event:

Code Snippet

1
POPUP_CopyVersion.open();

Code used in BTN_CopyVersion to open the POPUP_CopyVersion.

Then, the following code is added to the POPUP_CopyVersion - onButtonClick event:

Code Snippet

1234567891011121314151617181920212223
// Copy with Data
if (buttonId === "Btn_Copy") {
	var oPlanning = TBLPLANNING.getPlanning();
	if (oPlanning) {
		var oBudgetVersion = oPlanning.getPublicVersion(DD_Copy_PublicVersion.getSelectedKey());
		if (oBudgetVersion) {
			oBudgetVersion.copy(INF_Copy.getValue(), PlanningCopyOption.AllData,  SO_Planning.getPlanningCategory(CategoryDropdown));
			SO_Planning.updateDropdowns("");
		}
	}
} 
//Copy without Data
else if (buttonId === "Btn_Copy_wo_Data") {
	oPlanning = TBLPLANNING.getPlanning();
	if (oPlanning) {
		oBudgetVersion = oPlanning.getPublicVersion(DD_Copy_PublicVersion.getSelectedKey());
		if (oBudgetVersion) {
			oBudgetVersion.copy(INF_Copy.getValue(), PlanningCopyOption.NoData, SO_Planning.getPlanningCategory(CategoryDropdown));
			SO_Planning.updateDropdowns("");
		}
	}
}	
POPUP_CopyVersion.close();

Copy Data by Version and Date

When the Copy Data by Version and Year button is selected in the story, you want:

The dropdown lists of available versions and years are refreshed and sorted.
The wait popup dialog is triggered.
The copy data popup prompts planners to specify the values for the four parameters using the dropdowns.
The data action copies and refreshes the data in the table while the wait popup is on screen.
The wait popup closes when the data action has finished running.
The copy data popup closes.

To open the POPUP_CopyData popup when the Copy Data by Version and Year button is selected in the story, the following script is added to the BTN_CopyData - onClick event:

Code Snippet

1
POPUP_CopyData.open();

Code update to the Copy Data data action button.

Before the planners select their required version and date, the list of versions will have to be refreshed and sorted. The following code is added to the POPUP_CopyData - onButtonClick event:

Code Snippet

123
TBLPLANNING.getDataSource().refreshData();
//Call Global Script function to update and sort version and year
SO_Planning.updateVerYear();

Code to refresh and sort the dropdown list of versions.

Then, the following code is also added to the POPUP_CopyData - onButtonClick event:

Code Snippet

1234567891011
if (buttonId === "Btn_CopyData") {
    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_CopyData.close();

Publish Private Version As a New Public Version

The team wants to be able to publish their private versions as new public versions and do this directly from the story.

To open the POPUP_PublishAs popup when the Publish As button is selected in the story, the following script is added to the BTN_PublishAs - onClick event:

Code Snippet

12
INF_PublishAs.setValue("");
POPUP_PublishAs.open();

Then, the following code is added to POPUP_PublishAs - onButtonClick event:

Code Snippet

123456789101112131415161718
if (buttonId === "Btn_Ok") {

	var newName = INF_PublishAs.getValue();
	console.log(["newName", newName]);
	
	if (newName !== "") {
		// publish private version myActual as public version with name
		var myVersion = TBLPLANNING.getPlanning().getPrivateVersion(DD_PublishAs_Versions.getSelectedText());
		console.log(["myVers", myVersion.getId()]);
		if (myVersion) {
			console.log(["myActualVersion ID", myVersion.getId()]);
			myVersion.publishAs(newName, SO_Planning.getPlanningCategory(DD_PublishAs_Category));
		}
		SO_Planning.updateDropdowns("");	
	}
}

POPUP_PublishAs.close();

Delete a Private Version

If a private version isn't required, the team wants to have the ability to delete it from the story.

To open the POPUP_Delete popup when the Delete button is selected in the story, the following script is added to the BTN_Delete - onClick event:

Code Snippet

1
POPUP_Delete.open();

The following code is also added to POPUP_Delete - onButtonClick:

Code Snippet

12345678910111213141516171819202122232425
if (buttonId === "Btn_Yes") {
	var oPlanning = TBLPLANNING.getPlanning();	
	var versionName = DD_Delete_Version.getSelectedText();
	//Delete all versions
	if (versionName === "All versions") {
		var oPrivatversions = TBLPLANNING.getPlanning().getPrivateVersions();
		console.log(["Version ", oPrivatversions]);		
		for (var i = 0; i < oPrivatversions.length; i++) {
			console.log(["Version ", oPrivatversions[i].getId()]);
			oPrivatversions[i].deleteVersion();
		}
	}
	else {
		//delete specific version
		if (oPlanning) {
			var oPrivateVersion = oPlanning.getPrivateVersion(versionName);
			if (oPrivateVersion) {
				oPrivateVersion.deleteVersion();
				SO_Planning.updateDropdowns("");
			}
		}
	}
}

POPUP_Delete.close();

Refresh on Page Initialization or Table Refresh

The following script is added to both Page_1 - onInitialization and TBLPLANNING - onResultChanged:

Code Snippet

123456
//Call Global Script function to check for private versions
SO_Planning.updateButtonVisibility();
//Call Global Script function to populate dropdowns with private version names
SO_Planning.updateDropdowns("");
//Call Global Script function to update and sort version and year
SO_Planning.updateVerYear();

Code for page refresh on initialization.

Script Objects

The following script is added to SO_Planning - updateDropdowns:

Code Snippet

123456789101112131415161718192021222324
// 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 = TBLPLANNING.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());
		}
	}
	
	DD_Delete_Version.addItem("ALL","All versions");
	DD_Delete_Version.setSelectedKey("ALL");
	
}

The following script is added to SO_Planning - updateVerYear:

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]);	
  
}

The following script is added to SO_Planning - updateButtonVisibility:

Code Snippet

12345678910111213
// retrieve all private versions available in the model
var selectedPrivateVersion = TBLPLANNING.getPlanning().getPrivateVersions();

//if private version exists
if (selectedPrivateVersion.length > 0) {
	BTN_PublishAs.setVisible(true);
	BTN_Delete.setVisible(true);
	BTN_CopyData.setVisible(true);
} else {
	BTN_Delete.setVisible(false);
	BTN_PublishAs.setVisible(false);
	BTN_CopyData.setVisible(false);
}

Create Custom Dialogs with Popups

Task Flow: In this practice exercise, you will:

Create a custom data selection dialog popup with dropdowns.
Create a custom wait message popup.
Add scripts to run data selection dialog and display wait message when the data action is running.
Add scripts to the button, page, and popups to ensure that they run and are always up to date.

ExerciseStart Exercise

Next lesson