時光飛逝，流年似水，讓我們倒帶 2022，迴首這跌宕起伏一年走過的 “升級之路”。 NutUI 表現如何？ 成績單等著您打分！ ...
SweetAlert
SweetAlert是指可對JavaScript標準功能alert()和confirm()進行個性化定製的庫。
SweetAlert的要點
官網上有很多示例，看了這些基本上就OK了。
但是，在低代碼平臺kintone上使用時，【彈出消息後更新頁面】這個處理只參照示例來寫的話，一開始有些人應該會誤以為是同步處理，慢慢發現不對勁（因為原本的alert函數也是同步處理）。
看完示例後才發現需要非同步處理（回調）。但卻沒有提供這個最基本的代碼範例。
因此，本次通過使用記錄詳情頁面顯示時的事件中的REST API來更新記錄的示例向大家介紹一下。
準備kintone應用
今天要講的範例是：打開記錄詳情頁面時，根據出生年月日計算出年齡，並且根據需要更新欄位值。請創建一個應用，裡面包含以下欄位。
|
欄位名稱（例） |
欄位代碼 |
欄位類型 |
|---|---|---|
|
出生年月日 |
birthday |
日期 |
|
年齡 |
age |
數值、單行文本框等 |
(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文件
動作確認
打開記錄詳情頁面時如果需要更新年齡（結算結果>原有年齡），則更新。如果生日前後的一段時間內都沒有打開過詳情頁面，進行如下更新。
看著範例寫，容易寫成像以下這樣。
swal('更新年齡。', '重載頁面。', 'success');
location.reload(true);
咦，為什麼沒有按OK按鈕，頁面會被刷新？因為這是非同步處理！
註意事項
關於本次kintone應用周邊的註意事項，如下所示。
-
我是在Macintosh的Google Chrome上對kintone應用進行動作確認的
最後提示
這次向大家介紹的SweetAlert的使用方法雖然非常的簡單，但所涉及的內容是官網的範例中沒有的。
詳情請見：https://cybozudev.kf5.com/hc/kb/article/213452/?from=cnblogs
