Smartbi Insight V10帮助中心
页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

版本 1 下一个 »

仪表盘二开入门文档1.0.0

安装：


值得注意的是 原本扩展包基础上增加二开扩展包

扩展包环境安装详情:

https://wiki.smartbi.com.cn/pages/viewpage.action?pageId=52626670

附件下载：（扩展包和build.xml）

扩展包：https:xxxxx
build.xml:xxxxx

将二开扩展包环境wepbackZip解压缩放到src目录下，与web 同级。

更换build.xml文件

效果如下：

添加仪表盘组件示例

需求场景：

在仪表盘组件工具中，新增一个组件，组件中显示一个简单的文字hello。

效果如下：




步骤如下：

  1. 在SmartbiPluginsApp/webpack/src/plugins/addExtenders下创建组件文件夹,添加文件夹HelloView并在文件夹下创建index.js及HelloView.vue


  1. 在index.js文件中实现providerMetaInfo方法，返回的是一个对象，具体对象的属性可以参考仪表盘组件接口文档 V1.0.0


JavaScript
import HelloView from './HelloView.vue'

const providerMetaInfo = () => {
return {
name: 'Hello', // 组件名称
type: 'hello', // 组件类型
svg: 'db-left-widget__chart-pie',
icon: 'sx-icon-widget-chart icon-16',
entry: { // 组件入口，可以从仪表盘工具栏中直接添加（不配置就只能通过智能配图切换出来）
title: 'Hello入口', // 在组件入口中显示的名称，不填显示组件名称
order: 15, // 组件入口中的顺序，默认放在最后
group: { // 分组，不配置放到默认分组
id: 'basic' // 分组标识
}
},
// 组件文件
portletImplement:HelloView
}
}

export default {
providerMetaInfo
}
  1. 在HelloView.vue中编写自己的业务代码


HTML
<template>
<div>hello</div>
</template>
<script>
export default {
name: 'hello'
}
</script>


扩展仪表盘示例

需求场景：

在仪表盘预览菜单栏，点击工具栏弹出hello

效果如下：

步骤如下：

  1. SmartbiPluginsApp/webpack/src/plugins/modifyExtenders下创建组件文件夹 下面以仪表盘预览菜单栏为例，添加文件夹SXExtension，并在文件夹下创建index.js及Extender1.js两个文件。
  2. 在index.js文件中实现provdieMetaInfo方法，Extender1导出的是一个EditorMetaInfo对象


JavaScript
import Extender1 from './Extender1'
const provideMetaInfo = {
// 二开文件
implement: Extender1
}
export default {
provideMetaInfo
}
  1. 在Extender1文件中， 实例化二次接口仪表盘菜单初始化事件(预览模式下)onFlexMenuInit，供iDashboard仪表盘接口对象和iFlexMenu仪表盘菜单接口对象。
  • Extender1.js


JavaScript
const extendObject = {
dashboard: {
onFlexMenuInit (iDashboard, iFlexMenu) {
iFlexMenu.addItem({
id: 'Custom',
icon: 'sx-icon-menu',
label: 'PageInfo',
color: 'rgba(97, 133, 199, 0.95)',
handler () {
console.log('hello')
}
})
}
}}

export default extendObject


综上就可以完成一个简单的组件添加了，如果你想更加复杂的组件开发可以参考仪表盘组件接口文档 V1.0.0

基于场景的教程：（如果想要开发更加复杂组件的话）

仪表盘组件开发场景

其他资源

仪表盘组件接口文档
仪表盘二开外部资源使用文档

  • 无标签