草庐IT

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

cybozu开发者 2023-03-28 原文

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）。
按照下图的顺序添加链接和文件。

动作确认

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

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

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

location.reload(true);

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

注意事项

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

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

最后提示

这次向大家介绍的SweetAlert的使用方法虽然非常的简单，但所涉及的内容是官网的范例中没有的。

详情请见：https://cybozudev.kf5.com/hc/kb/article/213452/?from=cnblogs

SweetAlert更加nbspcodeclassJavaScript

有关SweetAlert让消息弹出窗口更加具有个性化！的更多相关文章

  1. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  2. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  3. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  4. ruby-on-rails - Rails 3.1 中具有相同形式的多个模型？ - 2

    我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型，每个模型都有许多Post。当用户创建新主题时，他们也应该创建第一个Post。但是，我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗？谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#

  5. ruby - 使用 Ruby 通过 Outlook 发送消息的最简单方法是什么？ - 2

    我的工作要求我为某些测试自动生成电子邮件。我一直在四处寻找，但未能找到可以快速实现的合理解决方案。它需要在outlook而不是其他邮件服务器中，因为我们有一些奇怪的身份验证规则，我们需要保存草稿而不是仅仅发送邮件的选项。显然win32ole可以做到这一点，但我找不到任何相当简单的例子。 最佳答案 假设存储了Outlook凭据并且您设置为自动登录到Outlook，WIN32OLE可以很好地完成此操作:require'win32ole'outlook=WIN32OLE.new('Outlook.Application')message=

  6. Ruby - 如何将消息长度表示为 2 个二进制字节 - 2

    我正在使用Ruby，我正在与一个网络端点通信，该端点在发送消息本身之前需要格式化“header”。header中的第一个字段必须是消息长度，它被定义为网络字节顺序中的2二进制字节消息长度。比如我的消息长度是1024。如何将1024表示为二进制双字节？ 最佳答案 Ruby(以及Perl和Python等)中字节整理的标准工具是pack和unpack。ruby的packisinArray.您的长度应该是两个字节长，并且按网络字节顺序排列，这听起来像是n格式说明符的工作:n|Integer|16-bitunsigned,network(bi

  7. ruby-on-rails - 在 Flash 警报 Rails 3 中显示错误消息 - 2

    如果我在模型中设置验证消息validates:name,:presence=>{:message=>'Thenamecantbeblank.'}我如何让该消息显示在闪光警报中，这是我迄今为止尝试过的方法defcreate@message=Message.new(params[:message])if@message.valid?ContactMailer.send_mail(@message).deliverredirect_to(root_path,:notice=>"Thanksforyourmessage,Iwillbeintouchsoon")elseflash[:error]

  8. ruby - 具有两个参数的 block - 2

    我从用户Hirolau那里找到了这段代码:defsum_to_n?(a,n)a.combination(2).find{|x,y|x+y==n}enda=[1,2,3,4,5]sum_to_n?(a,9)#=>[4,5]sum_to_n?(a,11)#=>nil我如何知道何时可以将两个参数发送到预定义方法(如find)？我不清楚，因为有时它不起作用。这是重新定义的东西吗？ 最佳答案 如果您查看Enumerable#find的文档，您会发现它只接受一个block参数。您可以将它发送两次的原因是因为Ruby可以方便地让您根据它的“并行赋

  9. ruby-on-rails - 在 RSpec 中，如何以任意顺序期望具有不同参数的多条消息？ - 2

    RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)

  10. ruby - (Ruby || Python) 窗口管理器 - 2

    我想用这两种语言中的任何一种(最好是ruby​​)制作一个窗口管理器。老实说，除了我需要加载某种X模块外，我不知道从哪里开始。因此，如果有人有线索，如果您能指出正确的方向，那就太好了。谢谢 最佳答案 XCB，X的下一代API使用XML格式定义X协议(protocol)，并使用脚本生成特定语言绑定(bind)。它在概念上与SWIG类似，只是它描述的不是CAPI，而是X协议(protocol)。目前，C和Python存在绑定(bind)。理论上，Ruby端口只是编写一个从XML协议(protocol)定义语言到Ruby的翻译器的问题。生

随机推荐