SAP 分析云：自定义微件动手练习指南

[eric_gong]

随着 SAP Analytics Cloud 的 QRC Q2 发布，自定义微件现在可以与优化故事体验一起使用，在此我很高兴与你分享这个新的自定义微件动手练习指南，它详细描述了从头开始构建自定义微件的不同步骤以及如何上传并在你的故事中使用自定义微件。欢迎您根据指南，尝试创建自己的第一个自定义微件！下面就让我们开始吧🚀 

自定义微件操作指南共有 9 章。你将从开发一个基础的 Web Component 文件开始你的旅程，它是自定义微件的主要技术文件之一。 

之后，你将学习如何创建你的第一个基础的自定义微件，它由下列文件组成： 

• 一个 Web Component 文件（JavaScript 文件）：在其中定义你的自定义微件的功能、行为和样式。 


• 一个元数据文件（JSON 文件）：它定义了 SAC 需要了解的关于微件的所有信息；如何识别微件，微件的属性，事件，方法，以及在哪里可以找到 web component 的实现，这个文件充当 web component 和 SAC 之间的桥梁。 

接下来，你将通过集成自定义微件的生命周期函数来编辑 Web Component 文件，例如： 

• onCustomWidgetResize 


• onCustomWidgetBeforeUpdate 


• onCustomWidgetAfterUpdate 


• onCustomWidgetDestroy 

通过将 Web Component 作为自定义微件集成到 SAP Analytics Cloud 中，SAC 框架在自定义微件的状态例如：属性、宽度、高度……发生变化时调用 Web Component 执行中的这些函数。 

为了将你的自定义微件链接到不同的 SAP 分析云数据模型，你将在本章中学习如何添加数据绑定机制，从而使自定义微件能够轻松访问和操作数据。 

下一步，你将学习如何从一个名为 Apache ECharts 的开源第三方库渲染绑定数据。你将加载库，然后解析来自数据绑定结果的维、度量和数据，然后将解析的结果转换为一个 ECharts option。 

稍后，你将向自定义微件添加属性和方法，以便更好地与故事中的其他微件进行交互，并简化以脚本为主导的控制。 

之后，你将学习如何向自定义微件添加事件，以便在生命周期中插入脚本以实现相应的功能，此外，您还将能够公开脚本功能并在设计时调用脚本编辑器。 

在本教程的这一章节，你将向自定义微件添加自定义数据类型，这允许用户在设计时通过脚本轻松地与数据交互。 

最后，在最后一章中，你将知道如何为你的自定义微件添加样式面板，以便用户在编辑故事时可以设置不同的属性值，例如：你可以设置自定义微件的新样式（颜色，字体，形状…）。样式面板也是作为一个 Web Component 实现的。 

作为一个可选章节，你将被要求计算自定义小部件的完整性。它在 JSON 文件中定义，是 JavaScript 文件的哈希值。它用于验证 JavaScript 文件没有被篡改。在开发自定义微件期间，我们可以使用 ignoreIntegrity: true 来忽略此验证。但是，建议在生产环境中启用此验证，以确保正确加载 JavaScript 文件。 

综上所述，我向你概述了自定义微件动手练习指南的不同内容章节。你也可以从这个 GitHub 仓库下载包含每章解决方案文件的配置文件步骤文件夹。 

在你开始之前 

• 使用一个代码编辑器来完成这个动手练习，例如：Visual Studio Code。 


• 代码需要完全按照截图中的格式，并注意 


• 按照这个动手练习，你将被要求在 SAP 分析云中创建不同的故事，请确保将它们始终保存在相同的文件夹位置。 


• 确保在最后一次修改代码之后保存 JSON 和 JavaScript 文件，以避免由于未保存文件而遇到错误。 


• 你可以在这里找到每一章（从 0 到 9）的配置文件步骤文件夹。每个文件夹包含动手练习指南每一章的源代码解决方案。我建议你下载该文件夹，以便轻松地复制/粘贴代码的不同部分。你将被要求在不同章节中从这些解决方案文件夹中复制代码。 

更多博客请看👇 

• How to use Linked Analysis with Custom Widget 


• Hosting and Uploading Custom Widgets Resource Files into SAP Analytics Cloud 


• Custom Widget Samples GitHub Repository