工作台接入指引

本文档用于指引第三方业务系统接入WorkPlus工作台

卡片类型

工作台当前支持以下卡片类型,它们的数据来源为:

卡片类型基础定义来源业务数据来源
搜索卡片后台
Banner卡片后台后台
快捷入口卡片1后台第三方业务
快捷入口卡片2后台第三方业务
常用应用卡片后台
列表卡片1后台第三方业务
列表卡片2后台第三方业务
新闻卡片1后台第三方业务
新闻卡片2后台第三方业务
新闻卡片3后台第三方业务
新闻卡片4后台第三方业务
分类卡片后台第三方业务
自定义卡片后台

常用卡片说明

搜索卡片

搜索卡片无第三方业务数据

  • 搜索卡片的的所有数据来源于后台,无需调用客户系统的数据;
  • 大小固定;
  • 搜索卡片包含搜索功能及右边的扫一扫功能,不可定制其它功能。

Banner卡片

Banner卡片无第三方业务数据

  • 无需调用业务数据接口;
  • 大小固定;
  • Banner卡片的广告定义也在后台中进行定义;

常用应用卡片

常用应用卡片无第三方业务数据

  • 常用应用卡片的逻辑是对应用的相关编辑;
  • 无需调用业务数据接口;
  • 大小固定;

快捷方式入口卡片

该卡片有两种风格

  • 是否显示标题,内容个数,样式由后台 API 决定及返回;
  • 快捷方式支持红点显示规则
  • 调用业务系统数据,渲染 UI。

业务数据返回参考:

点击查看业务数据详情
{
  "status": 0,
  "message": "everything is ok",
  "result": {
    //卡片内容定义
    "items":[
      {
        //显示类型,文本或数字
        "show_type": "number",
        //数字值
        "number": "123",
        //标题
        "title": "待办",
        //事件类型
        "event_type": "Url",
        //点击事件值 
        "event_value": "http://www.baidu.com/todo",
        //红点请求配置
        "tip_url": "http://data/com/tip"
      },
      {
        "show_type": "icon",
        "icon_type": "Url",
        "icon_value": "http://icon.com/a.png",
        "title": "待办",
        "event_type": "Url",
        "event_value": "http://www.workplus.io/todo"
      }
    ]
  }
}

字段说明:

items元素说明:

每个item代表快捷方式中的一个显示内容:

属性描述
show_typeIcon:图标,number: 数字
number仅 show_type 为 number 时有效
title标题内容
icon_type图标类型,仅在 show_type 为 icon 时有效,值为 UrlMediaIdInner
icon_value图标值,仅在 show_type 为 icon 时有效
event_type点击事件
event_value事件值
tip_url红点规则 URL,客户端会从此 URL 请求红点的逻辑

列表卡片

该卡片有两种风格

  • 是否显示标题,内容个数,样式由后台 API 决定及返回
  • 调用业务系统数据,渲染UI

业务数据返回参考:

点击查看业务数据详情
{
    "status": 0,
    "message": "everything is ok",
    "result": {
        //列表元素定义
        "items": [{
            //标题
            "title": "细数麦当劳那些'奇特'的餐",
            //时间
            "date_time": "2018-01-12",
            //来源
            "source": "消息来源",
            //事件类型
            "event_type": "Url",
            //事件值
            "event_value": "http://www.baidu.com/todo",
            //图片类型(列表卡片2才支持)
            "icon_type": "Url",
            //图片链接(列表卡片2才支持)
            "icon_value": "http://icon.com/a.png"
        }]
    }
}

字段说明:

items元素说明:

属性描述
title列表主内容
datetime时间值
source来源
event_type事件类型
event_value事件值
icon_type图标类型,仅在 show_type 为 icon 时有效(列表卡片2才支持),值为 UrlMediaIdInner
icon_value图标值,仅在 show_type 为 icon 时有效(列表卡片2才支持)

新闻卡片

该卡片有四种风格

业务数据返回参考:

点击查看业务数据详情
{
  "status": 0,
  "message": "everything is ok",
  "result":{
    "items":[
      {
        //新闻主标题
        "title": "细数麦当劳那些'奇特'的餐",
        //新闻副标题
        "sub_title": "作为一个老牌的快餐企业,制作流程的标准化,规范化并不是其成功的唯一秘决",
        //时间
        "date_time": "2018-01-12",
        //来源
        "source": "消息来源",
        //事件类型
        "event_type": "Url",
        //事件值
        "event_value": "http://www.baidu.com/todo",
        //图片类型
        "icon_type": "Url",
        //图片链接
        "icon_value": "http://icon.com/a.png",
      }
    ]
  }
}

字段说明:

items元素说明:

属性描述
title新闻主标题
sub_title新闻子标题
date_time新闻时间
source新闻来源
event_type事件类型,值为 UrlSystem
event_value点击事件值
icon_type图标类型,值为 UrlMediaIdInner
icon_value图标值

分类卡片

分类卡片适用于组合多个列表数据

  • 分类卡片本身无业务数据,来源于后台数据;
  • 每个分类的内容才调用业务数据;
  • 分类的内容支持列表卡片新闻卡片,其返回数据参考前文。

自定义卡片

自定义卡片内容主要通过H5页面进行展示。

  • 自定义卡片的数据来源于后台;
  • 本身无业务内容。

URL 参数说明:

自定义卡片在初始化时,会加载 H5页面,但卡片本身无法提前知道卡片内容的高度等信息,允许通过以URL参数的形式来告知客户端,如下:

http://xxxx.html?custom_height=300&custom_scale=0.5&open_with_out=true
属性类型描述
custom_height浮点型自定义卡片高度
custom_scale浮点型自定义卡片高度相对宽的比例 (传 scale 优选选用,与 height 互斥)
open_with_out布尔值是否打开新的页面跳转链接

除了上述属性,同样支持带入其他参数,详情查看参数支持。

::: warning 关于自定义卡片 毫无疑问,自定义卡片是最灵活的,因为一切都通过H5页面进行展示,一个卡片就是一个WebView;但也因为该原因,会产生一些问题及约束:

  • 性能不如原生卡片;
  • 网络不稳定时,可能会导致卡片无法正常展示,白屏等;
  • 卡片高度可能会存在偏差,导致卡片内容展示不完整;
  • 不支持使用js-sdk能力;
  • 不支持离线资源。 :::

参数支持

对于工作台中的任意 URL,用户可配置参数支持,以下为支持的参数:

::: v-pre | 字段 | 描述 | | ----------------- | --------------- | | {{userId}} | 当前登录用户ID | | {{username}} | 当前登录用户名 | | {{username/name}} | 用户名/中文名 | | {{domainId}} | 域ID | | {{orgCode}} | 当前组织code,也是orgId | | {{ticket}} | 临时ticket值 | | {{language}} | 当前应用的语言版本,如enzh-CN | :::

如:

::: v-pre

http://data.com?usernmae={{username}}
// 会被替换成:
http://data.com?usename=foo

:::

国际化

国际化通过参数支持,由返回内容自行国际化,返回不同语言数据。

红点规则

对于支持红点的卡片类型(当前为快捷卡片)

系统行为值

当工作台中的event_type定义为System时,其点击行为,将会是 WorkPlus 内置的一些行为:

系统行为描述
CREATE_GROUP创建群聊打开创建群聊的页面
QRCODE_SCAN扫一扫打开应用的扫一扫页面
BING_MESSAGE必应消息打开必应消息页面
VOICE_MEETING语音视频打开音视频功能