在SAC的故事里面，针对不同的应用场景，需要用到不同的可视化图表、微件等。SAP分析云提供了各式各样的图表和微件来帮助客户进行数据展示，然而面对各种各样的实际应用场景的需求，部分场景不能被完美满足。SAP 分析云的自定义微件框架允许添加你自己的自定义微件，用于提供特定的用户界面元素、数据的特定可视化方式或或其他功能。此时，客户可以通过上传自定义微件的方式来定制微件，并在故事中使用。
针对于层级结构的展示需求，基于Help文档中的自定义微件demo，我开发了一个树形的自定义微件，本篇博客主要介绍一下我从零开始实现一个自定义微件的过程以及用到的参考资料，以及对开发过程中遇到问题和经验进行分享。
点击这里查看演示视频。
本篇博文将从自定义微件介绍、自定义微件实现过程，如何在SAP分析云中上传和使用自定义微件和总结四部分进行展开，文章的总体结构如下：
自定义微件介绍 自定义微件实现过程 index.json main.js styling.js 如何在SAP分析云中上传自定义微件 总结
1. 自定义微件介绍
SAP 分析云的自定义微件框架允许使用自己的自定义微件，以扩展优化故事中提供的预定义微件集。例如，如果你需要特定的用户界面元素、特定的数据可视化对象，或者预定义微件集未提供的特定功能，这将非常有用。
自定义微件能够无缝集成到 SAP 分析云的优化故事中。与预定义微件一样，自定义微件提供以下功能：
它列在“微件”菜单列表中，你可以从中将其添加到画布。 可以在画布上移动并调整大小。 它显示在左侧面板的大纲中。 它可以将脚本方法可以在用户故事中使用。 可以在设计时在 “样式设置面板”和“生成器面板”中设置自定义微件的属性值。
自定义微件的源文件由两种类型的文件组成：JSON 文件和资源文件（JavaScript 文件）。
JSON 文件
JSON文件中包含微件中的元数据、资源文件的URL引用等。
资源文件 main.js （实际的自定义微件） styling.js（自定义微件的样式设置面板） builder.js（自定义微件的生成器面板）
其中每个 js 文件是一个Web组件，制作一个自己的自定义微件从这几个文件入手即可。
2. 自定义微件实现过程
在我开发的树形自定义微件中，主要涉及到”index.json”, “main.js”, “styling.js” 三个文件。
Index.json文件
在自定义微件的JSON文件中，必须要包含的属性有以下几个：
id version name newInstancePrefix webcomponents properties methods events dataBindings
这里必须要保证id的唯一性，这是你的自定义微件的唯一标识。当上传一个已存在的id的自定义微件时，系统会进行提醒，如果继续上传，将会把之前存在的相同id的微件覆盖掉。
在webcomponents中，一个Web组件对象指定了一个自定义微件的一个Web组件。对于每个Web组件对象，kind、tag和url三个属性是必要的。Kind只能是“main”，“styling”，“builer”三种，url中是web组件对应的js文件的相对位置。
注意：tag是 Web 组件的自定义元素的唯一标识，其名称必须至少包含一个连字符 （-），以便将自定义元素与常规 HTML元素区分开来。并且tag必须要和js文件中的定义一致，否则系统将找不到对应的js文件。并提示以下错误。
在我的自定义微件里面，只使用到了“main”和“styling”这两种类型组件，如果你还想自定义生成器面板的内容，还需要添加一个“builder”类型的Web组件。
在properties对象中是自定义微件的一些属性和属性的默认值。属性对象中的每个属性名称都要对应自定义微件的属性名称。例如，在properties中可以定义自定义微件的宽度、高度、节点颜色、字体大小等属性，这些属性可以作为全局变量使用。属性的值可以通过styling组件中修改，并将修改后的值传递到mian组件中重新渲染，以此改变自定义微件的样式。
Methods 对象指定自定义微件中包含的脚本方法，包括属性设置方法等。Methods 对象的每个 JSON 属性名称都是自定义微件中的脚本方法名称。例如，在我的微件中，定义setNodeFontSize方法用来设置节点的字体大小，在main.js中使用该方法，每当nodeFontSize属性的值改变时，该函数将获取到新的值并更新组件中对应的字体大小。
通过在JSON文件中定义dataBindings，可以在自定义微件中访问模型中的数据。dataBindings返回的数据主要包括两个部分：
data metadata
data是一个包含所有返回数据的数组，数组中的每一个对象包含一条数据（在某一个或几个“维”下对应的度量的值）。metadata中包含data中的一些“度量”和“维”的属性信息。
通过dataBindings返回来的数据的数据格式可能并不符合自定义微件所需的格式，你可以根据echarts图表的数据格式的需求重新组织数据的结构。更多有关于使用dataBindings的信息，请点击这里获取。
dataBindings返回的数据的示例如下：
有关于JSON文件中各个有效属性更详细的介绍和用法，请参阅帮助门户中相关文档。
mian.js文件
在main.js文件中是我的自定义微件的主体部分。因为我想要实现一个树形结构，我参考了echarts库中的树形组件来进行展示。通过databanding拿到数据后，我写了一个函数将数据结构转换成树形结构，正确的数据结构是组件成功展示的最关键的一步。把数据正确引入到echarts的tree组件中之后就能得到一个基础的树形展示结构，接下来可以根据自己的需要进行优化和调整。
例如在我的自定义微件中，我想要我的树形结构可以有不同方向的展示，此时会遇到每个节点label的方向需要调整的问题。因此我需要考虑到树形结构的每种分布情况并设置其标签的显示方向。例如对于从左到右分布的树，其叶子节点的标签显示在节点右侧，其他的节的标签显示在左侧；从上到下分布的树，其叶子节点的标签显示在节点下方，其他节点的标签显示在上方；其他的分布情况类似。我的节点标签显示的内容默认显示节点名称和节点对应的值，当该节点是无值节点时默认只有节点名称，当然你也可以根据自己的需求对显示内容进行调整。
正交布局效果：
径向布局效果：
在下图中可以看到树状结构的节点有空心的和实心的，空心节点表示该节点不能进一步展开，实心的节点表示点击该节点可以展开其子节点。
当我在样式设置面板中设置了阈值，树状图中值超过阈值的节点会突出显示为红色，这可以帮助我们很好的展示出不同层级结构中超过阈值的节点有哪些。
（注：我的代码中我的阈值默认值设置为1,000,000,000 ，如果你想修改初始时候的默认值，可以修改示例代码 main.js 中233行的默认值，以及 index.json 中第79行的默认值。）
在样式设置面板中设置了阈值为50,000,000，树状图中值超过50,000,000节点会突出显示为红色。
在tooltip里面的提示信息我选择在tooltip里面展示节点名称、值和单位信息。
如果你想自定义tooltip的格式，可以修改main.js中的这一部分代码。
这里需要说明一下的是，目前这个版本的树形微件我只实现了支持一个度量的版本，如果你想实现支持多个度量的树，可以在代码中添加多个series对多个度量的值进行展示。
styling.js文件
在styling.js文件中的内容控制样式设置面板中的自定义微件附加属性这一模块的内容。
在我的自定义微件中我想要实现修改树形组件的一些基本属性、更换布局设置、超过阈值的节点突出显示等功能，因此我的样式面板设置如下图所示。
布局设置分为正交布局和辐射状布局两种， 正交布局时又可以设置布局的分布方向为“左右”，“右左”，“上下“和”下上“四种。
在这里要注意的是，只有正交布局时需要设置方向和边类型，当选择径向布局时，是不需要设置这两个属性的。因此为了避免产生不必要的错误，在这里我设置了当布局设置选择“径向布局”选项时，默认将方向设置和边类型设置的选择器隐藏掉。
这里有关于节点颜色的设置，目前这个版本的自定义微件只支持手动输入一些颜色的英文名称或者是十六进制颜色值和RGB格式颜色，如“darkblue“，”#00FF00“，”RGB(0,0,255) “等。如果你想进一步进行优化，可以引入颜色选择器插件。
3. 如何在SAP分析云中上传和使用自定义微件
你可以在SAP Analytics Cloud 中上传和托管这些资源文件，以便在故事中使用自定义微件。你需要将自定义微件的JSON文件和对应的资源文件上传到SAP 分析云上。
点击故事页面中的自定义微件，并选择添加图标，分别上传JSON文件和对应的资源文件。
注意：资源文件上传时需要将文件压缩成扩展名为.zip的压缩包，并且保证.zip文件小于10MB。
在故事中，通过添加自定义微件，找到你上传的微件，将其添加到故事中。
打开生成器面板，选择你的模型并添加“度量”和“维”。
注意：你添加的维度必须要具有层级结构，并且在设置不同的层级结构时确保要勾选“包含父节点元素”，这样树形结构才会被正确显示。
在样式面板中，可以在自定义微件附加属性中修改其属性并应用。样式面板中可以修改的属性由你在styling.js资源文件中的定义决定。在树型自定义微件中，样式面板可以改变标题、根节点名称、布局设置、方向设置、连接边类型、节点类型等多个树型，用来改变该树型微件的样式。
4. 总结
以上是我实现一个树形自定义微件的全部过程，它可以应用于多种具有层级结构的数据展示和分析，例如可以用于人力资源的组织结构展示，通过树形结构展示公司各部门和岗位的层级关系，明确员工的职责，帮助管理层优化人力资源配置、调整组织架构等；生产场景中的BOM展示，利用树形结构展示产品的物料清单及其层次关系，支持生产计划和物料管理，帮助企业进行成本控制、提高生产效率等；财务报表中的科目层级结构展示，利用树形结构可以展示总账、子科目、各项费用和收入的逐级明细，帮助财务人员和管理层更直观地分析财务状况和发现潜在问题；不同地区、部门或产品线的销售业绩展示，利用树形结构展示从全球销售额逐级深入到各大洲、国家、地区的销售表现，帮助企业识别出哪些区域或产品线贡献最大，或发现销售瓶颈等。
作为第一个版本里面还有很多欠缺的内容。我将提供其源代码，如果你觉得有所帮助的话，可以下载源码参考，并在此基础上进行的修改和调整。
我在实现自定义微件过程中用到一些非常有帮助的文档，如果你想实现一个自己的自定义微件，也可以进行参考：
Use Custom Widgets (Optimized) | SAP Help Portal
Custom Widgets | SAP Help Portal
SAP Analytics Cloud: Custom Widget Hands-on Guide – SAP Community
SAP Analytics Cloud: Custom Widget & Widget Add-On… – SAP Community
Your first SAP Analytics Cloud Custom Widget – Int… – SAP Community
Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community
Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community
Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community
Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community
Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community
以上这篇文章是我作为一个新手学习和开发自定义微件的过程和一些心得，希望这篇文章对你有一定的帮助。
此示例包仅用于学习交流，不可做生产用途使用。在使用前请检查并彻底阅读其中可能使用的第三方库的许可至关重要。使用本资源包中的示例即表示您确认您已了解并同意遵守这些许可中规定的所有条款和条件。请负责任地使用此资源库，使用该资源包所带来的任何风险将自行承担。
在SAC的故事里面，针对不同的应用场景，需要用到不同的可视化图表、微件等。SAP分析云提供了各式各样的图表和微件来帮助客户进行数据展示，然而面对各种各样的实际应用场景的需求，部分场景不能被完美满足。SAP 分析云的自定义微件框架允许添加你自己的自定义微件，用于提供特定的用户界面元素、数据的特定可视化方式或或其他功能。此时，客户可以通过上传自定义微件的方式来定制微件，并在故事中使用。 针对于层级结构的展示需求，基于Help文档中的自定义微件demo，我开发了一个树形的自定义微件，本篇博客主要介绍一下我从零开始实现一个自定义微件的过程以及用到的参考资料，以及对开发过程中遇到问题和经验进行分享。 点击这里查看演示视频。 本篇博文将从自定义微件介绍、自定义微件实现过程，如何在SAP分析云中上传和使用自定义微件和总结四部分进行展开，文章的总体结构如下： 自定义微件介绍 自定义微件实现过程 index.json main.js styling.js 如何在SAP分析云中上传自定义微件 总结 1. 自定义微件介绍SAP 分析云的自定义微件框架允许使用自己的自定义微件，以扩展优化故事中提供的预定义微件集。例如，如果你需要特定的用户界面元素、特定的数据可视化对象，或者预定义微件集未提供的特定功能，这将非常有用。 自定义微件能够无缝集成到 SAP 分析云的优化故事中。与预定义微件一样，自定义微件提供以下功能： 它列在“微件”菜单列表中，你可以从中将其添加到画布。 可以在画布上移动并调整大小。 它显示在左侧面板的大纲中。 它可以将脚本方法可以在用户故事中使用。 可以在设计时在 “样式设置面板”和“生成器面板”中设置自定义微件的属性值。 自定义微件的源文件由两种类型的文件组成：JSON 文件和资源文件（JavaScript 文件）。 JSON 文件 JSON文件中包含微件中的元数据、资源文件的URL引用等。 资源文件 main.js （实际的自定义微件） styling.js（自定义微件的样式设置面板） builder.js（自定义微件的生成器面板） 其中每个 js 文件是一个Web组件，制作一个自己的自定义微件从这几个文件入手即可。 2. 自定义微件实现过程 在我开发的树形自定义微件中，主要涉及到”index.json”, “main.js”, “styling.js” 三个文件。 Index.json文件 在自定义微件的JSON文件中，必须要包含的属性有以下几个： id version name newInstancePrefix webcomponents properties methods events dataBindings 这里必须要保证id的唯一性，这是你的自定义微件的唯一标识。当上传一个已存在的id的自定义微件时，系统会进行提醒，如果继续上传，将会把之前存在的相同id的微件覆盖掉。 在webcomponents中，一个Web组件对象指定了一个自定义微件的一个Web组件。对于每个Web组件对象，kind、tag和url三个属性是必要的。Kind只能是“main”，“styling”，“builer”三种，url中是web组件对应的js文件的相对位置。 注意：tag是 Web 组件的自定义元素的唯一标识，其名称必须至少包含一个连字符 （-），以便将自定义元素与常规 HTML元素区分开来。并且tag必须要和js文件中的定义一致，否则系统将找不到对应的js文件。并提示以下错误。 在我的自定义微件里面，只使用到了“main”和“styling”这两种类型组件，如果你还想自定义生成器面板的内容，还需要添加一个“builder”类型的Web组件。 在properties对象中是自定义微件的一些属性和属性的默认值。属性对象中的每个属性名称都要对应自定义微件的属性名称。例如，在properties中可以定义自定义微件的宽度、高度、节点颜色、字体大小等属性，这些属性可以作为全局变量使用。属性的值可以通过styling组件中修改，并将修改后的值传递到mian组件中重新渲染，以此改变自定义微件的样式。 Methods 对象指定自定义微件中包含的脚本方法，包括属性设置方法等。Methods 对象的每个 JSON 属性名称都是自定义微件中的脚本方法名称。例如，在我的微件中，定义setNodeFontSize方法用来设置节点的字体大小，在main.js中使用该方法，每当nodeFontSize属性的值改变时，该函数将获取到新的值并更新组件中对应的字体大小。 通过在JSON文件中定义dataBindings，可以在自定义微件中访问模型中的数据。dataBindings返回的数据主要包括两个部分： data metadata data是一个包含所有返回数据的数组，数组中的每一个对象包含一条数据（在某一个或几个“维”下对应的度量的值）。metadata中包含data中的一些“度量”和“维”的属性信息。 通过dataBindings返回来的数据的数据格式可能并不符合自定义微件所需的格式，你可以根据echarts图表的数据格式的需求重新组织数据的结构。更多有关于使用dataBindings的信息，请点击这里获取。 dataBindings返回的数据的示例如下： 有关于JSON文件中各个有效属性更详细的介绍和用法，请参阅帮助门户中相关文档。 mian.js文件 在main.js文件中是我的自定义微件的主体部分。因为我想要实现一个树形结构，我参考了echarts库中的树形组件来进行展示。通过databanding拿到数据后，我写了一个函数将数据结构转换成树形结构，正确的数据结构是组件成功展示的最关键的一步。把数据正确引入到echarts的tree组件中之后就能得到一个基础的树形展示结构，接下来可以根据自己的需要进行优化和调整。 例如在我的自定义微件中，我想要我的树形结构可以有不同方向的展示，此时会遇到每个节点label的方向需要调整的问题。因此我需要考虑到树形结构的每种分布情况并设置其标签的显示方向。例如对于从左到右分布的树，其叶子节点的标签显示在节点右侧，其他的节的标签显示在左侧；从上到下分布的树，其叶子节点的标签显示在节点下方，其他节点的标签显示在上方；其他的分布情况类似。我的节点标签显示的内容默认显示节点名称和节点对应的值，当该节点是无值节点时默认只有节点名称，当然你也可以根据自己的需求对显示内容进行调整。 正交布局效果： 径向布局效果： 在下图中可以看到树状结构的节点有空心的和实心的，空心节点表示该节点不能进一步展开，实心的节点表示点击该节点可以展开其子节点。 当我在样式设置面板中设置了阈值，树状图中值超过阈值的节点会突出显示为红色，这可以帮助我们很好的展示出不同层级结构中超过阈值的节点有哪些。 （注：我的代码中我的阈值默认值设置为1,000,000,000 ，如果你想修改初始时候的默认值，可以修改示例代码 main.js 中233行的默认值，以及 index.json 中第79行的默认值。） 在样式设置面板中设置了阈值为50,000,000，树状图中值超过50,000,000节点会突出显示为红色。 在tooltip里面的提示信息我选择在tooltip里面展示节点名称、值和单位信息。 如果你想自定义tooltip的格式，可以修改main.js中的这一部分代码。 这里需要说明一下的是，目前这个版本的树形微件我只实现了支持一个度量的版本，如果你想实现支持多个度量的树，可以在代码中添加多个series对多个度量的值进行展示。 styling.js文件 在styling.js文件中的内容控制样式设置面板中的自定义微件附加属性这一模块的内容。 在我的自定义微件中我想要实现修改树形组件的一些基本属性、更换布局设置、超过阈值的节点突出显示等功能，因此我的样式面板设置如下图所示。 布局设置分为正交布局和辐射状布局两种， 正交布局时又可以设置布局的分布方向为“左右”，“右左”，“上下“和”下上“四种。 在这里要注意的是，只有正交布局时需要设置方向和边类型，当选择径向布局时，是不需要设置这两个属性的。因此为了避免产生不必要的错误，在这里我设置了当布局设置选择“径向布局”选项时，默认将方向设置和边类型设置的选择器隐藏掉。 这里有关于节点颜色的设置，目前这个版本的自定义微件只支持手动输入一些颜色的英文名称或者是十六进制颜色值和RGB格式颜色，如“darkblue“，”#00FF00“，”RGB(0,0,255) “等。如果你想进一步进行优化，可以引入颜色选择器插件。 3. 如何在SAP分析云中上传和使用自定义微件 你可以在SAP Analytics Cloud 中上传和托管这些资源文件，以便在故事中使用自定义微件。你需要将自定义微件的JSON文件和对应的资源文件上传到SAP 分析云上。 点击故事页面中的自定义微件，并选择添加图标，分别上传JSON文件和对应的资源文件。 注意：资源文件上传时需要将文件压缩成扩展名为.zip的压缩包，并且保证.zip文件小于10MB。 在故事中，通过添加自定义微件，找到你上传的微件，将其添加到故事中。 打开生成器面板，选择你的模型并添加“度量”和“维”。 注意：你添加的维度必须要具有层级结构，并且在设置不同的层级结构时确保要勾选“包含父节点元素”，这样树形结构才会被正确显示。 在样式面板中，可以在自定义微件附加属性中修改其属性并应用。样式面板中可以修改的属性由你在styling.js资源文件中的定义决定。在树型自定义微件中，样式面板可以改变标题、根节点名称、布局设置、方向设置、连接边类型、节点类型等多个树型，用来改变该树型微件的样式。 4. 总结 以上是我实现一个树形自定义微件的全部过程，它可以应用于多种具有层级结构的数据展示和分析，例如可以用于人力资源的组织结构展示，通过树形结构展示公司各部门和岗位的层级关系，明确员工的职责，帮助管理层优化人力资源配置、调整组织架构等；生产场景中的BOM展示，利用树形结构展示产品的物料清单及其层次关系，支持生产计划和物料管理，帮助企业进行成本控制、提高生产效率等；财务报表中的科目层级结构展示，利用树形结构可以展示总账、子科目、各项费用和收入的逐级明细，帮助财务人员和管理层更直观地分析财务状况和发现潜在问题；不同地区、部门或产品线的销售业绩展示，利用树形结构展示从全球销售额逐级深入到各大洲、国家、地区的销售表现，帮助企业识别出哪些区域或产品线贡献最大，或发现销售瓶颈等。 作为第一个版本里面还有很多欠缺的内容。我将提供其源代码，如果你觉得有所帮助的话，可以下载源码参考，并在此基础上进行的修改和调整。 我在实现自定义微件过程中用到一些非常有帮助的文档，如果你想实现一个自己的自定义微件，也可以进行参考： Use Custom Widgets (Optimized) | SAP Help Portal Custom Widgets | SAP Help Portal SAP Analytics Cloud: Custom Widget Hands-on Guide – SAP Community SAP Analytics Cloud: Custom Widget & Widget Add-On… – SAP Community Your first SAP Analytics Cloud Custom Widget – Int… – SAP Community Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community Your first SAP Analytics Cloud Custom Widget – Par… – SAP Community 以上这篇文章是我作为一个新手学习和开发自定义微件的过程和一些心得，希望这篇文章对你有一定的帮助。 此示例包仅用于学习交流，不可做生产用途使用。在使用前请检查并彻底阅读其中可能使用的第三方库的许可至关重要。使用本资源包中的示例即表示您确认您已了解并同意遵守这些许可中规定的所有条款和条件。请负责任地使用此资源库，使用该资源包所带来的任何风险将自行承担。 Read More Technology Blogs by SAP articles
#SAP
#SAPTechnologyblog
+ There are no comments
Add yours