SweetAlert让消息弹出窗口更加具有个性化!

327 阅读2分钟

SweetAlert

SweetAlert是指可对JavaScript标准功能alert()和confirm()进行个性化定制的库。

SweetAlert的要点

官网上有很多示例,看了这些基本上就OK了。
但是,在低代码平台kintone上使用时,【弹出消息后更新页面】这个处理只参照示例来写的话,一开始有些人应该会误以为是同步处理,慢慢发现不对劲(因为原本的alert函数也是同步处理)。
看完示例后才发现需要异步处理(回调)。但却没有提供这个最基本的代码范例。
因此,本次通过使用记录详情页面显示时的事件中的REST API来更新记录的示例向大家介绍一下。

准备kintone应用

今天要讲的范例是:打开记录详情页面时,根据出生年月日计算出年龄,并且根据需要更新字段值。请创建一个应用,里面包含以下字段。

WX20230103-142646@2x.png

JavaScript代码(calcAge.js)

代码详情请见: Javascript代码

设置JavaScript/CSS

在Cybozu CDN里复制SweetAlert的JavaScript链接 ,粘贴到JavaScript自定义设置页面的URL输入栏,然后上传上面的代码范例(calcAge.js)。
按照下图的顺序添加链接和文件。

1.png

动作确认

打开记录详情页面时如果需要更新年龄(结算结果>原有年龄),则更新。如果生日前后的一段时间内都没有打开过详情页面,进行如下更新。

2.png 看着范例写,容易写成像以下这样。

swal('更新年龄。', '重载页面。', 'success');

location.reload(true);

咦,为什么没有按OK按钮,页面会被刷新?因为这是异步处理!

注意事项

关于本次kintone应用周边的注意事项,如下所示。

  • 我是在Macintosh的Google Chrome上对kintone应用进行动作确认的

最后

这次向大家介绍的SweetAlert的使用方法虽然非常的简单,但所涉及的内容是官网的范例中没有的。 详细代码及提示请见[:​SweetAlert让消息弹出窗口更加具有个性化! - cybozu - cybozu开发者网站](cybozudev.kf5.com/hc/kb/artic…)