1. 脚本基础

了解DWF脚本并利用其开展工作，要点在了解运行环境，表单，数据等方面，DWF为脚本开发者提供的辅助变量，这些辅助变量是DWF保留的一些关键字。

1.1 全局入口

首先，要介绍的是DWF所有保留字的总入口

• this：全局入口，DWF脚本中的顶层保留字，包含了所有与扩展有关的函数与变量。

1.2 环境变量

在了解了全局入口之后，可以通过this.【保留字变量】的方式进一步访问到更深层次的变量或方法，例如前端浏览器环境信息变量如下所示：

• this.env： 包含了DWF前端的上下文信息，是一个JSON对象，包含如下属性：
  • serverIp：字符串，在浏览器地址栏输入的DWF服务器位置
  • serverPort：字符串，在浏览器地址栏输入访问DWF服务器的端口号
  • appConfig[]：键值对，包含了在DWF配置文件中记录的配置项

图-全局信息变量取值的对应关系示意

1.3 用户信息

接下来介绍一下当前登录用户信息变量，如下所示：

• this.user：包含了当前登录用户的基本信息
  • oid：字符串，当前登录用户在内部的唯一代号
  • userName：字符串，用户登录DWF的账号
  • displayName：字符串，用户的中文显示名
  • token：字符串，用于访问其他网站的令牌
  • userGroups：数组，当前用户所属的直接用户组

图-用户信息的保留字和对应关系

1.4 消息弹框

最后介绍一下如何控制弹出消息提示

•  this.msgbox对象，包含了标准弹框显示，内部包含常用的三个函数，如下所示：
  • success(‘已成功保存!’)；//表示操作成功的提示！
  • info(‘’请填写名称后再保存!)；//表示一般性提示！
  • error(‘’保存过程出现异常:错误原因...!)；//表示错误类型类型提示

图- 消息弹框示意图

1.5 前端脚本调试

前端脚本可以通过console.log()进行调试，比如：

console.log(this.user);

在脚本中添加这段代码，log函数中填入需要查看的变量或需要显示的信息，打开浏览器的开发模式（如Chrome浏览器为快捷键F12）中的console标签即可查看输出内容。

1.6 表单主动刷新

如果表单内容需要变化，可以通过this.freshData()实现主动刷新，此外this.freshData还有一个带查询条件的版本，this.freshData(query)，可以控制全局查询条件，在关于查询条件的编写方法后续章节中介绍。

2. 脚本案例:设备管理

现在，进入建模工具，点击实体类表单，展开设备表单，打开多设备列表表单（MultiAssets）

在设备列表表单上增加一个按钮控件，新增一个操作，在动作中选择implement动作，表示基于脚本扩展的操作定义，如下所示：

图-脚本类型操作的脚本示例

在弹出的对话框中点击前端脚本，输入如下代码

代码如下：

clientscript:
console.log(this, 'DWF前端脚本入口');
this.msgbox.info('hello world!');
console.log(this.user, '当前登录用户');
this.msgbox.info(`hello ${this.user.displayName}!`);
console.log(this.env, '上下文变量');
this.msgbox.info(`hello ${this.user.displayName} from ${this.env.serverIp}`);

在这段脚本中，clientscript: 是前缀关键字，表示这段代码在应用前端执行，msgbox中的 `${...}` 语法是JavaScript支持的转义替换功能，在 `...` 符号范围内，${...} 中的变量被转变为具体取值，与其它字符串内容直接拼接。

图-消息弹框示意图

3. 小结

本节主要介绍DWF前端脚本的总入口，以及配套的全局变量，包括：

• this.env ; //当前上下文的环境变量
• this.user ; //当前登录用户的变量
• this.msgbox ; //用于显示弹框的变量
• console.log ; //用于前端调试时输出日志的函数

同时，这章结合一个最简单的例子在设备列表中通过配置按钮和脚本类型操作的方式，演示了这些变量的简单用法。

4. 附件