Tips

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

著者名：後迫 孝（サイボウズ株式会社）

目次

今回のテーマは、「必ず選んでもらえるラジオボタン」です。
おや？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で動作を確認しています。