使用JavaScript创建自定义商业智能导航体验

实现商业智能(BI)项目需要经过许多步骤,例如选择正确的度量标准、为仪表板创建正确的设计、决定如何最好地向用户交付这些结果,等等。然而,BI系统的成功取决于最终用户对其的采用;更具体地说,是希望快速导航到仪表板并查看仪表板以进行分析的用户。因此,为用户提供导航到他们喜欢的内容的选项就变得至关重要了。

Dundas BI提供了多种方式来定制这种体验,通过不同的导航方法,可以根据用户的喜好进行设置如本文所述。但是,如果可用的方法不足以满足您的需求,或者您需要进一步简化用户可访问性的方法,则可以通过通过Dundas BI的api访问内容并为用户创建自定义导航来定制体验。

在过去,我写过一个这样的方法使用api来构建自定义用户界面。在那篇文章中讨论的示例展示了如何通过使用REST API调用来检索系统内的不同内容对象Python数据生成器。但是,您并不局限于这种方法。您还可以通过查询Dundas BI File System来使用JavaScript API访问内容,以获得项目和仪表板列表。这允许你创建一个自我引用的导航系统;这种查询方法还确保了基于用户的安全性。我将在本博客中更详细地讨论这种方法。

实现

为了实现这一点,我们将使用一个下拉列表,并用系统中的项目列表填充它,并将它们显示在使用HTML Label控件构建的表中。将下拉菜单上的选择更改为其他项目将更改表中的显示。

首先,添加一个HTML标签到你的仪表板,并设置HTML标签文本如下:

<时尚>

表{

Font-family:宋体;

border-collapse:崩溃;

宽度:100%;

光标:指针;

}

d, {

边框:1px实心#dddddd;

text-align:左;

填充:8 px;

}

tr: nth-child(甚至){

background - color: # dddddd;

}

> < /风格

. 0选择项目

这个HTML Label用于构建显示仪表板列表的表。请相应更改尺寸。

接下来,从组件列表中添加一个下拉列表,并将脚本名称更改为'dropDownListProjects'。

仪表板的Ready动作,添加以下脚本,将系统中的所有项目加载到下拉列表中:

var projectService = dundas.context.getService(" projectService ");

var def = projectService.getAllProjects();

def.done(函数(项目){

如果项目&&项目。长度> 0){

Var list = [];

var item = new dundas.controls.DropDownListItem();

项。title = "选择项目";

list.push(项);

(我= 0;< projects.length; + +)

var item = new dundas.controls.DropDownListItem();

项。title = projects[i].friendlyName;

项。Value = projects[i].id;

list.push(项);

调试器;

}

dropDownListProjects。Items = list;

}

});

def.fail(函数(){

警报("加载项目失败");

});

下拉列表的选择更改动作,添加以下脚本,该脚本查询Dundas BI文件系统并生成下拉菜单中所选项目中的所有仪表板列表。仪表板显示在HTML Label中构建的表中。

请注意,在最后还有一个导航组件,它在单击时将用户带到仪表板。将on-click事件中的' your_instance '更改为指向您的Dundas BI仪表板实例。

//从下拉列表中获取选中的项目

var selectedItems = dropDownListProjects.items。filter(function (item){返回item. isselected;});

如果设置selecteditem[0]。title == "选择项目")

返回;

}

//获取必要的Dundas BI服务的引用

var service = dundas.context.getService("FileSystemService");

var viewService = dundas.context.getService(" viewService ");

//创建查询

var def = service.queryEntries({

entryId:设置selecteditem [0] value,

pageNumber: 0,

页大小:150

orderBy:(

新dundas.filesystem.OrderBy ({

“fileSystemQueryField”:dundas.filesystem.FileSystemQueryField.LOCATION,

“sortDirection”:dundas.SortDirection.ASCENDING

}),

新dundas.filesystem.OrderBy ({

“fileSystemQueryField”:dundas.filesystem.FileSystemQueryField.NAME,

“sortDirection”:dundas.SortDirection.ASCENDING

}),

],

过滤器:[

新dundas.filesystem.QueryFilterRule ({

“字段”:dundas.filesystem.FileSystemQueryField.OBJECT_TYPE,

“操作符”:dundas.QueryFilterOperator.EQUALS,

“价值”:dundas.ObjectType.DASHBOARD

})),

“queryOptions”:dundas.filesystem.FileSystemQueryOptions.RECURSIVE_QUERY

});

//文件系统查询回调的延迟函数

def.done(函数(文件)

If (files != null && files。长度> 0){

displayFiles(文件);

}

});

def.fail(函数(){

警报('无法查询仪表板');

});

//用于将数据绑定到数据网格。将on-click事件中的'your_instance'更改为指向您的Dundas BI仪表板实例

函数displayFiles(文件)

var htmlContent = '< the >Dashboard< the >Last Update';

(我= 0;< files.length; + +)

Var row = "

http://your_instance/Dashboard/ {2} ? e = true&vo = viewonly\ " > < td > {0} < / td > < td > {1} < / td > < / tr >“.format(文件[我].friendlyName文件[我].lastModifiedTime.toLocaleDateString(),文件[我].id);

htmlContent = htmlContent + row;

}

htmlContent = htmlContent + '

';

调试器;

$ (" # projectContainer ") . html (htmlContent);

}

结论

如您所见,我们可以使用File System服务在Dundas BI中获取内容,并以更自定义的方式显示给用户。这里讨论的案例是一个简单的用例,主要的收获是看到如何使用JavaScript在系统中创建内容。我们总是可以用不同于这里所示的方式来显示内容(例如,显示更多字段,添加更多过滤器来限制显示,等等)。

请注意,使用Python Data Generator的REST API方法提供了一种从数据立方体获取数据并使用Dundas BI的可视化(如表)显示数据的方法,并且允许更多选项与内容交互,如排序、过滤等,但是需要Python编程语言的知识才能理解和实现它,而这里展示的方法可以纯粹使用JavaScript完成。

打印