在本教程中，我们将在SAP Analytics Cloud、Analytics应用程序中构建一个简单的自定义小部件，以显示仪表图，如下所示。

自定义小部件作为Web组件实现。Web组件由HTML、CSS和JavaScript组成。

Custom widget由以下文件组成：

Custom widget JSON自定义小部件JSON文件指定自定义小部件属性，如id、版本、名称、描述等。Web组件JavaScript自定义小部件由一个或多个Web组件组成。每个Web组件都在一个Web组件JavaScript文件中实现，该文件定义并注册一个自定义元素，并实现自定义元素的JavaScript API。它具有生命周期：constructor（）、onCustomWidgetBeforeUpdate（）、onCustomWidgetAfterUpdate（）、connectedCallback（）。样式面板的Web组件JavaScript（可选）自定义小部件的样式面板是analytics designer中的一个区域，您可以在设计时设置自定义小部件的属性值。它被实现为一个Web组件。生成器面板的Web组件JavaScript（可选）自定义小部件的生成器面板是analytics designer中的一个区域，您可以在设计时在其中设置自定义小部件的属性值。它被实现为一个Web组件。图标文件任何16×16像素的图标文件图像。

您需要一个web服务器来承载自定义小部件文件（JavaScript文件、CSS文件、图像等）的资源。假设您的web服务器地址为：

仪表箱自定义小部件由三个web组件组成：实际仪表箱、样式面板和仪表箱的生成器面板由以下文件组成：

方框.json仪表箱的自定义小部件。方框.js仪表箱的Web组件JavaScript文件。盒子_sps.js文件仪表箱样式面板的Web组件JavaScript文件。盒子_bps.js公司仪表箱生成器面板的Web组件JavaScript文件。图标.png任何16×16像素图标中仪表盒的图标。

仪表盒自定义小部件具有唯一的ID、版本和名称，显示在analytics designer、Styleing面板中。

仪表盒自定义小部件由以下三个Web组件组成：

第一个Web组件是实际仪表盒，如所示"主"。第二个腹板组件是仪表箱的样式面板，如"样式"所示。第三个Web组件是仪表箱的生成器面板，由"生成器"类型指示。

继续，这些是仪表箱自定义小部件的属性：值、信息、颜色、宽度和高度。

属性值表示仪表箱的百分比值。特性信息表示仪表箱的标题。特性颜色表示仪表箱的颜色。属性width和height表示自定义小部件的初始宽度和高度。

然后定义仪表盒的脚本方法：

函数setValue取newValue、newInfo和newColor三个参数。body属性包含脚本代码，该脚本代码将传递的所有参数设置为相应仪表盒的属性。

函数getValue不接受任何参数，并返回仪表盒的百分比值。

最后，定义了onClick事件：

注意该事件没有参数，

本节显示了仪表箱的Web组件JavaScript(方框.js).

2.1模板对象

下面的代码创建了一个模板HTML元素：

模板元素代表仪表图

2.2自定义元素

构造函数的JavaSript APIJavaScript API中的第一个函数是构造函数。调用super（）函数，然后创建shadowdom根元素。template元素的副本作为子元素添加到shadowdom根元素。元素样式和svg是通过使用querySelector选择的，其中shadowRoot是对文档片段的引用。最后，一个事件监听器附加到自定义元素，监听click事件。最后，阿里大数据，为了使管理Web组件的属性更容易，初始化了一个空的\u props对象。处理自定义小部件更新在onCustomWidgetBeforeUpdate（）函数中，changedProperties中的属性与\u props对象的属性合并。属性包含更新仪表箱之前所有仪表箱属性的状态。在onCustomWidgetAfterUpdate（）函数中，传递的changedProperties对象中的属性用于直接设置仪表值、信息（文本信息）和仪表框的颜色。最后调用render（）函数来更新图表。

样式面板允许您在analytics designer中更改仪表图表的背景色。

下面的代码显示样式面板（框）的Web组件JavaScript_sps.js文件).

Web组件JavaScript定义了一个新的自定义元素com演示框sps。新自定义元素的JavaScript API在BoxSps类中实现，该类扩展了HTMLElement类的JavaScript API。

3.1 Template Object

下面的代码创建了一个Template HTML元素：

这个Template HTML元素是shadow DOM HTML元素的模板，它表示仪表箱

自定义元素

构造函数的JavaSript API 3.2JavaScript API中的第一个函数是构造函数。调用super（）函数，然后创建shadowdom根元素。template元素的副本作为子元素添加到shadowdom根元素。最后，一个事件监听器附加到表单上，监听提交事件。如果发生一个这样的事件，则调用事件处理程序函数\u submit（）。调用bind（）并将其传递给\u submit（）可确保在\u submit（）中，关键字this引用自定义元素。元素submit（）函数实现如下：\u submit（）函数对传递的事件对象调用函数preventDefault（），这将阻止向服务器提交表单。然后，创建一个自定义事件propertiesChanged，表示对自定义小部件SDK框架的属性进行了更改。这个自定义事件包含一个JSON负载，企业信息管理软件，有享云商城，它是自定义小部件的color属性。getter和Setters属性下面的代码显示了颜色设置器和getter函数的实现。colorsetter函数将新颜色的文本表示形式放入仪表盒样式面板的输入字段中。color getter函数返回仪表盒样式面板的输入字段（颜色值）的文本。

此生成器面板允许您在analytics designer中更改仪表盒的文本颜色。

代码与样式面板的Web组件JavaScript非常相似。下面的代码显示了Builder面板（box）的Web组件JavaScript_bps.js公司).

Web组件JavaScript定义了一个新的自定义元素com demo box bps。新自定义元素的JavaScript API在BoxSps类中实现，该类扩展了HTMLElement类的JavaScript API。

4.1 Template Object

下面的代码创建了一个Template HTML元素：

这个Template HTML元素是shadow DOM HTML元素的模板，它表示仪表箱

自定义元素