ドロップダウンの値を変更して別フィールドの値を変更したり、無効に設定する

Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

• 概要
• 事前準備
• 適用手順
• サンプルプログラム

概要

こちらのサンプルは、「ドロップダウン」フィールドの選択によって、
別のフィールドの値を変更したり、入力を無効にするカスタマイズです。

また、「自動採番」「期間チェック」「任意の場所に外部リンクを表示させる」などの、
便利な機能を実現させるサンプルも含まれています。

カスタマイズの適用方法は、「適用手順」部分をご参照ください。

完成形

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/65/

ログイン情報は cybozu developer network デモ環境 で確認してください。

事前準備

• kintone アプリ（kintone アプリストア  の「旅費精算申請」を使います）
  ※該当のアプリは、https://(サブドメイン).cybozu.com/k/#/market/ から追加できます。
• エディター
  ※エディターの準備についてはこちらをご参照ください。

適用手順

JavaScriptファイルの追加

①まずは、カスタマイズに必要なライブラリを追加します。
アプリの設定画面から「JavaScript / CSSによるカスタマイズ」を開き、
「PC用のJavaScriptファイル」に、URL指定で次のライブラリを順番に指定します。

• Mement.js
  https://js.cybozu.com/momentjs/2.8.4/moment-with-locales.min.js (version 2.8.4 を利用)

※ライブラリの詳細に関しては、Cybozu CDN をご参照ください。

②今回のカスタマイズの「サンプルプログラム」の追加も、この設定画面で行います。
指定したライブラリの下に、下記のように「サンプルプログラム」のファイルを追加します。

• サンプルプログラム部分のコードをエディターにコピーして、
  ファイル名を「sample.js」 、文字コードを「UTF-8」、BOMなしで保存します。
  ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
• 59行目の「https://example.com」を、利用する路線検索サイトのURLに書き換えてください。

設定画面の完成イメージ

「JavaScript / CSSによるカスタマイズ」画面でそれぞれ設定した例を紹介します。

サンプルプログラム

サンプルプログラムでは、Cybozu CDN の利用、JavaScriptのサンプルを紹介します。

使用したAPI

1. レコード追加画面のフィールド値変更時イベント
2. レコード一覧画面のフィールド値変更時イベント
3. レコード編集画面のフィールド値変更時イベント
4. レコード追加画面の保存実行前イベント
5. レコード編集画面の保存実行前イベント
6. レコード一覧画面のインライン編集開始時イベント
7. レコード追加画面が表示された時のイベント
8. レコード編集画面が表示された時のイベント