第 1篇 kintone javascript API的使用方法

aki发表于:2016年09月30日 15:12:58更新于:2019年08月07日 15:22:26

概要

在【kintone JavaScript API入门系列】中,我将简单地给大家介绍一下kintone JavaScript API的基本使用方法。如果您希望按照自己的喜好改造kintone、让kintone变得更加酷炫。那我们就一起学习吧!

具有纪念意义的第1篇是自定义kintone的关键。以下介绍JavaScript代码的编写规则、以及将JavaScript上传到 kintone并运行的一系列步骤。另外,还简单地介绍一下使用kintone JavaScript API时最重要的【event】。

此系列教程主要面向对HTML/JavaScript/CSS技术知识有一定基础的人员。关于这些知识,网上、书上都有大量的资料,您可以参考这些资料m(_ _)m

kintone JavaScript的写法 其一

才望子公司规定了kintone自定义时的JavaScript编码指南。在进行kintone自定义之前,让我们简单地了解一下吧(^^♪

① 保存时扩展名选择.js

创建好的JavaScript文件以.js扩展名保存。

②文字编码为UTF-8(无BOM)

关于BOM(字节顺序标记),并不会因这个使程序发生bug・・・因此不需要恐慌(^^;

但为了避免你陷入死胡同的时候发飙“这什么鬼!(怒)”,请务必记住使用无BOM的UTF-8保存文件 (*^_^*)

③ 用即时函数编写代码

JavaScript最好使用即时函数编写。可能对这个术语有点陌生,但是当你看到代码时,可能就会反应过来“啊啊,是这个啊!”。具体就是这样的。

(function() {
    // 此处写需要处理的内容
})();

说起理由话就长了。简单地说,这样写的话,不用担心会干扰kintone的运行。

还有其他重要的事项,详情请参考【kintone JavaScript 编码指南】。

kintone JavaScript的写法 其二

还有一点希望大家知晓的。它就是安全编码指南!里面写了很多内容,这次只介绍其中一点。

①使用strict 模式

即在处理内容前面加"use strict;"。

(function() {
    "use strict";
    // 此处写要处理的内容
})();

简单地说就是为了避免毫无知觉的情况下犯下重大错误。(^^)该会有人抱怨怎么这么麻烦了吧。请别担心!什么即时函数啊strict模式啊,这些难懂的名称我们暂且不用去管它,只要记住就是这样写的。(如果有人想深入了解,推荐去查一下即时函数和strict模式。)

创建JavaScript 文件

那么,让我们试着编写一下JavaScript文件吧。关于编辑器,用什么都可以,只要是您用得惯的。综合上面所述,我们简单地编写一个弹出alert信息的小程序吧(^^♪

(function() {
    "use strict";
    window.alert('kintone JavaScript API入门系列');
})();

将这个JavaScript文件命名为welcome.js保存。

创建好的文件上传到kintone

接下来,将刚才创建的JavaScript文件上传到kintone看看。关于上传步骤,请参考以下链接。

根据步骤上传刚才的JavaScript文件。这里应该没有特别难的地方,我就介绍一点注意事项。

① 扩展名为.js

如果文件名不正确,页面显示如下。

 00157ee0c90ab4cdf574c0c1edd90da

② 别忘了点击【更新应用】按钮

上传文件后如果只点击【保存】,无法应用JavaScript文件。因为很容易忘记,所以在点击【保存】之后,务必点击应用设置页面右上方的【更新应用】按钮。按下之后即弹出以下信息,点击【OK】按钮。忘记了的话等到胡须白了都不会应用到kintone里。务必记住!(我有时候一急起来也会忘记・・・)

00157ee0ca834417e865bd595c0c534 

③ 文字编码为UTF-8

哎呀!完了。上传的文件保存为UTF-8之外的文字编码了(^^;

00157f1bc604644e75e120e9b3b8c91

重新创建文件,保存为UTF-8,在上传到kintone(^^♪
上传成功的话,应该在以下页面会弹出alert。

  • 记录列表页面

  • 记录添加页面

  • 记录编辑页面

  • 记录详情页面

  • 记录汇总结果页面(仅限电脑版)

00157ee0f137b0f6524cc3e68772f76

但是,这样所有的页面都会出现同样的东西。如果只希望在记录列表页面弹出的话,就不适用了。该怎么办呢?

让我们来了解一下kintone的事件

接下来要登场的是【事件】\(^o^)/关于事件的写法请参考事件处理的写法

kintone.events.on(event, handler(event))

这个是用于添加事件句柄的kintone JavaScript API函数。感觉好像很难的样子。其实并不然(^^)

比如,当【发生○○时】想要【执行××处理】。
以上面函数为列的话:

  • ○○对应的是event

  • ××对应的是handler

是不是有点明白了?(^^♪
kintone JavaScript API中,○○所对应的event有以下几个。

  • 记录列表事件: app.record.index.show

  • 记录显示事件: app.record.detail.show

  • 记录添加事件: app.record.create.show

  • 记录编辑事件: app.record.edit.show

  • 图表显示事件: app.report.show

××部分的写法,比起文字说明,可能看实际的运行情况更好理解。
用以下代码覆盖welcome.js的内容,再上传到kintone,然后看一下运行情况(^^♪

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        window.alert('记录列表事件');
    });
    kintone.events.on('app.record.detail.show', function(event) {
        window.alert('记录显示事件');
    });
    kintone.events.on('app.record.create.show', function(event) {
        window.alert('记录添加事件');
    });
    kintone.events.on('app.record.edit.show', function(event) {
        window.alert('记录编辑事件');
    });
    kintone.events.on('app.report.show', function(event) {
        window.alert('图表显示事件');
    });
})();

怎么样?知道在什么情况下什么事件发生了吗?详情请参考事件处理的写法和各事件的介绍页面(^^)

最后

本章作为基础内容的【关键】,介绍了JavaScript的编写规则以及JavaScript上传到kintone并执行的一系列步骤。另外,还介绍了事件。对于在kintone上可以做些什么,是不是有一个大概的印象了?

最后可以参考JavaScript 导入的活用范例(仅提供日文),想象一下自己的应用可以变得多厉害。【cybozu developer network】中也有使用JavaScript进行自定义的范例,建议您务必查看一下。

另外,于4/14升级后的kintone可以指定CSS了,除此之外还不断推出其他各种各样便利的功能。简直如雨后春笋的感觉(笑) 

关于新功能,我将通过这一系列入门篇尽量简单易懂地介绍给大家。下一篇是【第2篇 在记录列表中设置按钮!】。下回见…

Let’s kintone customize\(^o^)

 

该Tips在2014年4月版中进行过确认。

 

<<第 0篇 开始kintone自定义之前需知晓的5点 | 第 2篇 在记录列表页面中放置按钮!>>


回复(2)

  • cybozu

    谢谢。已更新,请查看。

    引用 lu2kuluoluo 的回复:

    【javascipt 导入的活用范例】链接点进去是没有这个页面,能否给一个正确的地址。 

  • lu2kuluoluo

    【javascipt 导入的活用范例】链接点进去是没有这个页面,能否给一个正确的地址。