我们在利用kintone做一个采购管理的应用的时，往往会一起登记商品在网上采购的物流单号，
这次，我们将介绍如何利用这些单号做一个快捷的物流状态查询功能。利用快递100的API，加上一个按钮就能轻松实现物流状态的查询。

解决方案

在申请kintone时，填入快递公司和快递单号。保存后通过点击调用快递100API的按钮，

就能在快递100上显示物流的信息了。

使用到的kintone API

kintone.events.on 
kintone.app.record.getSpaceElement

提前准备

添加必要的字段

1. 选择需要录入快递信息的一个应用。

2. 添加以下字段。

　*下拉菜单字段的菜单根据快递100API的兼容公司设置了以下公司。

• 德邦物流

• DHL

• EMS

• FEDEX

• 汇通快运

• 申通

• 顺丰

• 天天快递

• 圆通速递

• 韵达快运

• 中通速递

  快递公司（下拉菜单）字段的设置：

  

  
  

     快递单号（单行文本框）字段的设置：

     占位符图片（空白栏）字段的设置：

    3.  保存添加的字段信息并更新应用。

设置自定义JavaScript / CSS

1. 示例代码“sample.js”，请以“UTF-8”编码保存。
   

/*
 * 
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 */
jQuery.noConflict();
(function ($) {
    "use strict";
    kintone.events.on('app.record.detail.show', function (resp) {
        var mySpaceFieldButton = kintone.app.record.getSpaceElement('call_button');
        var $button = $('<button class="custom-button" title="配送状态确认"><i class="fa fa-truck"></i></button>');
        var company = resp.record.Transporter.value;
        var company_id;
        switch (company) {
            case "德邦物流":
                company_id = "debangwuliu";
                break;
            case "DHL":
                company_id = "dhl";
                break;
            case "EMS":
                company_id = "ems";
                break;
            case "FEDEX":
                company_id = "fedex";
                break;
            case "汇通快运":
                company_id = "huitongkuaidi";
                break;
            case "申通":
                company_id = "shentong";
                break;
            case "顺丰":
                company_id = "shunfeng";
                break;
            case "天天快递":
                company_id = "tiantian";
                break;
            case "圆通速递":
                company_id = "yuantong";
                break;
            case "韵达快运":
                company_id = "yunda";
                break;
            case "中通速递":
                company_id = "zhongtong";
                break;
            case "":
                window.alert("没有选择快递公司");
                return;
            default:
                window.alert("快递100没有找到相关的快递公司");
                return;
        }
        var number = resp.record.Number.value;
        var dialog_iframe = '<div style="display:none;overflow:hidden;padding:3px" id="dialog"><iframe frameborder="no" border="0" id="kuaidi100"  scrolling="auto"  width="100%" height="100%" src="https://www.kuaidi100.com/chaxun?com=' + company_id + "&nu=" + number + '"></iframe></div>';
        $(mySpaceFieldButton).append($button).append(dialog_iframe);
        $button.click(function () {
            $('#dialog').dialog({
                autoOpen: false,
                modal: true,
                resizable: true,
                width: 960,
                height: 640,
                title: "快递查询"
            });
            $("#dialog").dialog("open");
            return;
        });
    });
})(jQuery);

示例代码“sample.css”，请以“UTF-8”编码保存。

.custom-button {
    color: #a8a8a8;
    font-size: 32px;
    display: inline-block;
    padding: 0 16px;
    height: 48px;
    border: 1px solid #e3e7e8;
    background-color: #f7f9fa;
    text-align: center;
}

.custom-button:hover {
    color: #3498db;
}

在“应用的设置 > 通过JavaScript/CSS自定义”中添加sample.js和sample.css。
这里同时也用到了jQuery，jQueryUI以及Font Awesome字体（ 可参见：使用Font Awesome 在菜单上创建漂亮按钮的方法 （暂无中文页面））
CDN的URL：

• jQuery，jQueryUI

• https://js.cybozu.com/jquery/2.1.4/jquery.min.js

• https://js.cybozu.cn/jqueryui/1.12.1/jquery-ui.min.js
  

• Font Awesome

• https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css

• jQueryUI css

• https://js.cybozu.cn/jqueryui/1.12.1/themes/smoothness/jquery-ui.css
  

JavaScript / CSS自定义设置（请在电脑专用的项目下添加）：

同时请确保js的调用顺序（需要优先加载jquery.min.js及jquery-ui.min.js）

如何使用

创建记录时，选择快递公司并输入跟踪号。
保存记录后，单击记录上的"货车图标"按钮
调用快递100API ，将快递的查询信息显示在弹出框里。

第1步

输入记录内容时，选择快递公司并填写快递单号并保存。

第2步

在记录详情页点击图标，执行查询。

第3步

在弹出框中，显示快递100网站，查询快递信息。

此屏幕是截至2018年10月的截图

最后

相关文章索引:

1. 第 3篇 在记录详细页面上设置个按钮！

2. 使用Font Awesome 在菜单上创建漂亮按钮的方法 （暂无中文页面）
   
   

因为本文相关的快递100API为外部服务，所以我们无法保证服务期限和内容。