カテゴリー内の他の記事

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

フォローする

Index

概要

フィールドの選択によって別のフィールドの値を変更したり、無効にする機能が搭載されたサンプルです。
その他、自動採番、期間チェック、任意の場所に外部リンクを表示するサンプルも紹介します。

完成形

事前準備

  • kintone アプリ(kintone アプリストア  の「旅費精算申請」を使います) ※該当のアプリは、https://(サブドメイン).cybozu.com/k/#/market/ から追加できます。
  • エディター

サンプルプログラム

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

ご注意事項

  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません

PC用のJavaScriptファイル

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを指定します。

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

JavaScriptサンプル

  • 次のサンプルプログラムをエディターにコピーして、ファイル名を「sample.js」 、文字コードを「UTF-8」、BOMなしで保存します
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

設定した画面

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

使用したAPI

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

デモ環境

https://dev-demo.cybozu.com/k/65/

※デモ環境についての説明はこちら

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
大田 浩

「使用したAPI」の「3.レコード編集画面のフィールド値変更時イベント」へのリンクが、フラグメント落ちになっています。

<ol>
<li><a href="/hc/ja/articles/201941984#step3" target="_blank">レコード追加画面のフィールド値変更時イベント</a></li>
<li><a href="/hc/ja/articles/201941964#step4" target="_blank">レコード一覧画面のフィールド値変更時イベント</a></li>
<li><a href="/hc/ja/articles/202166270" target="_blank">レコード編集画面のフィールド値変更時イベント</a></li>
<li><a href="/hc/ja/articles/201941984#step2" target="_blank">レコード追加画面の保存実行前イベント</a></li>
<li><a href="/hc/ja/articles/202166270#step2" target="_blank">レコード編集画面の保存実行前イベント</a></li>
<li><a href="/hc/ja/articles/201941964#step3" target="_blank">レコード一覧画面のインライン編集開始時イベント</a></li>
<li><a href="/hc/ja/articles/201941984#step1" target="_blank">レコード追加画面が表示された時のイベント</a></li>
<li><a href="/hc/ja/articles/202166270#step1" target="_blank">レコード編集画面が表示された時のイベント</a></li>
</ol>

Avatar
cybozu Development team

大田様

ご指摘をありがとうございます。「3.レコード編集画面のフィールド値変更時イベント」のリンク先を修正いたしました。

Avatar
大田 浩

ありがとうございます。

あと、サンプルコードの70行目の“app.record.index.create.change”イベントというのは、ありませんね?

Avatar
cybozu Development team

大田様

失礼いたしました。以下も、存在しないイベントのため、削除しました。

 70行目 'app.record.index.create.change.出発','app.record.index.create.change.帰着',

ご指摘をありがとうございます。

ログインしてコメントを残してください。
Powered by Zendesk