使用弹出窗口使用自定义对话框扩展按钮微件

学习目标

  • 使用弹出窗口和脚本编写为按钮创建自定义对话框。

场景：使用弹出窗口创建自定义对话框

观看此视频，详细了解团队对扩展按钮的需求以及其计划故事的自定义对话框。

视频：本节含 SAP 官方视频（视频 ID 1_66lemhcd），需在 learning.sap.com 在线观看。

Ope

你的团队已开始处理扩展计划故事，计划员使用你创建的扩展数据操作按钮复制版本和年份。由于计划故事中的版本和年份组合不同，因此他们会为你提供一些新的数据操作，为你提供建议。

你建议使用弹出窗口来进一步增强数据操作按钮，其中不会简单地运行数据操作，而是提示计划人员选择所需的源版本和目标版本以及年份。

他们还希望能够在故事处于查看模式时轻松创建私有版本和删除私有版本，以及将私有版本发布为新的公用版本。

您与同事 Kevin 一起充分了解业务需求，并创建一系列按钮和自定义弹出窗口，可以：

  1. 通过复制现有版本来创建私有版本，让计划者可以选择复制包含或不包含数据的版本。

  2. 运行包含提示的数据操作，以允许计划人员在选择" 按版本和日期复制数据 "时选择源年份和目标年份。在数据操作复制和刷新表中的数据时，它还会为其提供一个自定义对话框，如下所示。

  3. 每次打开页面时按字母数字刷新和排序新成员，确保计划人员有最新选项可供选择。

  4. 允许他们将私有版本发布为新的公用版本。

  5. 使他们能够删除不再需要的私有版本。

自定义弹出窗口和等待消息对话框。

故事设置

在添加脚本编辑之前，必须先向故事中添加所需按钮，然后创建和配置要使用的弹出窗口。

左侧面板打开的故事并突出显示将弹出窗口添加到页面。在此下方显示标识为 的弹出窗口。工具栏打开，显示如何将按钮微件添加到故事中。

复制含或不含数据的版本

团队希望能够复制现有版本，以便直接从故事创建新的私有版本。他们想要选择使用或不使用数据进行创建。为此，创建 BTN_CopyVersion 按钮和 POPUP_CopyVersion 弹出窗口。

按如下方式配置 POPUP_CopyVersion 弹出窗口：

配置 POPUP_CopyVersion

按版本和日期复制数据

团队希望有一个数据操作允许他们选择版本和年份，而不是在故事中有多个数据操作启动器。他们需要一个自定义弹出窗口，提示他们等到数据操作完成数据复制。

为此，将 BTN_Copy 重命名为 BTN_CopyData 并创建 POPUP_CopyData 和 POPUP_Wait 弹出窗口。

按如下方式配置 POPUP_CopyData 弹出窗口：

POPUP_CopyData 显示在左侧面板和右侧面板之间，所有元素都添加到左侧面板中的弹出窗口，右侧显示弹出窗口的设置。

按如下方式配置 POPUP_Wait 弹出窗口：

配置 POPUP_Wait。

将私有版本发布为新公用版本

团队希望能够将其私有版本发布为新的公用版本，并直接从故事中执行此操作。为此，创建 BTN_PublishAs 按钮和 POPUP_PublishAs 弹出窗口。

按如下方式配置 POPUP_PublishAs 弹出窗口：

POPUP_PublishAs 的配置。

删除私有版本

如果不需要私有版本，团队希望能够从故事中删除私有版本。为此，创建 BTN_Delete 按钮和 POPUP_Delete 弹出窗口。

按如下方式配置 POPUP_Delete 弹出窗口：

配置 POPUP_Delete

场景中使用的代码

复制版本

团队希望能够复制现有版本，以便直接从故事创建新的私有版本。他们想要选择使用或不使用数据进行创建。

以下代码将添加到 BTN_CopyVersion - onClick 事件：

POPUP_CopyVersion.open();

BTN_CopyVersion 中用于打开 POPUP_CopyVersion 的代码。

然后，将以下代码添加到 POPUP_CopyVersion - onButtonClick 事件：

// 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();

POPUP_CopyVersion 中使用的代码。

按版本和日期复制数据

在故事中选择"按版本和年份复制数据"按钮时，你需要：

  1. 刷新和排序可用版本和年份的下拉列表。

  2. 触发等待弹出对话框。

  3. 复制数据弹出窗口提示计划员使用下拉列表指定四个参数的值。

  4. 当屏幕上出现等待弹出窗口时，数据操作将复制和刷新表中的数据。

  5. 数据操作完成运行后，等待弹出窗口将关闭。

  6. 随即关闭复制数据弹出窗口。

要在故事中选择按版本和年份复制数据按钮时打开 POPUP_CopyData 弹出窗口，将以下脚本添加到 BTN_CopyData - onClick 事件：

POPUP_CopyData.open();

对“复制数据”操作按钮进行了代码更新。

在计划员选择所需的版本和日期之前，必须刷新版本列表并进行排序。以下代码将添加到 POPUP_CopyData - onButtonClick 事件：

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

用于刷新和排序版本下拉列表的代码。

然后，以下代码还将添加到 POPUP_CopyData - onButtonClick 事件：

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();

数据选择弹出窗口的代码。

将私有版本发布为新公用版本

团队希望能够将其私有版本发布为新的公用版本，并直接从故事中执行此操作。

在故事中选择"发布为"按钮时，要打开 POPUP_PublishAs 弹出窗口，将以下脚本添加到 BTN_PublishAs - onClick 事件：

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

用于启动弹出窗口的 BTN_PublishAs 代码。

然后，将以下代码添加到 POPUP_PublishAs - onButtonClick 事件：

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();

发布为弹出窗口中使用的脚本。

删除私有版本

如果不需要私有版本，团队希望能够从故事中删除私有版本。

要在故事中选择删除按钮时打开 POPUP_Delete 弹出窗口，将以下脚本添加到 BTN_Delete - onClick 事件：

POPUP_Delete.open();

以下代码还将添加到 POPUP_Delete - onButtonClick：

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();

POPUP_Delete 中使用的代码。

页面初始化或表刷新时刷新

以下脚本将添加到 Page_1 - onInitialization 和 TBLPLANNING - onResultChanged：

//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();

初始化时页面刷新的代码。

脚本对象

以下脚本将添加到 SO_Planning - updateDropdown：

// 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");

}

以下脚本将添加到 SO_Planning - updateVerYear：

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

}

以下脚本将添加到 SO_Planning - updateButtonVisibility：

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

使用弹出窗口创建自定义对话框

**任务流：**在本练习中，您将：

  • 使用下拉列表创建自定义数据选择对话框弹出窗口。

  • 创建自定义等待消息弹出窗口。

  • 添加脚本以运行数据选择对话框，并在数据操作运行时显示等待消息。

  • 向按钮、页面和弹出窗口中添加脚本，以确保脚本运行始终为最新状态。

练习：开始练习（SAP 官方交互式练习）