使用JavaScript来自定义kintone

bxzhang发表于:2016年09月01日 14:01:21更新于:2017年08月04日 12:55:12

概要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.在作成的案件管理应用里输入下面的数据。

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

(山田太郎=登录用户)

JavaScript文件的编写

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

步骤1.准备JavaScript文件。

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



※文字编码为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 文件,在编辑器里改写成如下的样子。




 步骤2.编写JavaScript。

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

 

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

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

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



 

使用kintone REST API

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

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

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

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




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

    您需要登录后才可以回复