SAP Adobe Form 教程六 FormCalc和JavaScript的实践

前文：

SAP Adobe Form 教程一 简单示例

SAP Adobe Form 教程二 表

SAP Adobe Form 教程三 日期，时间，floating field

SAP Adobe Form 教程四 动态隐藏和显示字段

SAP Adobe Form 教程五 图片

SAP Adobe Form 几种文本类型

在本文中，我们将演示在FormCalc中使用SUM，然后在SAP Adobe forms中使用JavaScript动态更改文本样式。

使用脚本的主要优点是，我们可以改进功能，并且可以在运行期间动态地控制表单。

SAP Adobe Form 支持2种脚本语言:

• FormCalc
• JavaScript

这两种脚本语言各有优缺点，可以根据需要决定使用哪种。本文将提供两种脚本语言的一些常见业务场景。

注意，之前已经有一篇涉及Javascript的文章，可以参考：SAP Adobe Form 教程四 动态隐藏和显示字段

本文链接：https://www.cnblogs.com/hhelibeb/p/15522710.html

原文标题：SAP Adobe Form Tutorial. Part XVI. Practical Use Case of FormCalc and JavaScript

前提

• SAP Adobe Form的table相关的基础知识
• 对JavaScript和FormCalc基本功能的了解
• ABAP编码能力

业务需求

1. 在发送给客户的详细报表中，我们希望在所有行项目末尾显示总金额和总单位小计。

2. 在语句的描述部分，我们希望以粗体和不同的样式显示层次结构的标题产品，以便很容易在整个语句中识别标题产品。

解决方案

我们需要创建一个Adobe Form和与全局数据的interface。我们将在interface的“code initialization”中的全局数据内表中添加一些测试数据，然后将这些全局内表与adobe form layout中的UI表绑定。

另外，我们还可以通过在驱动程序中编写处理逻辑并将所需的内部表作为adobe form的导入参数传递来实现这一点。因为这个博客更多的是关于脚本的使用，所以没有考虑数据处理的最佳方法。

步骤

1，在事务代码SFP创建interface ZPB_TEST_SCRIPTS。

2，创建2个全局变量内表，details和descriptions。

3，表类型ZPB_TEST_DESCR、ZPB_TEST_DETAILS的结构如下，

4，前往code initialization，为内表填入测试数据，

5，前往事务SFP，创建新form，添加interface ZPB_TEST_SCRIPTS。

6，拖放全局变量到context。

7，前往Layout用这两个全局变量创建表格。

a, 前往Data View，

b，选择GT_DETAILS，拖放到Layout的Detail页，

c，你会看到表格自动创建，并绑定了GT_DETAILS。

d，为小计创建页脚行。前往Hierarchy，展开GT_DETAILS，在DATA后创建一个新的行。前往新行的Object，变更行类型为Footer。

请注意，如果我们使用“表格助手”创建表格，则会自动创建页脚。因为前往是通过Data View创建的表格，所以必须手动创建页脚。

下一步是写Formcalc脚本的步骤。

8， 在“NET_UNITS”下的页脚中选择文本字段，然后转到脚本编辑器，

9，现在转到“Show Events”下拉列表，你会发现所有事件都显示为灰色。为什么？

这是因为对于少数UI元素类型，不允许编写脚本，这就是为什么所有事件都仅处于显示模式。要启用事件并编写脚本逻辑，我们需要将UI元素的类型从“Text”更改为“Text Field”。

10，修改NET UNITS和TOTAL ROYALTIES的页脚字段为“Text Field”。

可以注意到，对于上面高亮显示的字段，边框颜色已更改为红色，而对于其他字段，边框颜色仍为蓝色。颜色是标识文本用户界面或文本字段用户界面的指示器

接着，重复步骤8和9，选择合适的事件来编写脚本。

需求是求和、显示小计。

11，选择Calculate事件，语言选择为Formcalc。

写入SUM代码。sum (DATA[*].NET_UNITS)

12，创建一个测试驱动程序以生成结果pdf（请参阅以前的博客以创建用于测试Adobe forms的驱动程序），并生成一个包含小计的pdf：

通过使用FormCalc本的一个求和函数，我们可以在Adobe forms中计算表中行项目的和，不需要使用任何ABAP逻辑。

FormCalc文档：https://helpx.adobe.com/pdf/aem-forms/6-2/formcalc-reference.pdf

JS的使用例子

13，重复步骤7的a-c部分，在Data View为description创建另一个表，使用全局变量GT_DESCRIPTION。

还记得另一个业务需求吗？我们需要在运行期间根据粗体/斜体设置将描述字段中的标题产品设置为粗体，并使用不同的文本样式和项目设置为斜体。

14，在Hierarchy中选择GT_DESCRIPTION的DATA行，前往脚本编辑器。

15，选择“form : ready”事件，语言为Javascript，写入代码，

代码如下，

输出结果，