使用JavaScript来自定义kintone

cybozu发表于:2016年09月01日 14:01:21更新于:2019年01月28日 14:33:22

概要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。

001581c2f24516d528176f3dbee592a

001581c2f3724ed90f7f5b8e1e86d1f

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

001581c2f4ac3ad3865337119f31a37

步骤3.进入系统管理页面后,点击“应用模板”。在弹出的对话框里,点击“选择文件”,上传所下载的案件管理.zip压缩包后,

点击“导入”按钮,导入模板。点击主页按钮,进入主页面。

00157c9304fd0bd3ae9999547d58254

00157c931763c4ab91e17438b5d8310

00157c932215a19570f09ec1f412d9c

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

00157c9329396826d1d3072d99253b9

 手順5.选择从模板创建

00157c9367161e3034fb38ea120c3a4

手順6.点击创建此应用

00157c936cca8d4e3185b414edf228e

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

00157c936d3ee8a815c305f7777c500

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

公司名对方担当者预估时间准确度用户数事件担当者名字
森川不动产佐藤昇2014-04-01A300山田太郎
宫田系统
加藤美咲2014-04-10B150田中麻子
东山产业
白石航平2014-05-31C1200山田太郎
安井电机菊地浩二2014-04-20A200山田太郎
医疗法人坊主会高桥太郎2014-05-15B500田中麻子

(山田太郎=登录用户)

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.点击案件管理应用右侧的“・・・”图标,在出现的下拉框里选择“设置此应用”。

0015c4e9c0163f23a8e512f857108d9 Image221-1.jpg

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

00157c93cf99852720f8f364e64970a

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

00157c93e0d607184ea34aee0116f6f 

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

00157c9401b522becf197378b085535

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

00157c94144789bba469d95cebb718c 

 

使用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。

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

00157c948cd40c6d8b5304880f1bfac 

 <获取记录显示事件,对于 “用户数” 在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']);
        }
    });


00157c94b16815b0bc1de175d673fdf

 

使用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);
            }
        });


00157c94d913e90a0e8a2318c66423c


附件:案件管理.zip • 11.16KB • 下载

    您需要登录后才可以回复