SAPUI5和C4C。我的（un）预期行程。第一部分

最后，返利下载，我旅程的最后一部分在这里。希望这是个好时机。然而，每一次旅程都会导致另一次旅程。因此，让我们先完成这个任务。

正如我在本系列之前的博客中所描述的，淘客是什么意思，我有一个任务来扩展C4C ui（HTML客户端和Fiori客户端）。扩展应该使用SAPUI5/OpenUI5完成。换句话说，它应该将自定义（最好是SAPUI5）控件嵌入到C4C中，并且还应该与C4C对话。

HTML mashup还不够好。至少，我对我得到的结果不满意。我继续环顾四周，注意到有些UI元素或控件对于C4C UI来说并不常见。举几个例子：

销售服务单据中的"单据流"页签；"互动"部分在服务票，你可以阅读相关的电子邮件，甚至社会媒体的帖子，并回应他们；地图整合到不同的领域，如访问，帐户等；使用C4C应用程序时的"条形码扫描器"功能；办理入住和退房手续时的地理定位功能；添加产品时的"增量"控制；在最近发布的带有全机器学习可视化的侧面板；

查看SAP UI Designer中的相应屏幕，我意识到这些所有控件主要是通过自定义窗格控件完成的。坚持。它不是只用于Silverlight库吗？是的，其中一些仍然保留代表Silverlight DLL的程序集名称和类型名称。但是，其他程序集和类型名称为空。显然，Silverlight不再是定制窗格的唯一用例。

我检查了上面提到的一些不错的组件的属性。发现它们都有有趣的部分。我要说的属性节名称是"HTML自定义组件"。它有三个属性：–JS库名称–JS库URL–JS Type Name

在那个时候，我不知道他们的意思。

我开始进一步探索。我抓住了我以前的博客中所获得和描述的知识和工具。主要的一个是SAPUI5的调试模式来加载调试源。否则，将加载源最小化。作为预防措施：它显著降低了C4C UI的负载。但这是值得的。你可以从更广阔的角度看问题，找到更多有趣的东西（和评论）。

我在调试源代码中搜索了JS Type Name值，发现"JS Type Name"是JS库中的一个UI5控件名，名称在"JS library Name"属性中维护。听起来很有趣。不过，我只找到了一些标准库。没有文件。再说一遍，我不知道该怎么处理这些东西。

我唯一知道的是我需要自己的图书馆。我只有在WebIDE中开发SAPUI5/OpenUI5的经验。但根本没有图书馆。和往常一样，SAP社区也在寻求帮助。我读过不少关于如何处理自己的JS库以及它们都是关于什么的博客和文章。下面提到的这些对于我个人理解库的一般原则非常有用：

SAPUI5自定义控制库：Web IDE开发、部署到HCP和内部ABAP存储库。第一部分。SAPUI5自定义控件库：Web IDE开发、部署到HCP和本地ABAP存储库。第二部分。SAPUI5使用Grunt将自定义控件库部署到ABAP存储库

好吧，在阅读了这一点和"试错"尝试之后，我发现我实际上需要构建一个预加载版本的库。顺便说一句，起初，我尝试了一件非常简单的事情：将一个著名的自定义控件（它是starrating控件）放入一个库中。对我来说幸运的是，时间不长，但这只是很早的一步。然而，回顾过去，我认为这是一次非常好的经历。学习一小段知识的经历节点.js还有呼噜声。准备好我的书库并进行写作后，我遵循以下步骤：1安装节点.js从https://nodejs.org/2使用以下命令行从命令行安装Grunt的命令行界面（CLI）：npm安装-g grunt cli三。创建包.json文件4创建Gruntfile.js文件5运行npm安装6发出咕噜声如果你需要重建-只需再次运行咕噜

现在看看这个列表，听起来很简单。当我这么做的时候真的很痛苦。而且每一步都需要大量的工作来研究，因为这个列表中的所有内容对我来说都是新的。

幸运的是，随着时间的推移，从"使用SAP Full Stack WebIDE with Grunt实现自定义UI5库和使用该库的UI5应用程序"的博客开始，我注意到WebIDE现在集成了"构建"选项。你不需要再在WebIDE中更改你的SAPUI5，然后下载它，然后用Grunt构建它，然后再做一些其他的步骤。

总之，现在更容易了，你可以简单地从WebIDE构建，甚至部署到云平台，它也会为你构建它。查看本教程Grunt Build in SAP Web IDE.

准备好我的库并"构建"现在的问题是如何将我的库嵌入C4C。我找到的所有标准自定义窗格都有"JS库URL"作为相对路径。意味着它们直接托管在C4C中的某个地方。我试图通过SAP UI设计器上传C4C租户中的文件。不幸的是没有运气。SDK不接受库的存档或js文件。它只接受：

UI配置文件动态链接库（*.dll）Silverlight应用程序包（*.xap）