概要kintone上，可以利用JavaScript编程来对kintone上各功能的操作和页面进行自定义。本教程，首先以在页面上弹出hello对话框这个简单的自定义为例，给大家介绍下在kintone应用上进行自定义的设置顺序。

在后半部分，还会介绍使用kintone JavaScript API和REST API来进行自定义的例子。本教程的主要学习内容如下：

• 先写事件处理
  －弹出显示有hello文字的对话框

• 获取和操作记录　　
  －获取记录列表事件，将 “准确度” 为 “A” 的记录所对应的 “公司名” 以及 “准确度” 显示为红色字体。
  －获取记录显示事件，对于 “用户数” 在500人以上的顾客信息，在详细页面上弹出消息框，显示 “预计时间”。

• 使用REST API的记录操作
  －记录列表显示时，调用记录获取API，弹出消息框，显示案件担当者为登录者时的顾客名字（比如：山田太郎）

环境准备

在kintone自定义前，需要准备下面的环境。

kintone

如果还没有kintone的话，可以购买cybozu.cn服务

Web浏览器

请事先准备好下面的浏览器。

• Internet Explorer 8 以上

• Mozilla Firefox 最新版

• Google Chrome 最新版

• Safari 6.0 以上

基本是以kintone运行环境为准，详情请看这个(日语)。

编辑器

方便JavaScript编程的编辑器。

自定义

创建应用

首先、下载这篇文章里添付的案件管理.zip压缩包。

步骤1.登录kintone。

步骤2.点击系统管理图标，在出现的下拉框里点击【业务云系统管理】。

步骤3.进入系统管理页面后，点击“应用模板”。

点击左上角“导入”按钮，进行添加模板的操作。
在弹出的对话框里，点击“选择文件”，上传所下载的案件管理.zip压缩包后，点击“导入”按钮，导入模板。
点击主页按钮，进入主页面。

步骤4.点击添加应用按钮

 手順5.选择从模板创建

手順6.点击创建此应用

手順7.一个应用就这样创建完成啦～

 手順8.在作成的案件管理应用里输入下面的数据。

（山田太郎=登录用户）

JavaScript文件的编写

编写个JavaScript文件，确认下运行状况。

步骤1.准备JavaScript文件。

按下面的样子编写js文件，命名为sample_customize.js。

/*
 * 自定义例子
 * Copyright (c) 2014 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {
    "use strict";

    alert("hello");

})();

※文字编码为utf-8。

步骤2.点击案件管理应用右侧的“・・・”图标，在出现的下拉框里选择“设置此应用”。

步骤3.选择“设置”标签，点击“通过JavaScript / CSS自定义”。

 步骤4.由于这次的自定义是针对PC版，因此我们可点击 “JavaScript文件（电脑专用）” 的 “通过上传添加”按钮，选择之前作成的JavaScript文件（sample_customize.js）。完成后点击“保存”按钮，返回到管理页面。

步骤5.点击“更新应用”按钮，在确认对话框里，点击“确定”按钮。

 步骤6.回到一览画面，如果看到下图的消息框，就成功啦！

使用JavaScript API

JavaScript API是为了自定义kintone 应用的Web画面而提供的API。使用这些API，可以实现多种多样的用户需求。

对于在kintone 使用中发生的各种各样的事件，JavaScript API通过关联它们的句柄（hander）来运行。
这次主要介绍如何编写程序，来进行事件获取及处理。

• 获取记录列表事件，将 “准确度” 为 “A” 的记录所对应的 “公司名” 以及 “准确度” 显示为红色字体。

• 获取记录显示事件，对于 “用户数” 在500人以上的顾客信息，在详细页面上弹出消息框，显示 “预计时间”。

＜获取记录列表事件，将 “准确度” 为 “A” 的记录所对应的 “公司名” 以及 “准确度” 显示为红色字体＞

步骤1.将先前编写的 sample_customize.js 文件，在编辑器里改写成如下的样子。

/*
 * 自定义例子
 * Copyright (c) 2014 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {

    "use strict";

    //取得记录一览事件
    kintone.events.on('app.record.index.show', function(event) {
        //字体颜色的设定值
        var fontColorRed = "#ff0000";

        //取得 “公司名” 和 “准确度” 的元素
        var elCustomer = kintone.app.getFieldElements('文字列__1行_');    //公司名
        var elAccuracy = kintone.app.getFieldElements('单选框');    //准确度

        for (var i = 0; i < elAccuracy.length; i++) {
            //取得记录信息
            var record = event.records[i];

            //将 “准确度” 为 “A” 的记录所对应的 “公司名” 以及 “准确度” 显示为红色字体。
            if (record['单选框']['value'] === "A") {
                elCustomer[i].style.color = fontColorRed;
                elAccuracy[i].style.color = fontColorRed;
            }
        }
    });

})();

 步骤2.编写JavaScript。

※将之前已经上传的文件删除后，再上传。

 ＜获取记录显示事件，对于 “用户数” 在500人以上的顾客信息，在详细页面上弹出消息框，显示 “预计时间”＞

步骤3.再次编辑步骤2里的文件 sample_customize.js 。

在之前写的事件处理的下方，编写下面的代码。然后运行JavaScript文件。

    //取得记录详细事件
    kintone.events.on('app.record.detail.show', function(event) {
        //取得记录
        var record = event.record;

        //对于 “用户数” 在500人以上的顾客信息，在详细页面上弹出消息框
        if (record['用户数']['value'] >= 500) {
            alert("用户数500人以上的事件\n【预计时间】" + record['日期_0']['value']);
        }
    });

使用kintone REST API

使用REST API，可以实现取得表单设计信息、记录操作、空间操作的功能。这次将实现下面的功能。

• 记录列表显示时，调用记录获取API，弹出消息框，显示案件担当者为登录者时的顾客名字（比如：山田太郎）

步骤1.用编辑器打开之前的「sample_customize.js」文件。

步骤2.在获取记录列表的事件里追加下面的代码。

    //取得应用ID
        var appID = kintone.app.getId();

        // 登录用户情报
        var user = kintone.getLoginUser();

        //设定查询语句
        var qryInfo = '用户选择 in (LOGINUSER())';

        //发送请求
        kintone.api('/k/v1/records', 'GET', { app: appID, query: qryInfo}, function(resp) {
            if (resp['records'].length > 0) {
                var msg = "";
                for (var i = 0; i < resp['records'].length; i++) {
                    msg += "・ " + resp['records'][i]['文字列__1行_']['value'] + "\n";
                }
                alert(user.name + "担当的公司\n\n" + msg);
            }
        });