カテゴリー内の他の記事

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

Index

概要

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

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

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

完成形

デモ環境

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

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

事前準備

  • 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. レコード編集画面が表示された時のイベント

 

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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.帰着',

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

サインインしてコメントを残してください。