- SAP Managed Tags
1.什么是SAP 分析云微件API？
SAP 分析云（SAC）微件API 是一项强大的开发工具，允许开发者将SAP分析云故事中的图表嵌入外部应用程序。本博客将概述微件API，引导您逐步完成集成过程，并演示其如何增强应用程序的分析能力。
2.SAP 分析云微件API概览
SAP分析云微件API 支持将SAP分析云可视化对象无缝嵌入外部Web应用程序、门户系统或自定义构建系统中。借助该API，您可以实现以下功能：
- 在Web应用程序中展示交互式图表
- 以编程方式控制内容（筛选、刷新、调整大小等）
- 通过身份验证确保应用与SAP分析云间的安全通信
- 通过将分析直接嵌入桌面及Web应用程序，达到更佳用户体验
3.前提条件
在开始之前，请确保您已满足以下要求：
- 访问SAP分析云并拥有所需权限。例如：用户将能够登录SAP分析云并查看故事的访问权限
- 想要嵌入的 微件ID、故事 ID 及 租户 ID（请参考第3节了解如何获取微件ID）
- 具备JavaScript与HTML的基础知识
4.微件API功能
微件API的一些关键功能包括：
- 嵌入图表：从SAP分析云故事中集成单个或多个图表。
- 筛选与参数：以编程方式应用筛选器并变更视图
- 上下文菜单和交互：图表将是交互式的，您可以选择数据点进行筛选并应用各种交互选项。
- 跨源通信：父应用程序与SAP分析云之间的安全通信。
5.使用微件API逐步集成SAP图表
①生成嵌入链接
在SAP分析云中：
- 打开您想要嵌入的故事的编辑模式。
- 导航到您想要嵌入的微件。在您的Web应用程序中使用它。（请参阅第3节以获取微件ID）
②设置Web应用程序
这里有一个简单的HTML结构，用于将SAP分析云微件集成到网页中。
③ 了解API结构
此API支持将SAP分析云微件无缝嵌入外部应用程序。
包括三个主要元素：一个命名空间、一个函数调用及一组参数（一些是必需的，一些是可选的）。
这些是API的元素：
1.命名空间：
定义了访问API组件的范围，指定的命名空间是：**sap.sac.api.widget**
2.函数调用：
调用的主函数是：**renderWidget**
3.必需参数:
要成功渲染微件，必须提供以下参数：
调用主函数为renderWidget，必选参数：
a.容器ID（Container ID）
指定应用程序中用于嵌入微件的HTML容器（如 <div> 元素）
b.租户URL（Tenant URL）
SAP 分析云租户微件所在位置的基础 URL
示例： https://sample.tenant.cloud/sap/fpa/ui
c.SAP分析云故事ID（SAC Story ID）
包含微件的SAP分析云故事ID，要获取故事ID
请在SAP分析云中打开故事并从URL中提取。
示例URL：https://sample.tenant.cloud/sap/fpa/ui/app.html#/story2&/s2/C7D03902C194A72F5F130EC083762CCA → 故事ID：C7D03902C194A72F5F130EC083762CCA
d.微件ID
指示要嵌入的特定微件。
在编辑模式下，您可以在样式设置面板的通用属性中找到微件ID 。
例如，微件ID可能是：chart_3
在查看模式下，在微件处右键点击，选择更多选项>复制微件ID：
注：请参考SAP分析云帮助文档以编程方式获取SAP分析云故事ID和微件ID:
4.可选参数
以下参数在API中是可选的：
启用和禁用微件交互：您可以通过传递这些可选参数来禁用用户的微件交互。
注意：默认情况下，所有这些参数都设置为true。
1.enableInteraction：true/false
使用此属性，您可以启用或禁用微件中的交互。
2.enableMenu: true/false
使用此属性，您可以启用或禁用微件的上下文菜单。
3.showHeader: true/false
使用此属性，您可以启用或禁用微件的页眉。
4.showFooter: true/false
使用此属性，您可以启用或禁用微件的页脚。
示例：
6.认证与安全注意事项
为了安全通信，SAP分析云需要身份验证。根据您的设置：
- 如果您的用户已经在外部应用程序中通过了身份验证，使用基于SAML的SSO
请确保您的SAP分析云实例和外部应用程序配置为允许跨源资源共享（CORS），以实现无缝数据交换。
7.应用场景：客户门户中的嵌入式分析
试想以下方案：某银行通过客户门户为用户提供对其支出模式的实时洞察。通过使用微件 API将SAP分析云的图表嵌入门户，银行可以：
- 显示根据每个用户的交易定制的交互式仪表板。
- 允许用户直接从门户按日期或类别筛选数据。
- 发生新交易时自动刷新图表。
这种集成增强了用户体验，并使客户能够获得可操作的洞察。
参考应用：
我们已发布基于SAP分析云微件API开发的SAP Analytics Cloud PowerPoint插件，现在您可以将SAP分析云故事微件以图像形式嵌入PPT，该图像会随数据更新而动态刷新。
8.示例：使用微件API集成SAP分析云微件的网页示例
- 安装Visual Studio Code
下载链接：https://code.visualstudio.com/ - 安装"Live Server"扩展
3.在Visual Studio Code应用程序中打开示例HTML代码文件
4.在初始化displayWidget函数时添加SAP分析云租户详细信息。
5.在displayWidget函数中添加微件ID
6.点击"Go Live"按钮启动服务器，将在浏览器中运行应用程序。
7.此外，您还可以传递过滤器和变量
sap.sac.api.widget.renderWidget(
containerId,
tenant,
storyId,
widgetId,
{
filters: [
{
model: "sap.epm.Planned_Events_Sample:Planned_Events_Sample",
values: [{
dimension: "Date_5x2a25042z",
value: ["026b7dcf2350c824559b8cc00612de", "05aff8031d1c560fa0ea6a675cc894", "53a4b48d6e946faa59c35643d775c9"],
operation: 'in'
}]
},
{
model: "sap.epm.Planned_Events_Sample:Planned_Events_Sample",
values: [{
dimension: "Event_672z323k1f",
value: [""],
operation: 'notIn'
}]
},
{
model: "sap.epm.Planned_Events_Sample:Planned_Events_Sample",
values: [{
dimension: "Date_5x2a25042z",
value: ["026b7dcf2350c824559b8cc00612de"],
operation: 'notIn'
}]
}
]
},
updatedOptions
);
9.导出图表
一旦微件成功嵌入应用程序后，微件 API 将提供可选参数，用于在图表渲染完成后导出。该API的结构由命名空间、函数调用及若干参数（部分为可选）组成。
API概览
1.命名空间:
命名空间为：sap.sac.api.widget
2.函数调用:
用于导出的函数：export
3.参数 ：
containerId（必填）该参数为字符串类型，表示嵌入微件的 HTML 容器 ID。示例：若容器 ID 为 widget1，则应传递值 "widget1"。format(可选)指定导出格式的字符串。默认值是“svg”，这是目前唯一支持的格式。Options（可选）您可以使用options对象进一步配置导出，包括：Include用于控制是否显示图表的标题、副标题和页脚的对象，每个属性（标题、副标题、页脚）都是boolean。默认值：false。Size为导出的SVG设置自定义尺寸的对象。属性：高度和宽度（均为数字）默认值：当前容器的尺寸
示例：
const options = {
include: {
title: true,
subtitle: true,
footer: true
},
size: {
height: 300,
width: 300
}
}
await sap.sac.api.widget.export("widget1", "svg", options)
10.故障排查提示
- 图表未加载？确保 SAP分析云租户 URL 正确且可从 Web 应用程序访问。
- CORS 错误？验证 SAP分析云实例是否允许来自您应用程序域的 CORS。
- 认证问题？确认有效的身份验证或 SSO 设置已正确配置。
11.更多阅读与资源
原文链接: Introducing SAP Analytics cloud Widget API - SAP Community
原作者： Ashok_R
| User | Count |
|---|---|
| 58 | |
| 20 | |
| 11 | |
| 11 | |
| 7 | |
| 7 | |
| 6 | |
| 6 | |
| 6 | |
| 4 |
