CookBook

IM-BloomMaker定制脚本的使用方法和从$variable的取得、代入的方法

投稿日:2019-07-31更新日期:

此CookBook中,介绍了IM-BloomMaker的Action之一的定制脚本的使用方法和$从variable(变量)的取得及代入的方法。
实际制作的同时示例页面进行定制脚本和$variable解说。

完成图片

是在此CookBook生成的示例页面。

  • 设计器画面

  • 实际的画面

动作内容如下所示。

  1. 在复选框未被选择一个也状态按下「Execute」按钮后,显示错误消息。
  2. 与所选择的复选框状态下按下「Execute」按钮,显示确认对话框。
  3. 和按下确认对话框的OK显示已完成的消息。
  4. 显示和按下确认对话框的取消取消了引起的消息。

完成示例

请使用下述链接下载完成示例。

画面示例导入文件: cookbook_163287.zip
请导入IM-BloomMaker的导入画面。

请访问以下URL在本地环境中显示时,。
http://localhost:8080/imart/bloommaker/designer/im_cookbook_163287?css-framework=imui
此外Base URL为以下的部分,请适当变更了与环境相符。
http://localhost:8080/imart

食谱

示例页面的创建过程如下所示。

  1. 元件配置在页面
  2. 处理宣布必要的变量,配置的元件相关联
  3. 创建Action,记述定制脚本

1. 元件配置在页面

  • 请从元件托盘的「重复」「框(重复)」配置在页面。

  • 请配置在元素托盘的从「表单部件」先前配置了「复选框」「框(重复)」中。

  • 请从元件托盘的「表单部件」「按钮」配置在页面。
    配置后,请在属性选项卡的value输入「Execute」。

2. 处理宣布必要的变量,配置的元件相关联

  • 确认变量选项卡下拉列表中选择了「变量」,请JSON编辑器中粘贴以下JSON创建变量。

  • 按下变量生成后,变量树的「checkResult」的编辑按钮打开变量编辑器,请值的类型变更成「真伪值」,按下OK按钮。
    同样,「rtnConfirm」的值的类型,请变更「真伪值」。

  • 按下页面中配置了「框(重复)」,请在属性选项卡的「list」属性设置为「$variable.userName」。

  • 按下页面中配置了「复选框」,请在属性选项卡的「textContent」属性设置为「$variable.userName[$index]」。

    此外,关于$index 详情的文章

  • 继续,请在「value」属性设置为「$variable.userName[$index]」。

  • 继续,请在「checked」属性设置为「$variable.checkStatus[$index]」。

3. 创建Action,记述定制脚本

ⅰ. 创建「Execution」Action
  • 按下Action选项卡的「新建」按钮打开Action编辑器,请在Action名输入「Execution」。

  • 左侧窗格的「Action」→「标准」从执行「定制脚本」拖放右窗格中,请输入以下代码。

定制脚本,可通过JavaScript语言记述处理。
但是,不能DOM的操作,敬请注意。

在定制脚本内记述和$variable.变量的键名来getter及setter经由可以访问变量中。
请注意不是参照**。

常数/输入时如下所示,请记述。
$constant.常数的键名
$input.输入的关键名称

  • 左侧窗格的「Action」→「标准」中显示「消息□」拖放到执行右窗格的「定制脚本」下,如下所示,请设定。
设定项目 设定内容
显示消息□ $variable.successMessage
点击,关闭标志(任意)
关闭时间(毫秒)(任意) 3000

  • 左侧窗格的「执行条件」→「标准」从「上述定制脚本的返回值为true时」拖放到显示右窗格的「消息□」,请输入以下代码。

  • 左侧窗格的「Action」→「标准」中显示「错误消息□」拖放到显示右窗格的「消息□」下,如下所示,请设定。
设定项目 设定内容
显示错误消息□ $variable.cancelMessage
点击,关闭标志(任意)
关闭时间(毫秒)(任意) 3000

  • 左侧窗格的「执行条件」→「标准」从「上述定制脚本的返回值为true时」拖放到显示右窗格的「错误消息□」,请输入以下代码。

  • 请OK,按下关闭Action编辑器。
ⅱ. 创建「Check」Action
  • 按下Action选项卡的「新建」按钮打开Action编辑器,请在Action名输入「Check」。

  • 左侧窗格的「Action」→「标准」从执行「定制脚本」拖放右窗格中,请输入以下代码。

  • 左侧窗格的「Action」→「标准」从执行「Action□」拖放到执行右窗格的「定制脚本」下,请从下拉列表中选择「Execution」。

  • 左侧窗格的「执行条件」→「标准」从「上述定制脚本的返回值为true时」拖放到执行右窗格的「Action□」,请输入以下代码。

  • 左侧窗格的「Action」→「标准」中显示「错误消息□」拖放到执行右窗格的「Action□」下,如下所示,请设定。
设定项目 设定内容
显示错误消息□ $variable.errorMessage
点击,关闭标志(任意)
关闭时间(毫秒)(任意) 3000

  • 左侧窗格的「执行条件」→「标准」从「上述定制脚本的返回值为true时」拖放到显示右窗格的「错误消息□」,请输入以下代码。

  • OK,按下关闭Action编辑器。

  • 最后,按下页面中配置了「Execute」按钮,请在属性选项卡的「事件」→「点击时」设置为「Check」Action。

以上中使用的定制脚本及$variable示例页面的创建完成。

动作确认

确认生成的Action及定制脚本正确动作?
按下工具栏的「预览」图标来可动作确认。

如下运行,则不会出现问题。

  • 在复选框未被选择一个也状态按下「Execute」按钮后,会显示错误消息。
  • 与所选择的复选框状态下按下「Execute」按钮显示的确认对话框。
  • 和按下确认对话框的OK显示完成消息。
  • 显示和按下确认对话框的取消取消了引起的消息。

-CookBook
-

执笔者:


comment

没有邮件地址被公开。 * 附栏必须项目

相关报道

IM-BloomMaker图表元素的使用方法(饼图篇)

此CookBook中,介绍了从intra-mart Accel Platform2019Winter能够使用了IM-BloomMaker的饼图的使用方法。…

no image

在imuiTree实现拖放的验证方法

此CookBook中,介绍了imuiTree(树视图)的拖放验证。intra-mart Accel Platform中,在画面上显示树…

no image

eBuilder的启动时处理的性能改善

此CookBook中,本地环境中进行e Builder启动快的设定,因此,描述了解开特定的功能快要启动的设定方法。但是进行本设定在了…

no image

中输入页面后,若设定输入内容的确认画面方法

此Cookbook中,对从输入页面的登记时的设定输入内容的确认画面方法。这种方法,以下的产品中生成的应用程序和流程中使用。IM-FormaDesigne…

no image

IM-BIS Action设定的「条件」的写法

此Cookbook中,对Action设定的条件公式的写法。根据此方法通过输入值可控制Action设定的外部联动和输入模式变换等的事件的运行。完成…

还没有数据。

RSSRSSRSSRSS