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

aki发表于:2016年10月13日 12:57:18更新于:2022年07月29日 18:35:17

开发者中心包含此范例模板(SweetAlert个性化弹出窗口),请前往开发者中心下载学习。

这次通过示例向大家介绍如何使用Cybozu CDN中的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)。
按照下图的顺序添加链接和文件。

0015dbb9d3b2d08178e6b8daee2d45d

动作确认

打开记录详情页面时如果需要更新年龄(结算结果>原有年龄),则更新。如果生日前后的一段时间内都没有打开过详情页面,进行如下更新。

0015dbb9d574f7b78eca5d64eeb6db6

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

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

location.reload(true);

咦,为什么没有按OK按钮,页面会被刷新?因为这是异步处理!

注意事项

关于本次kintone应用周边的注意事项,如下所示。

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

最后

这次向大家介绍的SweetAlert的使用方法虽然非常的简单,但所涉及的内容是官网的范例中没有的。最后,经常被提问的记录详情页面中的记录字段更新(记录详情页面显示时的事件需要和REST API组合使用),也可以参考此范例。可用于其它各种用途。请务必自己试一下!

回复(3)

  • dgg6666

    正在学习

  • cybozu

    谢谢提醒,已经更新

    引用 梦&蒲公英 的回复:

    resp.message !=== undefined这一行应该改为resp.message !== undefined否则效果无法实现

  • 梦&蒲公英

    resp.message !=== undefined

    这一行应该改为

    resp.message !== undefined

    否则效果无法实现