Tips

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

著者名：三宅 智子（サイボウズ）

目次

はじめに

固定リンクがコピーされました

「グループフィールド開閉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デモ環境 を確認してください。