kintone Café 大阪 vol.12

vol.12 〜kintoneをさらに便利にする JavaScriptハンズオン〜

自己紹介 山下光洋 @yamamanx Blog : www.yamamanx.com ・ソフトウェア開発会社でIBMさんのBP ・ナイトレジャー会社で情シス ・エネルギー会社で情シス ヤマムギ開催 JAWS-UG OSAKA , JAWS-UG IoT関西支部 コアメンバー kintoneCafe 運営メンバー TwilioJP-UG,DevLOVE関西,RxTStudyなどに出没してます。 緑のLv15 The八番街 Bass Lv29 AppleMusic,LINE MUSIC,AmazonMusic,AWA,レコチョク,GooglePlayなどで配信中

• http://www.yamamanx.com

毎日呑んでます。 今日も呑みます

会場ご提供

本編

一覧画面のイベント

イベント kintoneで発生するイベントにハンドラーを紐付けて 処理をする事が出来ます。 例えば、一覧画面を表示したとき、 フィールドの編集可/不可を設定する 例えば、レコード編集画面で保存を実行したとき、 レコードにエラーを表示する 例えば、新規にレコードを追加するとき、 フィールドの値を書き換える

イベント kintone.events.on( event , handler )

イベント
(function() {
"use strict";

//レコード一覧画面表示後イベント
kintone.events.on('app.record.index.show', function(event) {
//ここに処理をかく
alert("画面表示後");

});
})();

動かしてみます まず、 JavaScriptを動かすための kintoneアプリを作ります。

kintoneアプリの作成 アプリの右の [+] をクリックします

kintoneアプリの作成 [はじめから作成]を選択します

kintoneアプリの作成 アプリの名前を適当に入力します

kintoneアプリの作成 文字列(1行)をドラッグ&ドロップで右の領域へ持っていきます

kintoneアプリの作成 右上の歯車- [設定]をクリックします

kintoneアプリの作成 フィールド名に「社員コード」、フィールドコードに「emp_code」を入力して[保存]をクリックします。

kintoneアプリの作成 同じように計5つのフィールドを作成します 種類 名前 フィールドコード 文字列(1行) 社員コード emp_code 文字列(1行) 社員名 emp_name 日付 入社日 entering_date 文字列(1行) 勤続年月 continued_month チェックボックス 無効(選択肢も無効) invalid

kintoneアプリの作成 フォームを作ったら[フォームを保存]して、[アプリを公開]をクリックします。

kintoneアプリの作成 右上の[・・・] - [アプリの設定を変更]をクリックします。

kintoneアプリの作成 [プロセス管理]をクリックします。

kintoneアプリの作成 [プロセス管理]をクリックします。

kintoneアプリの作成 [プロセス管理を有効にする]をチェックして[保存]をクリックします。

kintoneアプリの作成 [アプリを更新]をクリックします。

kintoneアプリの作成 アプリが出来ましたので適当にレコードを作ってみます。 右上の[+]をクリックします。

kintoneアプリの作成 社員コード、社員名、入社日を入力しておきます。

動かしてみます https://goo.gl/gWmbbj ブラウザでアクセスすると kintone_cafe_12-master.zip がダウンロードされますので 解凍してください。

• https://goo.gl/gWmbbj

動かしてみます 解凍したフォルダの中の 01_record_index_event.js を使います。

JavaScriptを適用 先ほど作成したアプリを開きます。

JavaScriptを適用 右上の[・・・] - [アプリの設定を変更]をクリックします。

JavaScriptを適用 [JavaScript / CSSでカスタマイズ]をクリックします。

JavaScriptを適用 [アップロードして追加]で 今ダウンロードしたファイルから 「01_record_index_event」を選択して、[保存]をクリックします。

JavaScriptを適用 [アプリを更新]をクリックします。

JavaScriptを適用 「画面表示後」とアラートが出れば適用OKです。

JavaScriptを適用 レコードの右の鉛筆アイコンをクリックすると「インライン編集開始時」とアラートが出ます。

JavaScriptを適用 レコードの右の保存アイコンをクリックすると「インライン編集の保存実行前」とアラートが出ます。

JavaScriptを適用 続いて「インライン編集の保存成功後」とアラートが出ます。

レコード一覧イベント
01_record_index_event.js
(function() {
"use strict";
//レコード一覧画面表示後イベント
kintone.events.on('app.record.index.show', function(event) {
alert("画面表示後");
});
//レコード一覧画面のインライン編集開始時イベント
kintone.events.on('app.record.index.edit.show', function(event) {
alert("インライン編集開始時");
});
//レコード一覧画面のインライン編集の保存実行前イベント
kintone.events.on('app.record.index.edit.submit', function(event) {
alert("インライン編集の保存実行前");
});
//レコード一覧画面のインライン編集の保存成功後イベント
kintone.events.on('app.record.index.edit.submit.success', function(event) {
alert("インライン編集の保存成功後");
});
})();

デバッグしてみます ※当資料のブラウザはGoogleChromeを前提にしています。 ブラウザ上で右クリックして[検証]を選択します。

デバッグしてみます

デバッグしてみます [Sources]タグを選択して左のSourcesエクスプローラーで、 top - <domain>.cybozu.com - k - api/js の下にアップロードしたJavaScriptファイルが配置されています。 これを選ぶと右ペインに表示されます。

デバッグしてみます 任意の行をクリックしてブレークポイントを設定して、 画面を更新すると、JavaScriptが実行中に設定したブレークポイントで停止します。

デバッグしてみます 右ペインのWatchでプラスを追加して変数(例えば event )を追加すると、 この停止しているタイミングの変数の中身が見えます。

デバッグしてみます 続きを実行するときは Resume script Execution アイコンをクリックします。 ※他にもStep Over , Step Into , Step Outもあるので用途にあわせて利用します。

レコード一覧画面の表示イベントのプロパティ kintone.events.on('app.record.index.show', function(event) { プロパティ名 型 説明 appId 数値 アプリID viewType 文字列 一覧(ビュー)の種類 ‘list’ , ‘calendar’ , ‘custom’ viewId 数値 ビューID viewName 文字列 ビュー名 records 配列またはオブジェクト viewTypeが listの場合はレコードオブジェクトの配列。 viewTypeがcalendarの場合はキーが日付文字列、値をレコードオブ ジェクトの配列としたオブジェクト。 offset 数値 一覧のオフセット数(viewTypeがcalendarの場合はnull) size 数値 一覧のレコード数(viewTypeがcalendarの場合はnull) date 文字列 カレンダービューの表示月。(viewTypeがcalendar以外はnull)

レコード一覧画面の表示イベントのプロパティ kintone.events.on('app.record.index.show', function(event) { console.log(event.appId); console.log(event.viewType); console.log(event.viewId); console.log(event.viewName); console.log(event.offset); console.log(event.size); console.log(event.date); console.log(event.records); }

レコード一覧画面の表示イベントのプロパティ

レコード一覧画面のインライン編集開始時のプロパティ kintone.events.on('app.record.index.edit.show', function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト インライン編集開始時のデータを保持したレコードオブジェクト recordId 数値 レコードID フィールドの値に応じた制御 ・フィールドの編集可/不可を設定する

レコード一覧画面のインライン編集イベントで フィールドの編集可/不可を設定する kintone.events.on('app.record.index.edit.show', function(event) { var record = event.record; record['continued_month']['disabled'] = true; return event; } ・PC用でのみ利用可能 ・スペースに貼り付けたアプリには利用出来ない ・編集権限のないフィールドを編集可能([‘disabled’]=false)に しても反映されない。

レコード一覧画面のインライン編集イベントで フィールドの編集可/不可を設定する

フィールドの編集可/不可を設定できないフィールド ・計算 ・ルックアップコピー先フィールド

レコード一覧画面のインライン編集保存実行前のプロパティ kintone.events.on('app.record.index.edit.submit, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID フィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する

レコード一覧画面のインライン編集保存実行前イベ
ントでフィールドにエラーを表示する
kintone.events.on('app.record.index.edit.submit, function(event) {
var record = event.record;
if (record['emp_code']['value'].charAt(0) != 'S'){
record['emp_code']['error'] = '社員コードの1文字目はSにしてください';
return event;
}
}

・PC用でのみ利用可能
・スペースに貼り付けたアプリには利用出来ない

レコード一覧画面のインライン編集保存実行前イベ ントでフィールドにエラーを表示する

エラーを設定してもエラーが発生しないフィールド ・レコード番号 ・作成者 ・作成日時 ・更新者 ・更新日時 ・ステータス ・作業者

レコード一覧画面のインライン編集保存成功後のプロパティ kintone.events.on('app.record.index.edit.submit.success, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID

レコード一覧画面のインライン編集保存実行前のプロパティ kintone.events.on('app.record.index.edit.change.<fieldcode>, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID changes オブジェクト 変更されたオブジェクト changes.field オブジェクト 変更されたフィールドのオブジェクト

レコード一覧画面のフィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する ・変更されたフィールド、テーブル内の行オブジェクトを取 得する

一覧のインライン編集で勤続年月を計算する
03_record_index_edit.js
jQuery.noConflict();
(function() {
"use strict";
~~ 中略 ~~
//レコード一覧画面表示後イベント
kintone.events.on('app.record.index.edit.change.entering_date, function(event) {
var record = event.record;
//入社日の値を取得
var entering_date = record['entering_date']['value'];
//入社日から今日までの年月を計算
var continued_month = getYearMonth(entering_date);
//勤続年月フィールドに計算結果を設定
record['continued_month']['value'] = continued_month;
return event;
});
})();

外部ライブラリをURL指定で追加する 03_record_index_edit.jsを[アップロードして追加]する時に、 以下の2つのライブラリを[URL指定で追加]してください。 ※年月計算で使用しているライブラリです。Cybozu CDNより使わせていただきます。 ・Moment.js https://js.cybozu.com/momentjs/2.13.0/moment-with-locales.min.js ・jQuery https://js.cybozu.com/jquery/2.2.4/jquery.min.js JavaScriptは 上から下の順に 実行されます。

• https://js.cybozu.com/momentjs/2.13.0/moment-with-locales.min.js
• https://js.cybozu.com/jquery/2.2.4/jquery.min.js

一覧のインライン編集で勤続年月を計算する

レコード一覧画面のレコード削除前のプロパティ kintone.events.on('app.record.index.delete.submit, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID

レコード削除を許可していないことを明示的に示す
04_record_index_delete.js
(function() {
"use strict";
//レコード一覧画面削除前イベント
kintone.events.on('app.record.index.delete.submit', function(event) {
event.error = '削除は出来ません。不要なレコードは「無効」をチェックしてください。'
return event;
});
})();

レコード削除を許可していないことを明示的に示す 04_record_index_delete.js

詳細画面のイベント

レコード詳細画面の表示イベントのプロパティ kintone.events.on('app.record.detail.show, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID 発生タイミング ・レコード詳細画面が表示された時(通知から、ページ送りからも対象) ・レコード編集画面で[保存]または[キャンセル]をした後(編集モードを終了した後) フィールドの値に応じた制御 ・フィールドの表示/非表示を切り替える

フィールドを非表示にする
05_record_detail.js
(function() {
"use strict";
//レコード詳細画面表示イベント
kintone.events.on('app.record.detail.show', function(event) {
kintone.app.record.setFieldShown('emp_code',false);
});
~中略~
})();

非表示にできないフィールド
・ラベル
・罫線
・スペース
・テーブル内のフィールド

フィールドを非表示にする 05_record_detail.js

レコード詳細画面の削除イベントのプロパティ kintone.events.on('app.record.detail.delete.submit, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID

レコード削除を許可していないことを明示的に示す
05_record_detail.js
(function() {
"use strict";
~ 中略~
//レコード一覧画面削除前イベント
kintone.events.on('app.record.delete.delete.submit', function(event) {
event.error = '削除は出来ません。不要なレコードは「無効」をチェックしてください。'
return event;
});
~中略~

})();

レコード削除を許可していないことを明示的に示す 05_record_detail.js

プロセス管理のアクションイベントのプロパティ kintone.events.on('app.record.detail.process.procedd, function(event) { プロパティ名 型 説明 action オブジェクト {value : ~~~~~ } 実行したアクション status オブジェクト {value : ~~~~~ } 変更前のステータス nextStatus オブジェクト {value : ~~~~~ } 変更後のステータス record オブジェクト レコードオブジェクト ・PC用のみ ・eventオブジェクトをreturnすることでレコード情報の更新が可能(レコード編集権限は必要)。 ・falseをreturn した場合、event.errorプロパティを設定してeventをreturnした場合に アクションをキャンセル ・不正な値をreturnした場合もアクションがキャンセル

特定のプロセスアクション実行時に必須チェックする
05_record_detail.js
(function() {
"use strict";
~ 中略~
//プロセス管理のアクション実行時のイベント
kintone.events.on('app.record.detail.process.proceed',function(event){
if (event.nextStatus['value'] == '処理中'){
var record = event.record;
if (record['entering_date']['value'] == null){
event.error = '処理中にする前に入社日を入力してください。'
return event;
}
}
});
})();

特定のプロセスアクション実行時に必須チェックする 05_record_detail.js

追加画面のイベント

レコード追加画面の表示イベントのプロパティ kintone.events.on('app.record.create.show, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコード追加画面表示時のデータ(初期値)を保持したレコードオブ ジェクト reuse 真偽値 再利用の場合はtrue , 通常の追加はfalse

レコード追加画面表示イベントフィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する ・フィールドの表示/非表示を切り替える ・ルックアップの取得を自動で行う

レコードの追加画面表示イベントで フィールドの編集可/不可を設定する 06_record_create.js kintone.events.on('app.record.create.show', function(event) { var record = event.record; record['continued_month']['disabled'] = true; return event; }

レコードの追加画面表示イベントで フィールドの編集可/不可を設定する

レコード追加画面の保存実行前のプロパティ kintone.events.on('app.record.create.submit, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト フィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する ・フィールドの表示/非表示を切り替える

レコード追加画面の保存実行前イベントでフィール
ドにエラーを表示する
06_record_create.js

kintone.events.on('app.record.create.submit, function(event) {
var record = event.record;
if (record['emp_code']['value'].charAt(0) != 'S'){
record['emp_code']['error'] = '社員コードの1文字目はSにしてください';
return event;
}
}

・PC用とスマートフォン用で利用可能
・スペースに貼り付けたアプリには利用出来ない

レコード追加画面の保存実行前イベントでフィール ドにエラーを表示する

エラーを設定してもエラーが発生しないフィールド ・レコード番号 ・作成者 ・作成日時 ・更新者 ・更新日時 ・ステータス ・作業者

レコード追加画面の保存成功後のプロパティ kintone.events.on('app.record.create.submit.success, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID

レコード追加画面のフィールド値変更時のプロパティ
kintone.events.on('app.record.create.change.<fieldcode>, function(event) {
プロパティ名

型

説明

appId

数値

アプリID

record

オブジェクト

レコードオブジェクト

changes

オブジェクト

変更されたオブジェクト

changes.field

オブジェクト

変更されたフィールドのオブジェクト

changes.row

オブジェクト

変更されたテーブル行のオブジェクト
・テーブルに行を追加した場合 : 追加した行オブジェクト
・テーブルの行を削除した場合 : null
・テーブル外のフィールドを変更した場合 : null

フィールド値変更イベントに指定可能なフィールド 下記以外の種類のフィールドを指定した場合は何も発生しません ・ラジオボタン ・ドロップダウン ・チェックボックス ・複数選択 ・ユーザー選択 ・組織選択 ・グループ選択 ・日付 ・時刻 ・日時 ・文字列(1行) ・数値 ・テーブル

レコード一覧画面のフィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する ・ルックアップの取得を自動で行う ・フィールドの表示/非表示を切り替える ・変更されたフィールドやテーブル内の行オブジェクトを 参照する

レコード追加画面で勤続年月を計算する
07_entering_date_edit.js
jQuery.noConflict();
(function() {
"use strict";
~~ 中略 ~~
//レコード追加画面表示後イベント
kintone.events.on('app.record.create.change.entering_date', function(event) {
return entring_date_change(event);
});

})();

編集画面のイベント

レコード編集画面の表示イベントのプロパティ kintone.events.on('app.record.edit.show, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコード追加画面表示時のデータ(初期値)を保持したレコードオブ ジェクト recordId 数値 レコードID

レコード一覧画面のフィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する ・フィールドの表示/非表示を切り替える ・ルックアップの取得を自動で行う

レコードの編集画面表示イベントで フィールドの編集可/不可を設定する 08_record_edit.js kintone.events.on('app.record.edit.show', function(event) { var record = event.record; record['continued_month']['disabled'] = true; return event; }

レコードの編集画面表示イベントで フィールドの編集可/不可を設定する

レコード編集画面の保存実行前のプロパティ kintone.events.on('app.record.edit.submit, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID フィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する ・フィールドの表示/非表示を切り替える

レコード編集画面の保存実行前イベントでフィール
ドにエラーを表示する
08_record_edit.js

kintone.events.on('app.record.edit.submit, function(event) {
var record = event.record;
if (record['emp_code']['value'].charAt(0) != 'S'){
record['emp_code']['error'] = '社員コードの1文字目はSにしてください';
return event;
}
}

・PC用とスマートフォン用で利用可能
・スペースに貼り付けたアプリには利用出来ない

レコード編集画面の保存実行前イベントでフィール ドにエラーを表示する

エラーを設定してもエラーが発生しないフィールド ・レコード番号 ・作成者 ・作成日時 ・更新者 ・更新日時 ・ステータス ・作業者

レコード編集画面の保存成功後のプロパティ kintone.events.on('app.record.edit.submit.success, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID

レコード編集画面のフィールド値変更時のプロパティ
kintone.events.on('app.record.edit.change.<fieldcode>, function(event) {
プロパティ名

型

説明

appId

数値

アプリID

record

オブジェクト

レコードオブジェクト

changes

オブジェクト

変更されたオブジェクト

changes.field

オブジェクト

変更されたフィールドのオブジェクト

changes.row

オブジェクト

変更されたテーブル行のオブジェクト
・テーブルに行を追加した場合 : 追加した行オブジェクト
・テーブルの行を削除した場合 : null
・テーブル外のフィールドを変更した場合 : null

recordId

数値

レコードID

フィールド値変更イベントに指定可能なフィールド 下記以外の種類のフィールドを指定した場合は何も発生しません ・ラジオボタン ・ドロップダウン ・チェックボックス ・複数選択 ・ユーザー選択 ・組織選択 ・グループ選択 ・日付 ・時刻 ・日時 ・文字列(1行) ・数値 ・テーブル

レコード一覧画面のフィールドの値に応じた制御 ・フィールドの編集可/不可を設定する ・フィールドの値を書き換える ・フィールドにエラーを表示する ・画面の上部にエラーを表示する ・ルックアップの取得を自動で行う ・フィールドの表示/非表示を切り替える ・変更されたフィールドやテーブル内の行オブジェクトを 参照する

編集時に勤続年月を計算する
07_entering_date_edit.js
jQuery.noConflict();
(function() {
"use strict";
~~ 中略 ~~
//レコード編集画面表示後イベント
kintone.events.on('app.record.edit.change.entering_date', function(event) {
return entring_date_change(event);
});

})();

複数のイベントをまとめて定義する
10_entering_date_edit.js
jQuery.noConflict();
(function() {
"use strict";
~~ 中略 ~~

var change_events = [
'app.record.index.edit.change.entering_date',
'app.record.create.change.entering_date',
'app.record.edit.change.entering_date'
]
kintone.events.on(change_events, function(event) {
return entring_date_change(event);

});
})();

印刷画面のイベント

レコード印刷画面表示イベントのプロパティ kintone.events.on('app.record.print.show, function(event) { プロパティ名 型 説明 appId 数値 アプリID record オブジェクト レコードオブジェクト recordId 数値 レコードID フィールドの値に応じた制御 ・フィールドの表示/非表示を切り替える

印刷時にフィールドを非表示にする
09_print.js
(function() {
"use strict";
//レコード印刷画面表示イベント
kintone.events.on('app.record.print.show', function(event) {
kintone.app.record.setFieldShown('emp_name',false);
});
~中略~
})();

非表示にできないフィールド
・ラベル
・罫線
・スペース

印刷時にフィールドを非表示にする

グラフ画面のイベント

グラフ画面表示イベントのプロパティ kintone.events.on('app.report.show, function(event) { プロパティ名 appId 型 数値 説明 アプリID

情報取得

情報取得 ここまでイベントのプロパティから情報を取得する方法が 出てきましたが、 kintoneには用意された関数で レコード、 アプリ、 ログインユーザー などの情報を取得する事も出来ます。

関数 var user = kintone.getLoginUser();

関数 var user = kintone.getLoginUser(); 返り値 (を格納している変数) 関数 引数

ログインユーザー情報の取得
11_get_login_user.js
(function() {
"use strict";
//レコード追加画面表示イベント
kintone.events.on('app.record.create.show', function(event) {

var user = kintone.getLoginUser();
console.log(user);
console.log(user.name);
console.log(user.code);
});
})();

getLoginUserの返り値パラメータ パラメータ 型 値と説明 id 文字列 ユーザーID。システムが自動採番。 code 文字列 ログイン名。ゲストユーザーは「Email」。 name 文字列 表示名。ゲストユーザーは「名前」。 email 文字列 E-mail。 url 文字列 URL。ゲストユーザーは空白。 employeeNumber 文字列 従業員ID。ゲストユーザーは空白。 phone 文字列 電話番号。 mobilePhone 文字列 携帯。ゲストユーザーは空白。 extensionNumber 文字列 内線。ゲストユーザーは空白。 timzone 文字列 タイムゾーン isGuest 真偽値 true or false language 文字列 言語とタイムゾーンで設定されたユーザーの言語。「webブラウザーの設定に従う」設定はブラウザの言語 設定。 ja - 日本語 , en - 英語 , zh - 中国語

レコード詳細情報取得関数 関数 返り値 または説明 引数 kintone.app.record.getId() レコードID , 利用できない画面ではnull なし kintone.app.record.get() レコードデータのオブジェクト, 利用できない画面では null なし kintone.app.record.getFieldElement() フィールド要素 フィールドコード kintone.app.record.set() レコードに値をセットする レコードデータ(JSON) kintone.app.record.getHeaderMenuSpaceElement() メニューの上側の空白部分の要素 なし kinotne.app.record.getSpaceElement() 指定されたスペースフィールドの要素 要素ID kintone.app.getRelatedRecordsTargetAppId() 関連レコード一覧の参照先アプリのID フィールドコード kintone.app.getLookupTargetAppId() ルックアップフィールドの参照先アプリのID フィールドコード

レコード一覧情報取得関数 関数 返り値 または説明 引数 kintone.app.record.getQueryCondition() 一覧の絞り込み情報クエリ文字列 なし kintone.app.getQuery() 一覧の絞り込み情報クエリ文字列(order by,limit,offset付) なし kintone.app.getFieldElements() 指定したフィールド要素の配列 フィールドコード kintone.app.getHeaderMenuSpaceElement() メニューの右側の空白部分の要素 なし kintone.app.getHeaderSpaceElement() メニューの下側の空白部分の要素 なし

kintone REST APIの実行

kintone REST APIをリクエスト
kintone REST APIをJavaScriptからリクエストする事ができま
す。
kintone.api(pathOrUrl, method, params, callback, opt_errback);
kintone.api('/v1/user/organizations',
'GET', {
code: user.code
},
function(resp) {
var record = kintone.app.record.get();
var organization = resp.organizationTitles[0].organization;
record['record']['create_section']['value'] = [{
"code": organization.code,
"name": organization.name
}];
kintone.app.record.set(record);
});

新規レコード追加時にユーザー情報と組織情報を初期値登録する
12_get_login_org.js
(function() {
'use strict';
kintone.events.on('app.record.create.show', function(event) {
var user = kintone.getLoginUser();
var record = event.record;
record['create_user']['value'] = [{
"code": user.code,
"name": user.name
}];
kintone.api('/v1/user/organizations',
'GET', {
code: user.code
},
function(resp) {
var record = kintone.app.record.get();
var organization = resp.organizationTitles[0].organization;
record['record']['create_section']['value'] = [{
"code": organization.code,
"name": organization.name
}];
kintone.app.record.set(record);
});
return event;
});
})();

新規レコード追加時にユーザー情報と組織情報を初期値登録する

新規レコード追加時にユーザー情報と組織情報を初期値登録する

新規レコード追加時にユーザー情報と組織情報を初期値登録する

新規レコード追加時にユーザー情報と組織情報を初期値登録する

新規レコード追加時にユーザー情報と組織情報を初期値登録する タイプ : ユーザー選択 フィールド名 : 登録者 フィールドコード : create_user

新規レコード追加時にユーザー情報と組織情報を初期値登録する タイプ :組織選択 フィールド名 : 登録部門 フィールドコード : create_section

新規レコード追加時にユーザー情報と組織情報を初期値登録する

新規レコード追加時にユーザー情報と組織情報を初期値登録する

外部APIの実行

外部APIをリクエスト
外部APIをJavaScriptからリクエストする事ができます。
kintone.proxy(url, method, headers , data, callback, opt_errback);
kintone.api('http://weather.livedoor.com/forecast/webservice/json/v1?city=' + city_code,
'GET', {},{},
function(resp) {

var resp_json = eval("(" + resp + ")");
console.log(resp_json);
var record = kintone.app.record.get();
record['record']['weather']['value'] = resp_json.description.text;
kintone.app.record.set(record);
});

※GET/DELETEの場合、dataは無視されるのでパラメータはURLにのせる必要があります。

フィールド変更時にAPIから天気情報を取得する
13_get_weather_api.js
function() {
"use strict";
//レコード新規作成時フィールド変更イベント
kintone.events.on('app.record.create.change.city_code', function(event) {
var record = event.record;
var city_code = record['city_code']['value'];
console.log(city_code);
kintone.proxy('http://weather.livedoor.com/forecast/webservice/json/v1?city=' + city_code,
'GET', {},{},
function(resp) {
var resp_json = eval("(" + resp + ")");
console.log(resp_json);
var record = kintone.app.record.get();
record['record']['weather']['value'] = resp_json.description.text;
kintone.app.record.set(record);
});
});

})();

フィールド変更時にAPIから天気情報を取得する タイプ : ドロップダウン フィールド名 : 都市 フィールドコード : city_code 項目: 270000 130010 170010 230010 260010

フィールド変更時にAPIから天気情報を取得する タイプ : 文字列(複数行) フィールド名 : 天気 フィールドコード : weather

フィールド変更時にAPIから天気情報を取得する

フィールド変更時にAPIから天気情報を取得する

フィールド変更時にAPIから天気情報を取得する

more...

more...

ご清聴ありがとうございました。 Special Thanx to…..