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

著者名:三宅 智子( サイボウズ株式会社 (External link)

目次

はじめに

「グループフィールド開閉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
44
45
46
/*
 * 回答の条件によってグループフィールドの開閉を切り替えるサンプルプログラム
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * <https://opensource.org/license/mit/>
 */

(() => {

  'use strict';

  // ラジオボタン値とグループフィールドIDのマッピング
  const groupMap = {
    不具合: 'group_failure',
    要望: 'group_demand',
    質問: 'group_question',
    その他: 'group_other'
  };

  // 全グループフィールドIDリスト
  const groupIds = Object.values(groupMap);

  // 対象イベント
  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, (event) => {
    const radioButtonValue = event.record.ラジオボタン.value;

    // グループフィールド開閉APIを用いて、まず全てのグループフィールドを閉じる
    groupIds.forEach(id => kintone.app.record.setGroupFieldOpen(id, false));

    // ラジオボタンの値に対応するグループフィールドだけ開く
    const openGroupId = groupMap[radioButtonValue];
    if (openGroupId) {
      kintone.app.record.setGroupFieldOpen(openGroupId, true);
    }
    return event;
  });
})();

プログラム(JavaScript)

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

使用したAPI

最後に

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

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

information

このTipsは、2025年8月版kintoneで動作を確認しています。