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檔案
-
https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js
-
calcAge.js
-
動作確認
打開記錄詳情頁面時如果需要更新年齡（結算結果>原有年齡），則更新，如果生日前后的一段時間內都沒有打開過詳情頁面，進行如下更新，
看著范例寫，容易寫成像以下這樣，
swal('更新年齡，', '多載頁面，', 'success');
location.reload(true);
咦，為什么沒有按OK按鈕，頁面會被重繪？因為這是異步處理！
注意事項
關于本次kintone應用周邊的注意事項，如下所示，
-
我是在Macintosh的Google Chrome上對kintone應用進行動作確認的
最后提示
這次向大家介紹的SweetAlert的使用方法雖然非常的簡單，但所涉及的內容是官網的范例中沒有的，
詳情請見：https://cybozudev.kf5.com/hc/kb/article/213452/?from=cnblogs
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541140.html
標籤：JavaScript
上一篇：【前端除錯】- 更好的除錯方式 VSCode Debugger
下一篇：虛擬DOM