【kintone】ボタンをクリックしてフィールドの値を書き換えてみよう！

前回はアプリにボタンをつける方法について書きました。

【kintone】アプリの「スペース」フィールドにボタンを設置する

今回は、前回作ったアプリのボタンでフィールドの値を書き換えます。

「名前（文字列(1行)）」フィールドに「太郎」と書くボタンにしたいと思います。
イメージ図↓

今回もkintone & JavaScriptカスタマイズを始めたばかりの方向けに書きましたのでご安心を＾０＾

アプリの準備

**文字列(1行)**を設置して、フィールドコードを「名前」としておきましょう。

JavaScript

まずは前回と同様、コピペしたら動くプログラムです。
コピペとは「コピーしてペーストする（貼り付ける）」のことです。

説明は後述します。

//新規追加画面でボタンを使いたいときは'app.record.create.show'
//編集画面でボタンを使いたいときは'app.record.edit.show'
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event => {
    //ボタンを置きたいスペースフィールドを取ってくる
    const sp = kintone.app.record.getSpaceElement('spSuteki');

    //ボタンを作る
    const btn = document.createElement('button');
    //ボタンに表示したいテキスト
    btn.textContent = 'ボタン';

    //スペースフィールドにボタンを追加する
    sp.appendChild(btn);

    //ボタンをクリックしたときの動作
    btn.onclick = () => {
        const obj = kintone.app.record.get();
        obj.record.名前.value = "太郎";
        kintone.app.record.set(obj);
    }

    return event;
});    

JavaScript解説

ボタンの設置は前回の記事のこちらを見てね
【kintone】アプリの「スペース」フィールドにボタンを設置する-JavaScript解説

今回は、ボタンをクリックしたら「名前」フィールドの値を「太郎」に書き換えたいのでした。

編集中の画面でボタンをクリックしてフィールドの値を変えたいときは、
**「ボタンをクリックしたときの動作を書くところ」**に、以下の順でプログラムを書きます。

1. レコードの値を取得する
2. レコードの値を変更する
3. レコードに値をセットする

順番に解説したいと思います。

ボタンをクリックしたときの動作を書くところとは

下記の//ボタンをクリックしたときの動作を書くところ に書きます。
先程のプログラムコードの中にもあるので見つけてくださいネ。

btn.onclick = () => {
    //ボタンをクリックしたときの動作を書くところ
}

1. レコードの値を取得する
レコードの値を取得するときは
const obj = kintone.app.record.get();
とします。

objという入れ物に、kintone.app.record.get()を入れるという意味です。

kintone.app.record.get()は、今見ているアプリのレコードの値をゲットする（get、取得する）プログラムです。

つまり・・・
objという入れ物に、今見ているアプリのレコードの値を入れるという意味になります。

参考：kintone.app.record.get()

2. レコードの値を変更する

次は、フィールドの値を変更します。
「名前」フィールドの値を「太郎」にしたいのでした。

obj.record.名前.value ="太郎";

obj.record で、objという入れ物の中のrecord（レコード）を表しています。**1.**でgetしたレコードを呼び出しています。

obj.record.名前.value で、objの中のレコード(record)の「名前フィールド」の値(value) の意味を表します。
これが="太郎"とされているので、「取得したレコードの名前フィールドの値を「太郎」に変更する」という意味になります。

しかしこれで終わりではありません。

3.レコードに値をセットする

最後は、kintone.app.record.set(obj);として、変更した値を確定させる必要があります。
※set の後の () には get で取得した obj を書きます。

2.のように値を書き換えただけで満足してはいけません。
この1文がないと、フィールドの値が書き換わらないのです。

参考：kintone.app.record.set(obj)

「ボタンクリック」によるデータの書き換えの流れを一言ずつ書くと

get
↓
変更
↓
set

となります。getとsetを覚えておきましょう！

ボタンの動き完成

というわけで
ボタンをクリックしたときに「名前」フィールドの値を「太郎」に書き換えるプログラムは以下のようになります。

//ボタンをクリックしたときの動作
btn.onclick = () => {
    const obj = kintone.app.record.get();
    obj.record.名前.value = "太郎";
    kintone.app.record.set(obj);
}

もし複数のフィールドがあったら？

例えば、「名前」フィールド以外に、「年齢」、「性別」などのフィールドがあった場合

フィールドの値を変更する前に
const obj = kintone.app.record.get();

フィールドの値を複数変更した後に
kintone.app.record.set(obj);

の順番で書くとOKです。

//ボタンをクリックしたときの動作
btn.onclick = () => {
    const obj = kintone.app.record.get(); //値変更の前にgetを1回
    obj.record.名前.value = "太郎";  //フィールドの値変更1
    obj.record.年齢.value = 10;    //フィールドの値変更2
    obj.record.性別.value = "秘密"; //フィールドの値変更3
    kintone.app.record.set(obj);  //値変更のあとにsetを1回
}

これでボタンで値の変更ができるようになりました💪

まとめ

一見簡単そうに見えるボタン付け～フィールドの変更ですが、

• ボタンを設置する
• ボタンをクリックしたときの動作を書く
  1. レコードを取得(get)する
  2. レコードの値を変更する
  3. レコードをセット(set)する

という流れを抑えておくとボタン設置名人になれるかも！
ぜひボタン付け練習してみてくださいね！

また、要注意なのですが、
cybozu developer network内にはこう書かれています。

• kintone.events.on のイベントハンドラ内で kintone.app.record.get および kintone.mobile.app.record.get を実行することはできません。 上記のイベントハンドラ内ではレコードデータの取得は引数のeventオブジェクトを、レコードデータの更新はeventオブジェクトのreturnを使用してください。
• kintone.events.on のインベントハンドラ内で kintone.app.record.set および kintone.mobile.app.record.set を実行することはできません。 上記のイベントハンドラ内ではレコードデータの取得は引数のeventオブジェクトを、レコードデータの更新はeventオブジェクトのreturnを使用してください。

ざっくり説明すると、
表示、保存前、保存後等、のイベント中はgetとsetが使えないという意味です。
しかしここはひとまず、ボタンを使って値を変更したいときはgetとsetを使うんだなと思っていただいて、
他のイベントだとどうなるのか？ボタンの動作を書くところじゃないところに書いたらどうなるのか？など試していただけたらいいなぁと思います。

以上です！