行为事件示例-阿里云帮助中心

本文为您介绍行为事件示例。

功能点示例

Quick BI为行为事件提供了唤起弹窗、关闭弹窗和唤起提示等功能，调用dispatch方法即可。

唤起弹窗

dispatch一个type为'openModal'的对象，可以唤起一个弹窗，代码举例如下：

import React from 'react';

const delay = time => new Promise(res => setTimeout(res, time));

const eventMeta = {
  listener: async props => {
    // delay 1ms and go on
    await delay(1);

    props.dispatch({
      type: 'openModal',
      payload: {
        title: '简单弹窗',
        content: <div>弹窗内容</div>,
        type: 'info',
      }
    })
    
    return false;
  }
}

在触发该事件时，就会唤起一个简单的弹窗。

关闭弹窗

dispatch一个type为'closeModal'的对象，可以将刚才唤起的弹窗进行关闭，举例如下：

import React from 'react';

/**
* 自定义事件元信息
*/
const delay = time => new Promise(res => setTimeout(res, time));

const eventMeta = {
  listener: async props => {
    // delay 1ms and go on
    await delay(1);

    props.dispatch({
      type: 'openModal',
      payload: {
        title: '简单弹窗',
        content: <button onClick={() => props.dispatch({type: 'closeModal'})}>关闭弹窗</button>,
        type: 'info',
      }
    })

    return false;
  }
};

export default eventMeta;

这样就可以在点击弹窗内的按钮后关闭弹窗。

显示提示

在行为事件代码中，也可以唤起一个message信息，目前支持'info'，'success'，'error'，'warn'类型，举例如下:

import React from 'react';

/**
* 自定义事件元信息
*/
const delay = time => new Promise(res => setTimeout(res, time));

const eventMeta = {
  listener: async props => {
    // delay 1ms and go on
    await delay(1);

    props.dispatch({
      type: 'showMessage',
      payload: {
        content: '这是一个info',
        type: 'info',
      }
    })

    props.dispatch({
      type: 'showMessage',
      payload: {
        content: '这是一个success',
        type: 'success',
      }
    })

    props.dispatch({
      type: 'showMessage',
      payload: {
        content: '这是一个error',
        type: 'error',
      }
    })

    props.dispatch({
      type: 'showMessage',
      payload: {
        content: '这是一个warn',
        type: 'warn',
      }
    })
    return false;
  }
};

export default eventMeta;

配置该行为事件后，触发时，会有以下提示出现：

完整示例：根据本地存储状态发起审批弹窗

在该例子中，小A想要实现根据本地存储localstorage状态来控制仪表板、电子表格的下载权限。

步骤一：新建事件进行调试

小A需要先进入QBI > 开放平台 > 行为事件中注册事件。
由于小A想要管控所有仪表板、电子表格的下载，因此他需要注册全局生效的一个下载前事件，并将范围置为仪表板和电子表格，具体的事件配置如下所示。
注册事件后，行为事件集中管理页面就会多一条事件内容，点击调试按钮后，小A选择了一个电子表格进行调试。

步骤二：在线编辑行为事件代码

在调试界面，会唤起一个在线代码编辑器，主要包含meta.js和meta.css文件。小A通过文档了解到meta.js主要包含事件内容，meta.css包含事件相关样式。
小A开始编写事件代码，通过官方API的学习，他了解到可以通过props.dispatch唤起弹窗、关闭弹窗、显示提示，最终完成如下的事件代码：

import React from 'react';
/**
* 自定义事件元信息
*/
const delay = time => new Promise(res => setTimeout(res, time));

const handleClick = (props) => {
  localStorage.setItem('customEventSwitch', '1')
  props.dispatch({
    type: 'showMessage',
    payload: {
      content: '已发起审批，请稍后重新发起下载请求',
      type: 'info',
    }
  })
  props.dispatch({
    type: 'closeModal',
  })
}

const eventMeta = {
  listener: async props => {
    // delay 1ms and go on
    await delay(1);
    console.log('111');
    if (localStorage.getItem('customEventSwitch') === '1') {
      props.dispatch({
        type: 'showMessage',
        payload: {
          content: '已通过系统审批认证',
          type: 'info',
        }
      })
      return true;
    } else {
      props.dispatch({
        type: 'openModal',
        payload: {
          title: '系统审批',
          closeIcon: null,
          content:
            <div className='container'>
              <div>演示审批</div>
              <button onClick={() => handleClick(props)}>点击发起审批</button>
            </div>,
          footer: null,
        }
      })
      return false;
    }

  }
};

export default eventMeta;

此外，他为了调整样式，还加了一段样式代码如下：

.container {
    display: flex;
    justify-content: space-between;
    color: red;
}

编写完事件后，点击运行按钮，再点击下载后就会触发相应的事件代码。
试用后小A对该事件效果感到满意，因此他直接点击保存后进行发布。

步骤三：发布事件后进行配置

由于发布的是全局事件，因此该事件已经在范围内的所有作品上配置，在工作台点击任意的仪表板进行验证，可以看到该事件确实已经勾选上，点击下载也成功唤起了审批界面。

这时候，小A新配了一张简单的电子表格，不希望该电子表格进行审批下载。他点击编辑该电子表格后，在页面设置里找到行为事件，取消了该管控下载。

步骤四：管理事件

该事件运行一段时间后，由于业务变动，需要移除该事件，小A进入开放平台 > 行为事件，将该事件进行了失效处理。自此，各个作品内的该事件都被移除了。