共计 1979 个字符，预计需要花费 5 分钟才能阅读完成。
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 的应用办法尽管十分的简略，但所波及的内容是官网的范例中没有的。
具体请见：SweetAlert 让音讯弹出窗口更加具备个性化！– cybozu – cybozu 开发者网站
