必ず選んでもらえるラジオボタン

著者名:後迫 孝(サイボウズ株式会社)

目次

今回のテーマは、「必ず選んでもらえるラジオボタン」です。
おや?kintone のラジオボタンって、初期選択されているから必ず選んで保存できるのではないの?という疑問の声も聞こえてくるかと思いますが、アンケートやイベント用のアプリでは、利用者に初期選択の項目以外も選んでほしい!ですよね。

そこで、画面からレコードを登録・更新する際に、指定の項目を選択したらエラーとなる JavaScript カスタマイズを紹介します。

デモ環境

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

完成イメージ

アプリとフィールドの準備

アプリを作成し、次のフィールドを用意します。

フィールドの種類 フィールド名 フィールドコード 項目
ラジオボタン 社員旅行に関して何を希望しますか Radio
  • 未選択
  • 台湾
  • 香港
  • 沖縄
  • 軽井沢
  • 伊豆
  • 食事会
  • 記念品

社員旅行の日程や家庭の事情で旅行できない方への配慮として、食事会や記念品も選択に入れました。

プログラム

ポイント

  • フォーム内で、制御したいラジオボタンのフィールドコードを列挙することで複数のフィールドでの動作を期待できます。
  • フォーム情報を取得する API を使うことで、プログラムを改修することなくフィールドのエラー内容も変わるので便利です。

JavaScript ソースコード

レコード保存時のイベントと制御したいラジオボタンの選択肢を記述しています。

 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
/*
 * ラジオボタンカスタマイズのサンプルコード
 * Copyright (c) 2015 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  // レコード登録、編集、一覧での編集時イベント
  const ev = ['app.record.create.submit', 'app.record.index.edit.submit', 'app.record.edit.submit'];
  kintone.events.on(ev, (event) => {

    // レコード情報を取得する
    const record = event.record;
    const selection = record.Radio.value;
    const params = {
      app: kintone.app.getId()
    };
    return kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', params).then((resp) => {
      const name = resp.properties.Radio.label;
      if (selection === '未選択') {
        const errMessage = `「${selection}」は選べません。`;
        // フィールドの下に表示するエラー
        record.Radio.error = errMessage;
        // レコードに表示するエラー
        event.error = `項目名「${name}」の${errMessage}`;
      }
      return event;
    });
  });
})();
information

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