条件付きフィールド表示切替プラグイン

概要

選んだ選択肢によってフィールドの表示/非表示の切替を行います。

• サンプルプログラムをダウンロード

活用例

日報登録時、作業内容によって入力フィールドを変えたい など様々な用途で使用できます。

注意事項

• このサイトに掲載しているサンプルプログラムは、参考用としてご提供しています。動作保証はしておりませんので、ご注意ください。
  なお、これらのプログラムを使用したことによるトラブルや損害については、責任を負いかねますので、あらかじめご了承ください。
  サポート窓口へお問い合わせいただいても、対応はできかねますのでご了承ください。
• JavaScriptプラグインは、プロフェッショナルコースで使用できます。

制限事項

• レコード作成・編集・詳細画面表示のみ動作します。
• 切替フィールドは単一選択/ラジオボタンフィールドのみになります。
• 表示設定の設定で「未選択」の場合も設定できるようになります。

プラグインの機能

• 設定画面
  「切替フィールド」に単一選択/ラジオボタンフィールドから、切替に使用したいフィールドを選択します。
  「切り替え対象フィールド」」に値によって表示するフィールドを選択します。
  「表示項目」に値とその際に表示させるフィールドを選択します。
  「+追加」ボタン、「-削除」ボタンで表示項目の数を調整できます。 （制限なし）

  注意

  表示設定の値が同じになったとき、重複エラーでアラートが出てきます。
  ラジオボタンの場合、「空白、Sample1.Sample2」といった（未選択）という選択肢がない状態で表示されます。

  

• プラグイン
  フィールド「個人/企業」で「企業」を選択した場合、「会社名」「資本金」「従業員」「代表者」が表示され、「氏名」が非表示となります。

  

  フィールド「個人/企業」で「個人」を選択した場合、「氏名」が表示され、「会社名」「資本金」「従業員」「代表者」が非表示となります。

  

開発手順

STEP1：設定画面

プラグインを追加したアプリのフィールド一覧を取得し、設定の選択肢として表示します。
フィールド一覧 の取得には、REST API を使用します。

プラグイン設定用にフィールド一覧を取得します。(config.js)

  // プラグイン設定情報する (アプリIDの取得用)
  const config = atPocket.plugin.app.getConfig();

　// フィールド一覧取得API実行する
  atPocket.api('apps/'+ config.appId +'/fields', 'GET', {}, function(result) {
    // 成功時に実行する処理を記載
    // セレクトボックスの選択肢にフィールド一覧をセットします
    ・・・
  }, function(result) {
    // エラー時に実行する処理を記載
    ・・・
  });

プラグイン設定表示用のHTMLを記載します。(config.html)

<div class="config_form">
  <!-- 切替フィールド -->
  <div class="config_row">
    <div class="config_caption">切替フィールド</div>
    <div class="config_input">
      <div>
        <select id="view_field" name="view_field">
          <option value="">(未選択)</option>
        </select>
      </div>
    </div>
  </div>

<!-- 切替対象フィールド（全体の候補カタログ） -->
<div class="config_row">
  <div class="config_caption">切替対象フィールド</div>
  <div class="config_input">
    <!-- 折り畳みトグル -->
    <button type="button" id="toggle_view_limit">▼ 対象選択</button>

  </div>
</div>
<div class="config_caption"></div>
 <!-- 折り畳み対象 -->
    <div id="view_limit_container" class="chk-wrap" style="display:none;">
      <!-- チェックボックスがここに動的に入る -->
    </div>
        <input type="hidden" id="view_limit_values" name="view_limit" value="">

  <!-- 表示設定1（初期行） -->
<div class="config_row">
  <div class="config_caption">表示設定1</div>
  <div class="config_input">
  ・・・
  <!-- 追加ボタン行 -->
  <div class="config_row">
    <div class="config_caption"></div>
    <div class="config_input">
      <button type="button" id="add_setting_btn">＋追加</button>
      <div id="extra_settings"></div>
    </div>
  </div>

  <input type="hidden" id="view_count" name="view_count" value="1">
</div>

STEP2：プラグイン本体

切替フィールドの選択肢によって、表示設定フィールドを表示します。

レコード作成・編集・詳細画面表示時に、フィールドの表示・非表示を変更します。(plugin.js)

  // プラグイン設定画面で設定した値を取得します。
  const config = atPocket.plugin.app.getConfig();

  // レコード作成/編集/詳細画面表示時に処理を実行
  atPocket.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'], function(event){
    // フィールド表示変更
    // 現在のレコードの値を渡す
    changeViewField(event.record);
  });

レコード作成・編集画面で、切替フィールドの値の変更時、フィールドの表示/非表示を変更します。(plugin.js)

  // 新規作成/編集画面 フィールドの値変更時
  atPocket.events.on(['app.record.create.change','app.record.edit.change'], function(event){
    // 切替フィールドが変更され場合に処理を実行
    if (event.changes.name == config.view_field) {
      // フィールド表示変更
      // 現在のレコードの値を渡す
      changeViewField(event.record);
    }
  });

フィールドの表示/非表示の変更を行います。(plugin.js)

  // フィールド表示変更
  function changeViewField(record) {
    // 切替対象フィールドを非表示にする
    // 対象フィールドを取得
    const hiddenFields = config.view_target.split(',').map(val => val.trim());
    hiddenFields.map(function(field, index) {
      // フィールドの非表示
      atPocket.app.record.setFieldShown(field, false);
    });

    // 表示設定数を取得する
    const count = config.view_count;
    
    // 選択肢により表示を変更する
    for (let i = 1; i <= count; i++) {
      const selectVal = config[`view_select${i}`]; 
      const limitVal  = config[`view_limit${i}`];  
      // 表示設定Nの場合
      // 対象フィールドを取得
      if (record[config.view_field].value == selectVal || 
      　 (record[config.view_field].value == "" && selectVal　==　"OPT_NONE")) {
        const viewFields = limitVal.split(',').map(val => val.trim());
        viewFields.map(function(field, index) {
          // フィールドの表示
          atPocket.app.record.setFieldShown(field, true);
        });
      }
    } 
  }

利用しているOSSのライセンス情報

なし