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

SweetAlert

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

SweetAlert的要点

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

准备kintone应用

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

字段名称（例）	字段代码	字段类型
出生年月日	birthday	日期
年龄	age	数值、单行文本框等

JavaScript代码（calcAge.js）

(function() {     "use strict";        kintone.events.on(['app.record.detail.show'], function(event) {            var record = event.record;            // 设置添加记录时的年龄         var existing_age = parseInt(record['age']['value'], 10);            if (record['birthday']['value'] != null) {             // 根据出生年月日计算             // refer to https://msdn.microsoft.com/en-us/library/ie/ee532932%28v=vs.94%29.aspx             var birthday = new Date(record['birthday']['value']);             var today = new Date();             var years = today.getFullYear() - birthday.getFullYear();             birthday.setFullYear(today.getFullYear());             if (today < birthday) {                 years--;             }             var real_age = years;                // 如果记录中已有的年龄和计算出来的年龄不一致，则更新记录             if (existing_age !== real_age) {                 var params = {                     app: kintone.app.getId(),                     id: kintone.app.record.getId(),                     record: {                         age: {                             value: real_age                         }                     }                 };                 kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', params, function(resp) {                     /* 使用alert()时的写法                     *                     * alert('更新年龄。');                     * location.reload(true);                     *                     */                        // 使用sweetAlert时的写法                     swal({                         title: '更新年龄。',                         text: '重载页面。',                         icon: 'success',                             button: 'OK'                         }).then(function() {                         // 关闭对话框后的处理                         location.reload(true);                     });                 }, function(resp) {                     // 报错时提示错误信息                     var errmsg = '更新记录时出错了。';                     // 如果应答中包含错误信息，则显示错误信息                     if (resp.message !== undefined) {                         errmsg += resp.message;                     }                     alert(errmsg);                 });             }         }         return event;     }); })();

设置JavaScript/CSS

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

• PC版专用的JavaScript文件

  • https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js

  • calcAge.js

详细：SweetAlert让消息弹出窗口更加具有个性化！ - cybozu - cybozu开发者网站