关于前端:SweetAlert让消息弹出窗口更加具有个性化

SweetAlert

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

SweetAlert的要点

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

筹备kintone利用

明天要讲的范例是：关上记录详情页面时，依据出生年月日计算出年龄，并且依据须要更新字段值。请创立一个利用，外面蕴含以下字段。

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/sweetal...

calcAge.js

动作确认

关上记录详情页面时如果须要更新年龄（结算后果>原有年龄），则更新。如果生日前后的一段时间内都没有关上过详情页面，进行如下更新。

看着范例写，容易写成像以下这样。

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

location.reload(true);

咦，为什么没有按OK按钮，页面会被刷新？因为这是异步解决！

注意事项

对于本次kintone利用周边的注意事项，如下所示。

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

最初

这次向大家介绍的SweetAlert的应用办法尽管十分的简略，但所波及的内容是官网的范例中没有的。