织信低代码平台开发文档

Appearance

富文本 ​

概述 ​

在织信的富文本(html)中可以使用类似JUEL的表达式渲染变量，并且可以设置循环(for)和条件显示(if)、富文本中的标签也可以单独设置样式。通过以上特性可以配置出多种样式的复杂内容。以下几个场景会使用到富文本。

  • 数据表的静态文本字段
  • 卡片视图的渲染
  • 打印模板
  • 自动化打开富文本对话框步骤

富文本中插入表达式 ​

在富文本中使用${}语法插入表达式，以下是一个例子

模板

js
今天是${date},天气${weather}

数据

js
{
    date:'2022-12-22',
    weather:'晴'
}

渲染结果

今天是2022-12-22,天气晴

循环 ​

对于每一个标签都可以使用数据绑定功能绑定循环的变量，循环的变量必须是数组类型，绑定变量时可同时设置在循环体中每个元素的变量名。 下面是一个循环的例子。

模板，假设数据绑定在整个标签上，绑定的变量为list,循环变量名为weekday

今天是周${weekday}

数据

js
{
   list:[1,2,3,4,5]
}

渲染结果

今天是周1
今天是周2
今天是周3
今天是周4
今天是周5

条件显示 ​

对于每一个标签都可以使用数据绑定功能绑定条件显示变量，只有当条件显示变量的值等于true时才会显示该元素

样式 ​

对于每一个标签都可以使用数据绑定功能绑定显示样式，样式的内容为css规范中的样式，以下是一个样式的例子

css
background:#ff0000;color:#fff;font-size:14px;

图片 ​

在img标签上可通过数据绑定功能设置图片的src属性，通过使用表达式动态的设置src属性可以实现图片的动态渲染，例如展示来自于数据表中附件字段的图片。

二维码和条码 ​

通过调用Misc.barcodeURL和Misc.qrcodeURL方法可以返回条码和二维码图片的BASE64编码值，将此编码设置到img标签的src属性上就可以实现条码和二维码的展示。

使用示例 ​

以下例子展示在仪表盘卡片富文本卡片中使用富文本实现动态绑定数据

插入表达式，动态设值 ​

点击主菜单数据绑定

image-20221128170518704

在弹出窗口中编写需要的表达式

如${Misc.formatDate(Data.sysdate(),'yyyy-MM-DD HH:mm:ss')}

数据绑定 ​

卡片数据源可以来自自动化或表达式计算，示例演示以表达式计算

定义表达式计算数据

json
${
  {
    "user": "李明",
    "age": 20,
    "image": "https://next.informat.cn/img/avatar/pic18.png",
    "list": [
      { "id": "1", "school": "xxxx小学", "date": "2002-06-28" },
      { "id": "2", "school": "xxxx中学", "date": "2008-06-28" },
      { "id": "3", "school": "xxxx大学", "date": "2011-06-28" },
      { "id": "4", "school": "xxxx博士", "date": "2015-06-28" }
    ]
  }
}

在富文本中添加一个表格 ​

image-20221128173147650

点击主菜单下的数据绑定绑定数据

循环列表

弹出窗口中的大纲目录找到表格的tr标签。选中后左侧也会依据选中自动高亮当前行。点击右侧属性页签

image-20221128173406189

完善表格行循环属性的值。如下图

image-20221128173941279

设置表格列数据。如下图

image-20221128174012391

image-20221128174031408

通过使用循环属性可是富文本渲染内容动态展示基于数据的行。

image-20221128174134247

动态样式 ​

打开数据绑定，找到表格的tr标签，设置样式。这里的样式是指html的style属性下的内容，style可参考

如示例，设置条纹样式

json
${
  item.id % 2 == 1 ? 'background-color:#efefef;' : 'font-weight:bolder;color:#3064f5;'
}

image-20221128175123622

设定完成后，则可得到渲染的动态内容如图。

image-20221128175157049

条件判断展示 ​

打开数据绑定，找到表格的tr标签，设置条件展示。

如设置数据项中id等于1的不展示

image-20221129113944489

渲染后则得到

image-20221129114002418