FAQ中心
页面树结构
转至元数据结尾
转至元数据起始

一、概述

1、仪表盘宏代码的作用

在交互仪表盘中可以添加各式各样的组件，同时基础的配置有可以筛选、跳转、下钻等多种交互功能。而仪表盘宏可以在原本仪表盘的基础上进一步满足个性化的需求，提供了丰富的接口来适应不同的使用场景。

2、操作入口

仪表盘宏入口：设置面板->交互->宏管理->设置

二、仪表盘宏模块

1、类型

  • 客户端宏

2、对象

  • 仪表盘

    • 控制整个仪表盘页面上的组件、刷新、导出、工具栏等

  • 组件

    • 控制组件自身的加载、显示、刷新、导出等

    • 不同的组件有不同的宏接口对象

3、宏事件

  • 仪表盘

    • onRender(每次渲染完成后)

  • 组件

    • onBeforeRender(组件渲染前)

    • onAfterRender(组件渲染后)

  • 执行顺序

    • 仪表盘页面定义加载->仪表盘(每次渲染完成后)->组件加载->(组件渲染前)->渲染组件->(组件渲染后)->其他逻辑

4、宏代码编辑区

  • main函数funcation main(...)

    • main函数是宏代码的入口函数，不允许删除

  • 仪表盘：IPage，组件：(IPage，组件对象)

三、仪表盘宏示例

1、需求场景

仪表盘上画出了各个指标的时间趋势图和季度占比图，希望能够有一个按钮来统一进行切换趋势图和占比图，除去这个之外还希望有单独点击切换指标的趋势图和占比图的交互功能。

2、代码示例

  • 宏模块

类型对象事件
ClientSide(客户端宏)portlet(参数)onBeforeRender(组件渲染前)

  • 示例代码

function main(page: IPage, portlet: IFilterPortlet) {
    let tabPortletNameArray: Array<string> = ["销售量tab","销售额tab"]
    // 获取当前参数值
    portlet.setFilterValueChangeHandler((value) => {
        for (index in tabPortletNameArray) {
            changeTab(page,tabPortletNameArray[index],value)
        }
    })
​
}
​
function changeTab(page: IPage, tabPortletName: string,value:Array<string>) {
    let tabPortletArray: Array<IStaticTabsPortlet> = page.getPortletsByTitle(tabPortletName);
    if (!tabPortletArray || !tabPortletArray[0]) {
        return;
    }
    let tabPortlet: IStaticTabsPortlet = tabPortletArray[0];
    if (value && value[0]) {
        tabPortlet.setActiveTabName(value[0]);
    }
​
}

  • 关键对象方法

    • 设置筛选器参数监听器：portlet.setFilterValueChangeHandler

    • 根据标题名称获取组件对象：page.getPortletsByTitle

    • 切换指定tab页：tabPortlet.setActiveTabName

  • 参考示例

四、仪表盘宏接口

1、概述

仪表盘宏需要使用TypeScript进行编写，提供的均为TypeScript接口。TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。

2、组件接口

3、工具接口

  • ISmartbiXUtils

    • 是仪表盘上内置的工具类接口，提供多种通用方法，包括base64转码、判等、日期格式化、获取Json属性等。

五、视频教学

仪表盘宏入门：https://my.smartbi.com.cn/edu/course-127

  • 无标签