回答の条件によってグループフィールドの開閉を切り替える

著者名:三宅 智子(サイボウズ)

目次

はじめに

「グループフィールド開閉 API」を使った JavaScript カスタマイズを紹介します。
この API を使うことでたとえば、回答の条件によって、グループフィールドを開いたり閉じたりしたい!という要望にお応えできます。
分岐のある入力項目がある場合に便利ですね。

今回ここで紹介するのは、製品の要望を集めるアプリのラジオボタンの選択肢によってグループフィールドを制御できるカスタマイズです。

デモ環境

cybozu developer network DemoSite (External link) のデモ環境で実際に動作を確認できます。
ログイン情報は cybozu developer network デモ環境 で確認してください。

完成イメージ

設問「種類」のラジオボタンの選択肢によって開いておくグループフィールドを設定できます。

実際には下のように動きます。

サンプルアプリの準備

まずはアプリの準備をします。
今回は kintoneアプリストア (External link) にある「 製品評価箱アプリ (External link) 」を使います。
ダウンロードした「製品評価箱アプリ」に必要なフィールドを追加して、フィールドコードを新たに設定します。

フィールドの設定

サンプルアプリのフィールドは以下です。
製品評価箱アプリに、次のフィールドを付け足してください。

フィールド名 フィールドコード フィールドタイプ
不具合を選択された方 group_failure グループフィールド
要望を選択された方 group_demand グループフィールド
質問を選択された方 group_question グループフィールド
その他を選択された方 group_other グループフィールド

各グループフィールドの中には上の完成イメージ図や下図を参考に任意のフィールドを入れてみてください。

サンプルプログラム

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*
 * 回答の条件によってグループフィールドの開閉を切り替えるサンプルプログラム
 *
 * Licensed under the MIT License
 */

(() => {

  'use strict';

  // ラジオボタンの値によって開くグループフィールドを変更する操作
  const eventsSubmit = ['app.record.detail.show',
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.ラジオボタン',
    'app.record.edit.change.ラジオボタン'];
  kintone.events.on(eventsSubmit, (e) => {
    const record = e.record;
    const radioButtonValue = record.ラジオボタン.value;

    // グループフィールド開閉APIを用いて、まず全てのグループフィールドを閉じる
    kintone.app.record.setGroupFieldOpen('group_failure', false);
    kintone.app.record.setGroupFieldOpen('group_demand', false);
    kintone.app.record.setGroupFieldOpen('group_question', false);
    kintone.app.record.setGroupFieldOpen('group_other', false);

    // ラジオボタンの値によって開くグループフィールドを切り替える
    switch (radioButtonValue) {
      case '不具合':
        kintone.app.record.setGroupFieldOpen('group_failure', true);
        break;
      case '要望':
        kintone.app.record.setGroupFieldOpen('group_demand', true);
        break;
      case '質問':
        kintone.app.record.setGroupFieldOpen('group_question', true);
        break;
      case 'その他':
        kintone.app.record.setGroupFieldOpen('group_other', true);
        break;
    }
  });
})();

プログラム(JavaScript)

「グループフィールド開閉 API(kintone.app.record.setGroupFieldOpen)」を使って、まずアプリ内のすべてのグループフィールドを閉じる処理をします。
そのあと、ラジオボタンの値によって開くグループフィールドを切り替えています。

使用したAPI

最後に

他にもアレンジして便利にお使いいただけそうでしょうか?
今回はラジオボタンの選択肢によってグループフィールド開閉を切り替えるというものでした。
他にもプロセス管理のステータスによって切り替えるという利用シーンもありますね。
何かご不明な点などありましたらお気軽にコメントください。

デモ環境についての説明は cybozu developer network デモ環境 を確認してください。