这个博客延续了我以前关于"在免费试用帐户中开始使用工作流服务"的博客。

我展示了如何使用SAP Web IDE建模一个简单的工作流，如何从Fiori启动板启动它，以及如何在"我的收件箱"应用程序中查看审批任务。

现在，大数据精准，为了真正完成任务，从而完成工作流本身，我们需要实现一个SAPUI5应用程序。

该应用程序将有一个页面（在SAPUI5中，这称为"视图"），当用户在"我的收件箱"中打开任务时，将显示此信息。

创建新的SAPUI5应用程序

打开SAP Web IDE完整堆栈并在工作区中创建新项目（文件–新建–模板中的项目）

选择"SAPUI5应用程序"模板。

在下一页，输入项目名称（如BookUIApplication）并单击"下一步"。

输入视图名称（如"ApproveBookView"）并单击"完成"。

创建表单布局

页面仍为空。我们现在需要添加必要的UI控件来显示书籍的详细信息，如标题和价格。

使用webapp/view文件夹下"BookUIApplication"项目中的布局编辑器打开新创建的视图。

从调色板中选择"Simple Form"控件并将其放置在编辑器画布上，向页面添加表单。

注：需要启用sap.ui.layout布局"按顺序打包项目设置"使用表单布局。

选择"Title"元素，并将属性部分中的标题文本更改为"Book Details"。

同时将"Label 1"文本更改为"Title"，将"Label 2"更改为"Price"。

通过选择第一行中的第二个输入控件，然后按delete键删除该控件。

您的页面布局现在应该如下所示此：

添加数据绑定

我们现在需要将UI控件绑定到工作流上下文中的数据。

这是通过输入控件属性中的"值"字段完成的。

对于第一个输入控件（带有标签"Title"），输入"{/product}"。

对于第二个输入控件（带有标签"Price"），输入"{/Price}"。

最后，我们不希望审批者能够更改标题或价格。

因此，将两个输入元素的"可编辑"属性设置为"false"。

初始化数据模型

为了使工作流上下文可用于UI控件，我们需要检索任务上下文数据。

我们将通过调用工作流REST API来完成此操作"我的收件箱"中当前显示的任务实例的任务ID。我的收件箱将通过启动参数将此数据传递给我们的组件。

打开组件.js文件（位于webapp文件夹下）。

找到init函数并在其主体中添加以下代码：

现在您可以部署项目：在工作区中选择项目并从菜单中选择"部署–部署到SAP云平台"。

打开在下面的屏幕中，只需单击"部署"操作

部署后，您可以在浏览器中打开应用程序

但是，您将只看到一个空白页面，由于UI仅在"我的收件箱"应用程序内运行时才起作用。

将UI5组件链接到用户任务

我们现在可以从工作流中的审批任务中引用已部署的UI5应用程序。

再次打开工作流并选择"ApproveBook"任务。

在用户任务属性的"详细信息"部分下，找到要使用的属性指定用户界面。

点击"选择"按钮，选择"BookUIApplication"项目和"webapp"组件路径，然后按"确定"确认。

现在可以部署和测试工作流，通过从Monitor Workflow应用程序启动一个新实例并在"我的收件箱"中打开任务，

您应该看到如下所示的任务详细信息：

添加批准和拒绝操作

作为最后一步，手机网站建站，我们需要添加批准和拒绝操作以实际完成任务。

为此，我们需要回去编辑组件.js再次归档。

将以下代码片段复制并粘贴到文件中–就在init函数的右括号之后：

这为我们的组件添加了三个函数：

fetchToken将从工作流服务API检索XSRF令牌，云服务器租用，在调用POST时将用于身份验证完成任务的方法_completeTask将调用工作流服务API来完成当前任务，并通过JSON负载将审批状态（"true"或"false"）传递给工作流上下文。_refreshTask将告诉我的收件箱从列表中删除完成时的任务

有了这些函数，我们现在可以将以下代码添加到组件.js文件：

此代码将告诉我的收件箱在其操作页脚中添加"批准"和"拒绝"按钮。当按下按钮时，将调用"完成任务"功能。

完成工作流

您现在可以将BookUIApplication项目再次部署到SAP云平台，大数据 数据分析，然后刷新我的收件箱以检查任务的更新UI。

注意：您可能需要清理浏览器缓存或强制"硬重新加载"以查看新按钮。

通过点击"批准"或"拒绝"完成工作流。

任务应从我的收件箱中消失，工作流实例应从"监视工作流"实例中消失列表。

您现在已经成功地完成了我们的"图书订购"工作流程的第一个版本的实施。

，大数据网