技术文章
增强自定义应用程序作为工作流任务UI在云铸造厂
在我之前的博客中(博客1|博客2)我讨论了工作流中最常见的两个问题，并解释了(a)如何从自定义应用程序启动工作流和(b)如何将此自定义应用程序嵌入Fiori Launchpad中的tile。在这篇博客中，我将讨论另一个最常被问到的问题——“如何从现有的自定义UI中创建工作流任务UI”。
工作流中的任务UI可以是Form或SAPUI5组件。对于后者，您有两种选择:
- 从头构建任务UI或
- 重用现有的UI5应用程序。
注:仅支持部署在云平台上的基于SAPUI5的应用。
如果您确实希望从头构建UI，而不是重用任何现有的SAPUI5应用程序，那么您可以在Component.js和View.xml文件。这些调整对于升级UI以拥有任务属性(如任务名称、任务主题、任务优先级等)是强制性的。
1 .更新xs-app.json文件
在自定义应用的xs-app-json中添加路由。这个路由器是需要的，因为你将调用工作流api。阅读文章的第3步文档了解更多。
{“源”:“^ / bpmworkflowruntime /(.*)$", " 1美元目标”:“/”、“服务”:“com.sap.bpm。workflow"， "endpoint": "workflow_rest_url"， "authenticationType": "xsuaa"}，
2 .更新Component.js文件
让我们看看需要添加的代码片段Component.js。对于这个我有一个空的Component.js如下图所示。
按照下面的指导逐步更新文件:
- 获取任务模型数据。
- 使用工作流任务api读取任务上下文。
注1:你必须加上申请编号(如截图所示):sapdemobpmtaskui)到相应的API URL。中解释的应用程序ID结果部分在这里．
注2:你会得到404 -未找到如果您没有在任务UI应用程序中添加路由，则会出现错误xs-app.json．
- 使用任务模型数据更新UI上下文模型。
- 创建任务操作按钮来完成任务。
- 任务完成操作将调用工作流用户任务api。
- 在任务界面中添加操作按钮。
注意1:在您增强了现有的自定义UI之后，按钮的动作脚本将被更新以完成任务，并且这些按钮将附加到任务上(如上面的步骤4和5所示)。的页脚，因此需要删除view.xml它们有按钮来完成UI操作，比如OK, Cancel, Confirm等。
注2:你可以找到更新过的Component.js在这里的示例工作流应用程序中详细了解更改。
- 添加代码以使用Workflow task api完成任务。在从用户界面调用任何工作流API之前，不要忘记XSRF令牌调用。
3 .调整view.xml文件
调整view.xmlUI5组件的文件，以包含任务信息头并删除页脚。您还可以选择调整代码，使其不显示Task UI的页脚，并使其能够独立使用。
步骤4:在工作流中添加用户任务
在Workflow中添加用户任务，并将其与任务UI相关联。你可以用选择选项用户界面属性，以发现SAPUI5组件。
[可选]另外，还可以访问我的收件箱和监测工作流程应用程序，你需要添加相应的瓷砖在现有的Launchpad与给定的应用程序ID和意图导航。只有当您没有配置任何带有工作流应用程序的启动平台时，才需要这样做。
| 应用程序标题 | 应用程序ID | 意图导航 |
| 工作流实例 | com.sap.bpm.monitorworkflow |
bpmworkflowmonitor-DisplayInstances |
| 我的收件箱 | cross.fnd.fiori.inbox | WorkflowTask-DisplayMyInbox |
最后构建和部署MTA项目，并从驾驶舱打开发射台应用程序。您将看到跟踪工作流实例的新磁贴，并分别使用Task ui查看工作项。
您现在可以使用表单(资本支出请求)启动工作流，然后在我的收件箱中查看任务。注意任务属性页眉和页脚。
通过几个简单的步骤，您可以将自己的UI作为Task UI重用。如果你想从头开始构建Task UI，那么你必须完全设计你的component.js和view.xml文件。
我已经上传了示例代码在GitHub您可以在构建自己的应用程序时将其用作参考。
在本系列的最后一章中，我将向您展示如何在Task UI中调用外部api。
相关资源新万博苹果版
嗨医生。
如果一个用户批准或拒绝请求，如何在用户任务之后获得响应或上下文用户任务?
提前感谢。
你好吉米,
检查步骤6，_completeTask方法捕获用户任务的决策，并将其传递到工作流上下文中进行进一步处理。
在我的例子中，我在表单决策中创建了按钮。我怎么调用这个函数?
您可以参考如何从表单访问决策的文档
https://help.sap.com/viewer/e157c391253b4ecd93647bf232d18a83/Cloud/en-US/9fd9395339e94143ac9ce9e693b06bd1.html?q=access%20decision
你好医生,
感谢CF工作流博客。他们真的很有帮助。我刚刚注意到我的收件箱>任务视图在不同的分辨率/全屏下表现得很有趣。你也有同样的问题吗?我在你的源代码中找不到任何相关信息。在我们的示例中，任务视图内容被部分删除。请看附件(第二张截图的标题被剪掉了)
谢谢和问候。
Koray
你好Koray,
我还没看到这个，但这显然是个问题。你能在LOD-BPM-WFS上提高票吗?我想你在用表格。
你好医生,
不，我用的是自定义UI5视图。代码基于您的示例。这就是为什么我把我的问题贴在这篇博客上。我要提出一个事件。
问候,
Koray
你好,
我也有同样的问题。在这个问题上有没有找到解决办法?
谢谢,
问候,
哈姆萨马苏德
你好,
对我来说，解决方案是删除view.xml中的标记。
问候,
哈姆萨马苏德
你好医生,
如何在xs-app.json中添加使用CAPM构建的自定义/外部HANA服务?
我得到一个错误时，使用额外的路线;自定义Inbox UI无法加载。
知道是什么问题吗?
问候,
卡兰
你好,卡兰,
你检查过我的博客消费外部API在自定义任务UI: //www.bouseh.com/2020/09/08/calling-external-api-in-custom-task-ui-of-workflow-in-cloud-foundry/
你好医生,
上周我解决了这个问题;谢谢你的博客。
想知道如果用户在指定的时间内没有批准或拒绝任务，是否有可能自动完成任务?如何在指定时间后触发自动补全?
你能分享一下步骤或博客链接吗?
问候,
卡兰
您可以使用计时器边界事件使其在指定的时间段后自动完成。只需设置计时器，并在该事件之外调用将完成任务。
嗨弗拉基米尔,
你能详细说明一下吗?我看不到时间边界事件;我有开始，中间消息，中间计时器，结束和终止结束事件。
你能分享这些步骤吗?如果任何?
问候,
卡兰
你好医生,
我已经按照这个帖子//www.bouseh.com/2020/09/10/create-workflow-mtar-application-with-custom-ui-using-business-app-studio/为工作流应用程序创建了一个自定义UI。
但对我来说，我的自定义ui的视图并没有呈现在工作流屏幕的详细页面上。
你能帮我一下吗，有什么问题吗?
问候,
阿布
你提供的信息很难提供帮助。打开开发人员控制台并发送您得到的错误。
控制台:
如果你看到消息，它清楚地写着403 -禁止。这意味着您正在使用没有所需特权的api。
嗨阿布·夏尔马，
如果您遵循了我的教程，并且看到了这个屏幕，那么您就完成了。这是你应该看到的。
在博客中使用的UI5应用程序是一个简单的UI5页面，没有任何内容——只有页面和标题(查看xml视图)。
如果你想证明-添加一些输入字段或标签到UI5视图你应该在那里看到它。
关于控制台的403错误——它只是调用OAuth令牌——框架对它进行GET和HEAD调用，而WF API不允许HEAD请求。检查这个403请求是否通过HEAD操作发出。
但就像我之前说的，你没有做错什么，这是你应该看到的教程的结果。
嗨弗拉基米尔,
谢谢你的回复，是的，我遵循了你的教程。
但是如果你仔细看我提供的截图，ui5视图没有正确渲染，你可以看到视图的“标题栏”，但那里缺少“标题”。
此外，我还在我的视图中添加了一些输入和标签，但它们在屏幕上不可见。
问候,
阿布。
在我的收件箱应用程序中有一个错误，当以较小的分辨率显示时，这个标题在主视图下呈现。的注释中也可以看到这个错误Koray Yersel在同一个博客下。他也发现了那个错误。
嗨弗拉基米尔,
你是对的，所有权是在主视图下，但首先是什么导致的呢?
问候,
阿布
但我不知道我错过了哪个角色。我按照文档的原样来做。
网络选项卡:
只有分配了WorkflowParticipant角色的用户才被允许访问这些Inbox api。检查一下你是否有需要的角色。
你好医生,
我也面临同样的问题Koray Yersel是面对。
标题位于收件箱应用程序的主视图下。你知道怎么解决这个问题吗?
问候,
阿布。
嗨医生。，弗拉基米尔•大多数，
我在这里张贴了我的查询;你能提出一个解决方案吗
https://answers.sap.com/questions/13182260/boundary-timer-event-along-with-service-task-in-sc.html
问候,
卡兰
嗨！感谢本教程
如何创建一个目的地来访问在CF中开发的工作流?
或者访问部署到CF的工作流的URL是什么?
问候
你好,
工作流部署(托管)在云代工有它的API在api.sap.com -https://beta.api.sap.com/package/SAPCPWorkflowAPIs/overview
你好，Archana Shukla，
谢谢你发表这个精彩的博客。
我想问你一个问题。
如果我想在视图文件的输入框中输入值，例如下图中的“全名:John Dilbert”，并将其传递给Component.js，我该怎么做呢?
我想将从视图文件中检索到的值传递给Component.js，并将其作为json传递给工作流上下文，因此我想将其包含在下面的图像中黄色下划线中。
如果你能告诉我如何才能做到这一点，我将不胜感激。
真诚地,
Kai Umeki
你好凯,
首先检查工作流实例应用程序中任何可用实例的工作流上下文，并查看上下文是否已经具有Full Name属性，因为如果信息作为任务UI输入，那么您必须已经将其存储在工作流上下文变量中，否则您可以从视图模型中获取它。
亲爱的医生,
谢谢你的回复。
多亏了您，我才意识到工作流上下文已经作为一个模型存在。
我成功地获得了工作流上下文的值。
非常感谢你的帮助。
问候,
Kai Umeki
你好医生,
精彩的博客!
我将不胜感激，如果你能让我知道如何从开始表格的数据在工作流中处理。我能把数据存储在什么地方吗?
你好Kajal,
工作流以整个Start Form Data作为工作流上下文开始。例如，假设您的表单有3个字段名称，地址和联系方式的上下文路径，如${context. personaldetails。等等，那么你的工作流就从你在上下文路径中定义的初始上下文开始，比如{PersonalDetails: {Name: <填写于表单>}，Address: <填写于表单>}}等。
问候,
阿卡纳
你好,医生!
非常感谢您的回复。
问候,
Kajal
你好医生,
我尝试了很长时间为用户任务添加自定义UI。对于HTML5模块，它工作得很好，但与优秀的HTML应用程序，我得到了这个错误在控制台:
无法创建组件......用于智能模板渲染。在细节屏幕中显示标准任务作为回退:从/…f/Component.js加载'd../..../...../Component.js'失败:500 -内部服务器错误-
这款应用在云端运行时没有问题。
什么可能导致这个问题-我不是试用帐户。
BR Sudhir
当Component.js由于各种原因无法加载时，会出现500内部服务器错误。(a)你是否使用任何API调用，然后检查xs-app。如果你使用了正确的路由。请仔细检查文档中提到的操作步骤，确保所有操作步骤都得到了执行。(b)您是从启动平台还是门户网站使用我的收件箱应用程序?如果你正在使用Launchpad，那么你的应用程序必须使用SAP Managed app-router (按照下面的步骤操作）
好吧，那如果我使用传送门呢?
我怎么知道我是使用发射台还是门户，我以为发射台已经没有了?!
检查SAP BTP帐户中的权利。
嗨医生。，
我正在使用我的收件箱应用程序从launchpad，我只得到默认的屏幕标题，我在视图中所做的任何改变都没有反映在我的收件箱中的用户任务。
这些信息不足以提供帮助。在开发控制台检查问题所在。如果Component.js没有加载，那么可能有很多原因。看看我上面的回答。
嗨，Archana Shukla，
我希望我的用户任务由一组人批准。我想让我的任务等到小组里的每个成员都同意后再执行。但是到目前为止，默认情况下，如果组成员中的任何一个用户批准了任务，那么任务就会得到处理。知道怎么做吗?
嗨,此举使,
我猜你必须创建用户任务的多个实例(例如，通过添加具有多个传出路径的并行网关)，在那里你分配单个用户。通常在审批过程中，对象只需要由一个潜在的审批者批准，这就是为什么没有选择等待所有潜在所有者的原因。最好的方法可能是将其分成几个任务组(例如，关键客户经理、销售审批员、营销审批员……)，并让每个组批准它
嗨医生。
感谢博客的详细介绍。我已经按照步骤，但我得到下面的错误。你能帮我理解这个问题吗?
提前感谢!
你好拉里,
SAP BTP工作流的MyInbox不支持基于智能模板的UI5应用程序
你好医生,
我有同样的错误，但我们不使用任何智能模板。我们在视图中有一个简单的表单。js没有添加我在UI5 MTA项目中使用的云服务名称。当我手动将云服务附加到URL时，它工作得很好。
谢谢你，
bloom
嗨医生。，
我怎么能解决这个问题，因为我不是UI专家，并遵循你的博客端到端。
错误
你好!
我有同样的问题:
日志-dbg.js:452 2022-01-31 10:09:55.435100无法创建componentppg。用于智能模板呈现的customui。从/ppgcustomUI/Component.js加载'ppg/customUI/Component.js'失败:404 -未找到-
我是按照你的指示做的，我用的是发射台服务。
有什么问题吗?你好,
你能解决这个问题吗?
我也有这样的问题，想知道
由于我从标准收件箱中了解到自定义表单不起作用，所以我纠正了mta。这样，这个表单就像从本地应用程序启动一样，然后任务图标出现在我的应用程序中，窗体开始工作很棒的博客，非常感谢医生。
我有几件事使我出错。
有了所有这些，它似乎工作得很好。
我现在最大的问题是尝试在本地开发BAS的UI。使用任何预配置的NPM脚本似乎都不起作用，因为它们无法找到startupparameters。这是有意义的，因为收件箱将提供这些，但没有想出一种方法来模拟它，以便我可以在部署之前微调我的屏幕。如果有人有什么想法，我很乐意听听。
再次感谢,
克拉克