使用Dundas BI嵌入库

内容 ［隐藏]

1.概述

Dundas BI嵌入库旨在尽可能轻松地将Dundas BI添加到现有网页或web应用程序的页面。这是一个演示如何使用Dundas BI嵌入式库的指南，它可以以两种方式使用:

  • 无需编写JavaScript即可嵌入-仅使用HTML标记，这样更简单，更易于维护。
  • 嵌入JavaScript——这允许在Dundas BI应用程序中运行脚本和挂钩事件等更高级的功能。

1.1.下载嵌入库

Dundas BI嵌入库是一个JavaScript文件，您可以使用HTML脚本标记引用它。

该文件可在以下位置找到:

[InstanceDirectory] \ www \ BIWebsite \ wwwroot \ \ \ dundas.embed.min.js嵌入的脚本

你可以把它放在你自己的网站上，或者从这个位置参考它。根据文件相对于页面的位置更新下面示例中的路径:

重要的
浏览器对嵌入HTTP跨域内容的支持正在改变，Dundas BI现在应该要么运行在HTTPS上，要么具有与父应用程序相同的URL源(协议、主机名/域和端口号)。有关详细信息和其他注意事项，请参见浏览器和嵌入产品的笔记。

2.无JavaScript嵌入

这种方法是一种快速而简单的嵌入Dundas BI的方法，不需要任何JavaScript，并且使用嵌入库作为自己创建iframe元素并设置其URL的替代方法。将这个HTML标记添加到页面中，或者在基于服务器的web应用程序中生成它，并将所需的信息指定为属性。

下面的例子嵌入了一个Dundas BI实例https://placeholder.dundas-bi-url.com，还有一个仪表盘指定的ID：

… 
…

请注意
该元素必须在浏览器的DOMContentLoaded事件触发之前添加到页面中，以便在不使用JavaScript的情况下嵌入Dundas BI。

下表描述了不使用JavaScript嵌入时可以使用的HTML属性:

属性 描述
类 类必须设置为dundas-bi-embed成为一个有效的Dundas BI嵌入式应用程序对象。
data-dundas-bi-url 指向已安装的Dundas BI实例的基本URL。例如:https://dundas.mycompany.com:8000/
data-controller-type (可选)您要嵌入的对象类型，通常与该对象的Dundas BI URL紧接在基础URL之后的部分相匹配。选项包括:指示板，计分卡，报告，SmallMultiple，幻灯片，Shortlink，MetricSet，DataCube，CubePerspective，层次结构，管理，首页。
data-file-system-id (可选)的已存在的文件ID如果将data-controller-type设置为文件类型(如仪表板或度量集)，则需要嵌入。可以不设置它以创建该类型的新文件。
data-shortlink 后的短链接值/链接吗?shortLink =链接的一部分(例如:ae6swdok5p5r3mm3m4oaguqujo)，如果data-controller-type为Shortlink，例如在使用a时共享链接。
data-logon-token-id (可选)登录令牌ID(使用代码填充)。
data-session-token (可选)会话令牌(使用代码填充)。
data-view-options (可选)显示视图(如仪表板)时的视图选项。以下是可能性:menuonly，menutoolbar，menutoolbartaskbar，没有一个，toolbaronly,或viewonly。默认情况下,viewonly在指定现有视图的ID时使用。可以不设置此选项，以便短链接使用创建短链接时选择的视图选项。
data-parametervalue-1 (可选)为视图(如仪表板)设置视图参数值的方法。您可以通过增加这些属性的数量来使用多个属性(data-parametervalue-2，data-parametervalue-3等)值的格式与传递时的格式相似Via查询字符串。例如,今天viewParameter2 = $ $。
data-urlparameteroption-1 (可选)添加其他URL参数的方式。您可以通过增加这些属性的数量来使用多个属性(data-urlparameteroption-2，data-urlparameteroption-3等)例:cultureName = - fr,或e = true在编辑模式下打开指示板。

下面的示例嵌入位于的Dundas BI实例https://placeholder.dundas-bi-url.com控件显示仪表板指定的ID。它将使用指定的登录令牌自动登录，设置两个视图参数，并将区域性设置为- fr：

… 
…

2.1.登录

关于用户如何登录Dundas BI，有几个选项可供选择:

  • 单点登录-要允许您的用户自动登录到Dundas BI，请使用本文中描述的各种选项之一单点登录(SSO)。
  • 服务器端代码登录令牌或会话令牌可以在HTML中指定，如上面的示例标记所示，通过在服务器上运行的代码来为每个登录的用户检索它。看到Dundas BI查看器集成示例Web应用程序的示例，以及文章中关于嵌入的部分单点登录(SSO)了解更多信息。
  • 手动登录-如果没有使用单点登录选项，并且没有指定有效的登录或会话令牌，用户将被提示登录，然后才能导航到指定的仪表板或文件。

3.嵌入JavaScript

与上面的方法相比，使用JavaScript的嵌入式库提供了类似的选项，但是您可以获得对嵌入式应用程序的更多控制。例如:

  • 从JavaScript设置视图参数
  • 加载不同的Dundas BI页面或刷新它们
  • 监视嵌入式Dundas BI客户端应用程序的事件
  • 在嵌入式Dundas BI客户端应用程序中运行JavaScript并获取返回的消息(如果启用)

其中一些功能可能需要在Dundas BI中为您的站点设置跨域资源共享(CORS)以对其进行授权，如下面的部分。

3.1.获取登录令牌

当不使用本文中描述的其他自动登录选项之一时单点登录(SSO)，这是常用的登录令牌或会话令牌根据用户在嵌入Dundas BI的应用程序中的现有会话自动登录用户。

重要的
在获取登录令牌或会话令牌时，最佳实践通常是在服务器上进行操作。在客户端脚本本身中指定硬编码凭据使查看页面脚本的用户可以使用这些凭据。服务器端代码的示例将在下一段中描述。

下面的示例获取一个登录令牌，用于客户机上的Dundas BI嵌入式应用程序，使用指定的凭据仅用于演示目的。有关如何使用服务器端代码安全地获取登录令牌并将其与嵌入库一起使用的示例，请参见Dundas BI查看器集成示例Web应用程序和提供的示例/登录/令牌在REST API中。有关登录令牌和会话令牌的详细信息和链接，请参见单点登录(SSO)。

… 
…  
…<身体> < !—创建Dundas BI嵌入式应用的容器—>

3.3.使用嵌入式应用程序

后创建如上所示的嵌入式应用程序对象，您可以访问其上的以下属性和方法。

3.3.1.属性

名字 描述
JsProperty controllerType

获取或设置要加载的控制器类型，该类型与Dundas BI URL后面的部分匹配。

类型:dundas.embed.ControllerType或字符串(可以为空)。预定义值包括:

dundas.embed.ControllerType.DASHBOARD dundas.embed.ControllerType.REPORT dundas.embed.ControllerType.SCORECARD dundas.embed.ControllerType.SHORTLINK dundas.embed.ControllerType.SLIDESHOW dundas.embed.ControllerType.SMALL_MULTIPLE
dundas.embed.ControllerType.METRIC_SET
dundas.embed.ControllerType.DATA_CUBE
dundas.embed.ControllerType.CUBE_PERSPECTIVE
dundas.embed.ControllerType.HIERARCHY
dundas.embed.ControllerType.ADMIN
dundas.embed.ControllerType.HOME
JsProperty dundasBIUrl 获取或设置要连接到的Dundas BI URL。例如,https://dundas.mycompany.com:8000/
类型:字符串
JsProperty fileSystemId 获取或设置文件系统条目ID如果controllerType被设置为其中一种文件类型，则显示现有文件(如仪表板、度量集等)的属性。也可以取消设置(null)以创建该类型的新文件。

类型:字符串(可以为空)
JsProperty id 获取登打士嵌入式应用程序的ID。
类型:字符串
JsProperty logonTokenId 获取或设置登录令牌ID。
类型:字符串(可以为空)
JsProperty sessionToken 获取或设置会话令牌。
类型:字符串(可以为空)
JsProperty otherUrlParameterOptions 获取或设置其他URL参数选项。例如,(新dundas.embed.UrlParameterOption(“cultureName”、“- fr”),或(新dundas.embed。UrlParameterOption(“e”,“真正的”))在编辑模式下打开指示板。

类型:Array(可以为null)， ElementType:dundas.embed.UrlParameterOption——建设:新dundas.embed.UrlParameterOption(名称、值)
JsProperty parameterValues 获取或设置要传递给视图(如仪表板)的参数值。值的格式与传递时的格式相似Via查询字符串。例如,(新dundas.embed.ParameterValue(“viewParameter2””,今天美元”）

类型:Array(可以为null)， ElementType:dundas.embed.ParameterValue -建设:新的dundas.embed。ParameterValue(名称、值)
JsProperty shortLink 控件后面的短链接值/链接吗?shortLink =链接的一部分(例如:ae6swdok5p5r3mm3m4oaguqujo)，如果controllerType为SHORTLINK，例如在使用a时共享链接。

类型:字符串(可以为空)
JsProperty viewOptions 获取或设置显示视图(如仪表板)时的视图选项。如果未设置(null)，则使用短链接中的视图选项(如果适用)或默认选项。

类型:dundas.embed.ViewOptions或字符串(可以为空)。可能的值:
dundas.embed.ViewOptions。MENU_ONLY dundas.embed.ViewOptions。MENU_TOOLBAR dundas.embed.ViewOptions。dundas.embed.ViewOptions. none dundas.embed.ViewOptions. noneTOOLBAR_ONLY dundas.embed.ViewOptions.VIEW_ONLY

例子

这个示例创建了一个Dundas嵌入式应用程序，设置了一些属性，并加载了它:

 
…

3.3.2.方法

名字 描述 例子
JsFunction 负载 根据已设置的属性加载Dundas BI嵌入式应用程序框架。 
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';var embedOptions = {dundasBIUrl: dundasBIUrl, controllerType: dundas.embed.ControllerType。DASHBOARD, fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'};//创建Dundas嵌入式应用程序对象。var dundasApp = dundas.embed。create(document.getElementById('dundasBI2')， embedOptions);// *加载应用* dundasApp.load();
JsFunction loadAndCreateShortLink 创建包含当前控件的短链接parameterValues属性设置，并使用此链接加载Dundas BI嵌入式应用程序框架，而不是直接在查询字符串中指定值。歌珥调用此方法所需的。

参数:选项(属性:logOnTokenId，sessionToken，deleteOtherSessions）

 
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';var logonToken1 = '1fb29869-b276-41ab-9cbd-098d17b675b4';var logonToken2 = 'cb316db8-5b6d-488f-8c31-fa20c8d66524';var embedOptions = {dundasBIUrl: dundasBIUrl, controllerType: dundas.embed.ControllerType。DASHBOARD, fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'， logonTokenId: logonToken1};//创建Dundas嵌入式应用程序对象。var dundasApp = dundas.embed。create(document.getElementById('dundasBI2')， embedOptions);var logOnOptions = {logOnTokenId: logonToken2, deleteOtherSessions: true};// *加载应用* dundasApp.loadAndCreateShortLink(logOnOptions);
加载

Dundas BI嵌入式应用程序首次加载时的处理。

参数:loadedFunction(函数)

 
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';var embedOptions = {dundasBIUrl: dundasBIUrl, controllerType: dundas.embed.ControllerType。DASHBOARD, fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'};//创建Dundas嵌入式应用程序对象。var dundasApp = dundas.embed。create(document.getElementById('dundasBI2')， embedOptions);// *向加载的函数传递一个函数* dundasApp.loaded(function() {alert('Dashboard is loaded ');}）;//加载应用程序dundasApp.load();
准备好了 处理Dundas BI嵌入式应用程序在页面加载后准备就绪的情况。歌珥调用此方法所需的。

参数:readyFunction(函数)

 
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';var embedOptions = {dundasBIUrl: dundasBIUrl, controllerType: dundas.embed.ControllerType。DASHBOARD, fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'};//创建Dundas嵌入式应用程序对象。var dundasApp = dundas.embed。create(document.getElementById('dundasBI2')， embedOptions);// *向ready函数传递一个函数* dundasApp.ready(function() {alert('Dashboard is ready ');}）;//加载应用程序dundasApp.load();
刷新 刷新Dundas BI嵌入式应用程序内容。 
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';var embedOptions = {dundasBIUrl: dundasBIUrl, controllerType: dundas.embed.ControllerType。DASHBOARD, fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'};//创建Dundas嵌入式应用程序对象。var dundasApp = dundas.embed。create(document.getElementById('dundasBI2')， embedOptions);// *刷新Dundas BI嵌入式应用* dundasApp.refresh();
runScript 在浏览器中的Dundas BI嵌入式应用程序中运行JavaScript。歌珥调用此方法所需的。

参数:脚本(字符串)isASync(布尔,可选)，messageReceivedFunction(功能,可选)

 
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';var embedOptions = {dundasBIUrl: dundasBIUrl, controllerType: dundas.embed.ControllerType。DASHBOARD, fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'};//创建Dundas嵌入式应用程序对象。var dundasApp = dundas.embed。create(document.getElementById('dundasBI2')， embedOptions);dundasApp。准备好了(function (e) { // * Pop up a hello ready dialog. dundasApp.runScript( "var viewService = " + " dundas.context.getService('ViewService'); " + "viewService.showSignal(" + "'Ready'," + "dundas.view.NotifyType.INFO," + "'Hello Ready'" + ");" ); // * Run script and send message back, // and handle it with function that accepts message. dundasApp.runScript( "dundas.embed.sendMessageToDundasEmbeddedApplication(" + "dundas.context.currentSessionId" + ");", false, function (message) { alert(message.detail); } ); });

3.3.3.跨域资源共享(CORS)

CORS必须通过登打士BI为您的网站启用配置设置如果您想在嵌入Dundas BI的页面上从您自己的JavaScript执行上述某些嵌入库函数。其中包括监听Dundas BI的客户端准备好了事件或从您自己的页面传递JavaScript以在浏览器中的Dundas BI中运行，如上表所示。如果您想使用嵌入库的方法，即使您的页面的URL和Dundas BI的URL具有相同的来源(协议、主机名/域和端口号)，也应该设置此设置。CORS还授权页面从浏览器对Dundas BI服务器进行REST调用，如在Dundas BI中使用跨域资源共享。

重要的
浏览器对嵌入HTTP跨域内容的支持正在改变，Dundas BI现在应该要么运行在HTTPS上，要么具有与父应用程序相同的URL源(协议、主机名/域和端口号)。有关详细信息和其他注意事项，请参见浏览器和嵌入产品的笔记。

去管理在主菜单左侧的Dundas BI。

必须以管理员身份登录
必须以管理员身份登录

扩大设置并选择配置。

展开Setup并单击Config
展开Setup并单击Config

选择显示高级设置的选项，并在Web应用程序分类，选择和编辑设置CORS(跨域)起源。

选择编辑的价值，输入URL起源例如，将嵌入登打士的页面https://domain.com或http://hostname:8000，然后单击对话框底部的提交按钮。您也可以按照对话框中的说明添加多个域。

配置歌珥
配置歌珥

请注意
在设置原点时，不要在路径的末尾或任何部分包含斜杠。

这让Dundas BI知道您指定的源/域是您的，并且被授权从该源访问浏览器中的Dundas BI REST API，如果与Dundas BI的源不同，或者从任何源(即使与Dundas BI相同)访问您的页面的JavaScript，以传递JavaScript在Dundas BI嵌入式客户端应用程序中运行或监控其页面的时间准备好了。未列出或包含的任何其他网站将被浏览器和Dundas BI阻止执行这些功能。

3.3.4.使用视图参数

在Dundas BI嵌入库中定义视图参数的方式与通过查询字符串。下面的示例将视图参数设置为一个值，然后加载Dundas嵌入式应用程序。

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';文档。addEventListener(“DOMContentLoaded”内,函数(事件 ) { // ***************************************************************************** // 它通常是最佳实践得到服务器的登录令牌。//凭据不应该直接在脚本中指定，除非它们应该//免费提供给用户。// ***************************************************************************** dundas.embed.logon。getLogonToken(dundasBIUrl， {"accountName": "viewer"， "password": "1234"， " iswindowlogon ": true}， function(getLogOnTokenResultData) {var dundasApp = dundas.embed. getLogonToken(dundasBIUrl， {"accountName": "viewer"， "password": "1234"， " iswindowlogon ": true}， functioncreate(document.getElementById('dundasBI2')， {dundasBIUrl: dundasBIUrl, controllerType: dundas.embed.ControllerType. dundas.embed. dundasBI2')。DASHBOARD, fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'， logonTokenId: getLogOnTokenResultData。logOnToken});dundasApp。parameterValues =[//对象通过传递名称创建，//然后以相同的方式格式化值//将通过查询字符串new dundas.embed定义。ParameterValue(//视图参数的名称"viewParameter2"， //将以//与通过查询字符串传递相同的方式格式化传递的值。“啊!”+ 25000 +“~”+ dundas.embed.token .basicOpen_range)]; dundasApp.load(); } ); });

请注意
欲了解更多信息，请访问:通过查询字符串传递参数值。

的值中添加了令牌帮助器ParameterValue对象。

基本

dundas.embed.token .basic. default dundas.embed.token .basic。dundas.embed.token .basic. open_range

SingleDate

dundas.embed.tokens.SingleDate。BEGINNING_OF_CURRENT_DAY dundas.embed.tokens.SingleDate。BEGINNING_OF_CURRENT_MONTH dundas.embed.tokens.SingleDate。BEGINNING_OF_CURRENT_QUARTER dundas.embed.tokens.SingleDate。BEGINNING_OF_CURRENT_WEEK dundas.embed.tokens.SingleDate。BEGINNING_OF_CURRENT_YEAR dundas.embed.tokens.SingleDate.END_OF_CURRENT_YEAR

DateRange

dundas.embed.tokens.DateRange。CURRENT_DAY dundas.embed.tokens.DateRange。CURRENT_MONTH dundas.embed.tokens.DateRange。CURRENT_QUARTER dundas.embed.tokens.DateRange。CURRENT_WEEK dundas.embed.tokens.DateRange。CURRENT_YEAR dundas.embed.tokens.DateRange。MONTH_TO_DATE dundas.embed.tokens.DateRange。PREVIOUS_DAY dundas.embed.tokens.DateRange。PREVIOUS_MONTH dundas.embed.tokens.DateRange。PREVIOUS_QUARTER dundas.embed.tokens.DateRange。PREVIOUS_WEEK dundas.embed.tokens.DateRange。PREVIOUS_YEAR dundas.embed.tokens.DateRange。今天dundas.embed.tokens.DateRange.YEAR_TO_DATE . dundas.embed.tokens. daterange

3.3.5.URL路径长度限制

如果URL查询生成超过2083个字符(例如由于视图参数)，就会发生错误。为了解决这些浏览器限制，您应该创建一个短链接，然后加载Dundas BI应用程序。下面的示例使用两个登录令牌来创建一个短链接并加载Dundas BI嵌入式应用程序:

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';文档。addEventListener(“DOMContentLoaded”内,函数(事件 ) { // ***************************************************************************** // 它通常是最佳实践得到服务器的登录令牌。//凭据不应该直接在脚本中指定，除非它们应该//免费提供给用户。// ***************************************************************************** var logOnTokenOptions ={"帐号名称”:“观众”,“密码”:“1234”,“isWindowsLogOn”:假};//获取两个登录令牌:一个用于生成短链接，另一个用于//使用短链接加载。dundas.embed.logon。getLogonToken(dundasBIUrl, logOnTokenOptions, function (logonTokenResultData1) {dundas.embed.logon。getLogonToken(dundasBIUrl, logOnTokenOptions, function (logonTokenResultData2) {var dundasApp = dundas.embed.create(document.getElementById('dundasBI2'));dundasApp。logonTokenId = logonTokenResultData1.logOnToken; dundasApp.dundasBIUrl = dundasBIUrl; dundasApp.controllerType = dundas.embed.ControllerType.DASHBOARD; dundasApp.fileSystemId = '460ebfa5-116a-489b-9440-87e1c18ef957'; dundasApp.parameterValues = [ new dundas.embed.ParameterValue( "viewParameter2", "!" + 25000 + "~" + dundas.embed.tokens.basic.OPEN_RANGE ) ]; var logOnOptions = { 'logOnTokenId': logonTokenResultData2.logOnToken, 'deleteOtherSessions': true }; dundasApp.loadAndCreateShortLink(logOnOptions); } ); } ); });

4.托管登打士嵌入库文件

你也可以下载或参考dundas.com上的Dundas嵌入库，网址如下:

请注意
速度和正常运行时间不能保证。建议您将Dundas嵌入库放在您自己的CDN上。

5.另请参阅

跟我们谈谈:

Dundas数据可视化公司
热维斯路400-15号
加拿大安大略省多伦多
M3C 1日元

北美:1.800.463.1492
国际:1.416.467.5100

登打士服务时间:
电话:美国东部时间周一至周五上午9点至下午6点
电子邮件:美国东部时间周一至周五上午7点至下午6点