在脚本中使用常见的 JavaScript 选项增强故事

学习目标

• 使用通用 JavaScript 选项增强故事。

使用动态下拉菜单增强故事

**业务场景：**您需要使用下拉列表增强现有故事，以按产品类别过滤订单数量表。

为此，你需要使用 onIntialization 操作将以下代码添加到故事中：

var ProductABCratingList = TBL_Quantity.getDataSource().getMembers("0D_NW_PRID__0D_NW_PRCAT");
for (var i=0; i<ProductABCratingList.length; i++){
if (ProductABCratingList[i].id !== ""){
DD_Product_ABC_rating.addItem(ProductABCratingList[i].displayId, ProductABCratingList[i].description);
}
}

您还将使用 onSelect 操作将以下代码添加到下拉列表：

TBL_Quantity.getDataSource().setDimensionFilter("0D_NW_PRID__0D_NW_PRCAT", DD_Product_ABC_rating.getSelectedKey());

此简短视频将引导你了解所需的最终故事和脚本。

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

模拟步骤

以下练习模拟 SAP Analytics Cloud 中的高级模式，并引导您添加创建演示视频中显示的最终故事所需的脚本。

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

• 将下拉菜单添加到故事中

• 将脚本添加到 onIntialization 操作

• 将脚本添加到 onSelect 操作

• 测试故事中的脚本

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

本地脚本变量

在脚本中，可以在变量中"存储"值。有两种类型的变量：局部变量和全局变量。我们稍后将在课程中介绍全球课程。可以使用 var 命令创建本地脚本变量。它们仅在分配它们的脚本中有效。完全处理脚本后，变量将丢失其值。

本地脚本变量

var <NameOfVariable> = <ValueOfVariable>;

请记住：

• 必须在 var 语句中赋值

• 分配的值定义变量的数据类型。

无论您创建的变量类型如何，都必须为其提供一个名称作为标识符，例如 counter, selectedCountry, myList。开发人员通常使用特定的命名规则让每个人都能够轻松读取代码。如果你有兴趣了解有关此主题的更多信息，请参阅以下文档，并与故事开发人员同事达成一致的定义：Devopedia - 命名约定

单个、双倍和三重等于 (===) 运算符

单个等号 (=) 是赋值运算符。使用它们为变量赋值。

三重等于 (===) 是比较运算符。如果使用相等三倍，则会比较值和类型。

**双精度等于 (==) 是比较运算符。**如果双精度相等，则比较值，但不比较类型。SAP Analytics Cloud 不支持自动类型转换，因此不要在任何脚本中使用双等号。

写入控制台

一种用于跟踪变量值或脚本处理的常用技术，是使用浏览器控制台。您可以使用 console.log(); 命令将文本或变量值写入控制台。

要通过浏览器访问控制台，您需要从浏览器工具栏中打开开发人员工具，然后切换到控制台标签。

条件执行语句和循环

If Then Else 语句

if (condition) {
// this block will be executed if condition is true
} else {
// this block will be executed if condition is false
}

典型的比较模式：	逻辑运算符：
===	（等于）	&&	（和 ）
!==	（不等于）	**
<	（小于）	！	（不是 ）
<=	（小于或等于）
>	（大于）
>=	（大于或等于）

切换语句

var selectedCountry = Dropdown1.getSelectedText();

switch (selectedCountry) {
case "Germany":
// code that is relevant for Germany
break;
case "USA":
// code that is relevant for USA
break;
default:
// code that is relevant for all other countries
}

可以使用 switch 语句从多个代码部分中选择一个。表达式（在本例中为 selectedCountry）与每种情况的值进行比较。如果匹配，则执行相关代码部分。要停止进一步处理 switch 语句，可使用 break 语句跳出开关。

如果不使用中断，将处理以下所有行！这包括以下 case 语句，而不考虑其值。

循环：用于

在上面的示例中，您可以看到三个 语句。它们对应于以下内容：

• 语句 1：为循环迭代器声明变量

• 语句 2：是在执行代码行之前检查的条件

• 语句 3：每次执行封闭的代码行时执行的循环迭代器的更改

例如，你希望使用 将所有层次结构从数据源记录到控制台**，**以便编写以下脚本：

var Hierarchies = TBL_Quantity.getDataSource().getHierarchies("0D_NW_PRID");

for (var j=0; j<Hierarchies.length; j++){
console.log(Hierarchies[j].id +" - " + Hierarchies[j].description);
}

脚本中使用的语句在下方突出显示。

• 陈述 1： var j=0

• 陈述 2： j<Hierarchies.length

• 陈述 3： j++

For 循环被广泛使用，例如，它们用于循环数组条目，您将在课程后面的练习中看到该条目。

循环：While

While 循环类似于 for 循环，但语句较少。

while (condition) {
// this block will be executed if condition is true
}

例如，你希望使用 while 将所有层次结构从数据源记录到控制台，因此你编写以下脚本：

var Hierarchies = TBL_Quantity.getDataSource().getHierarchies("0D_NW_PRID");

var x = 0;
while (x < Hierarchies.length) {
console.log(Hierarchies[x].id +" - " + Hierarchies[x].description);
x++;
}

不要忘记更改条件中使用的变量！

通过条件执行增强故事

**业务场景：**您的团队请求更改故事打开时的显示方式。他们希望仅在启动时查看 KPI 磁贴，然后在单击其中一个磁贴时，标签条将与所选磁贴对应的标签一起显示。

此简短视频将引导你了解所需的最终故事和脚本。

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

模拟步骤

以下练习模拟 SAP Analytics Cloud 中的高级模式，并引导您添加创建演示视频中显示的最终故事所需的脚本。

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

• 确保在启动时选项卡条设置为隐藏。

• 定义"税款和订单数量"图表的代码

• 测试故事中的脚本

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

脚本中的数组

在许多情况下使用数组至关重要。某些命令 API 返回一个数组，您应该知道如何处理它们。

在本课中，我们将介绍数组概念，因为它们可以在 API 中返回，因此了解它们很重要。但是，在下一课中，您将在完成包含数组的练习以及全局脚本变量和脚本函数等概念时应用知识。

数组类似于项目列表。在脚本中使用它们时，通常需要：

• 通过列表上的位置（也称为"索引"）访问单个元素

• 循环整个列表，并依次处理每个元素

数组由 [ ] 标识，如上面的示例所示，可以是：

1. 打印到控制台

var resultset = Table_1.getDataSource().getResultSet();
console.log(resultset);

2. 通过循环访问

var resultset = Table_1.getDataSource().getResultSet();
for (var x=0; x<resultset.length; x++){
console.log(resultset[x]["@MeasureDimension"].rawValue);
}

3. 通过索引访问

var resultset = Table_1.getDataSource().getResultSet();
console.log(resultset[1]);

注意

与许多编程语言一样，数组中的第一个元素具有索引 0。

在某些脚本编写情况下，创建可存储多个条目的变量可能会有所帮助。例如，要存储应处理的微件列表或应从脚本中使用的度量列表。

脚本编写情况	变量
创建空数组	var myList = ArrayUtils.create(Type.string);
创建填充数组	var myList = \["Hello", "World", "Example"\]
添加元素	myList.push("Hello world");
移除最后一个元素	myList.pop();
读取条目数	myList.length;

在通用导航窗口小部件中生成动态值

在"使用脚本编辑增强通用导航微件"视频中，介绍了增强通用导航微件的步骤：

1. 在" 生成器 "面板中定义微件的项目。可通过三种不同的方式进行定义：

2. 手动，使用直接输入

3. 使用脚本动态地

4. 动态地使用属性绑定

5. 定义应在微件的 onSelect 脚本中执行的操作

在本课中，您将使用直接输入手动定义小工具的项目。在本课中，我们将了解使用脚本动态定义项目。

以下代码是可用于动态填充下拉列表的脚本示例：

var countries = Table_1.getDataSource().getMembers("0D_NW_BP__0D_NW_CNTRY");
for (var x = 0; x < countries.length; x++ ) {
var country = countries[x];
Dropdown_1.addItem(country.id, country.description);
}

作为脚本中使用数组的典型示例，我们将使用示例将维的所有成员写入下拉列表。您必须考虑添加代码的正确事件。但是，Page_1.onInitialization() 可能是很好的地方，但是，根据成员更改的频率，将其添加到源微件的 onResultChanged 事件中可能会很有用。

微件数组

API Application.getWidgets(); 可以返回小组件搜索选项描述的小组件数组。例如，可以使用以"CH_Tile"开头的名称创建故事中所有统计图的数组。API 还可以创建其他微件的数组，例如按钮、图像等。

用于返回故事中所有统计图的数组（名称以"CH_Tile"开头）的代码：

var tilecharts = Application.getWidgets({type:WidgetType.Chart, searchPattern:"CH_Tile"});
console.log (tilecharts);

要了解数组的内容和结构，可以将其发送到控制台日志并在其中分析其内容。