メインコンテンツまでスキップ

グルーピングフィールドプラグイン

概要​

設定された項目をグループボタン押下時に同時に表示/非表示に切り替えます。

活用例

スマホでレコード閲覧時、ユーザによって表示項目を限定させたい場合など様々な用途で使用できます。

注意事項​

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

制限事項​

  • レコード作成・編集・詳細画面表示のみ動作します。
  • ボタン配置場所の指定は表示フィールドのみになります。
  • ボタン配置場所の指定で重複した場合、横に並びます。

プラグインの機能​

  • 設定画面
    「ボタン配置場所」にグルーピングボタンを表示させる表示項目を選択します。
    「対象フィールド」に切替に使用したいフィールドを選択します。 「ボタン表示名」に値とその際に表示させるフィールドを選択します。

    注意

    対象フィールドの項目が重複した場合、重複エラーでアラートが出てきます。

    プラグイン設定

  • プラグイン
    「顧客」表示フィールドの横に「顧客管理」ボタンが作成されます。

    初期表示時、設定時に選択した「名前」「年齢」「郵便番号」が非表示の状態です。

    プラグイン1

    「顧客管理」ボタンを押下した場合、設定時に選択した「名前」「年齢」「郵便番号」が追加表示されます。

    プラグイン2

開発手順​

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">

  <!-- ========= グループ1 ========= -->
  <div class="config_block">
    <h3 style="margin:10px 0;">グループ1</h3>

    <div class="config_row">
      <div class="config_caption1">ボタン配置場所</div>
      <div class="config_input">
        <select id="button_mount_1" name="button_mount_1">
          <option value="">（未選択：ヘッダに表示）</option>
        </select>
      </div>
    </div>

    <div class="config_row">
      <div class="config_caption1">対象フィールド</div>
      <div class="config_input" style="width:100%;">
        <button type="button" id="toggle_group_fields_1">▼ 対象選択</button>
        <div id="group_fields_container_1" class="chk-wrap" style="display:none;"></div>
        <input type="hidden" id="group_fields_1" name="group_fields_1" value="">
      </div>
    </div>

    <div class="config_row">
      <div class="config_caption1">ボタン表示名</div>
      <div class="config_input">
        <input type="text" id="button_label_1" name="button_label_1" placeholder="例：基本情報">
      </div>
    </div>
  </div>

  <hr>

STEP2：プラグイン本体​

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

レコード作成・編集・詳細画面表示時に、設定したグルーピングボタンを挿入します。(plugin.js)
  // プラグイン設定画面で設定した値を取得します。
  const config = atPocket.plugin.app.getConfig();

　// レコード作成/編集/詳細画面表示時に処理を実行
  atPocket.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'],event => {
      // グループ1〜3を順番に処理
      injectToggleButtonForGroup(1, event.record);
      injectToggleButtonForGroup(2, event.record);
      injectToggleButtonForGroup(3, event.record);
      return event;
    }
  );

グルーピングボタン生成時に機能として、ボタン押下時、設定した対象フィールドを表示状態にします。(plugin.js)

  // 表示制御
  function hideFields(fieldCodes) {
    fieldCodes.forEach(code => {
      atPocket.app.record.setFieldShown(code, false);
    });
  }

  function showFields(fieldCodes) {
    fieldCodes.forEach(code => {
      atPocket.app.record.setFieldShown(code, true);
    });
  }

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

なし