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

フィールド連結プラグイン

概要​

複数の入力したフィールドを連結します。

活用例

複数の入力データからキーフィールドを作成したい場合などに利用できます。

注意事項​

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

制限事項​

  • レコード作成・編集画面のみ動作します。
  • 対象フィールドは3つまで連結できます。
  • 各対象フィールドには同じフィールドを選択可能です。
  • 対象フィールドにはテキスト・数字・単一選択・ラジオボタン・日付フィールドのみ選択可能です。
  • 連結先フィールドにはテキストフィールドのみ選択可能です。
  • 連結先フィールドには、対象フィールドでセットされたテキストフィールドは選べません。
  • 対象フィールド、連結先フィールドともにレイアウトに配置していないと連結処理が動かない仕様です。

プラグインの機能​

  • 設定画面
    対象フィールドに連結したいフィールドと連結した値をセットするフィールドを選択します。
    また、連結時に使用する連結文字も入力します。

    プラグイン設定

  • プラグイン
    テキストと単一選択と日付に入力した値を連結文字「-」で連結し、テキスト２へ入力します。
    テキストか単一選択、もしくは日付の値が変わった際に動作します。テキスト２は入力不可の制御をしています。

    プラグイン

開発手順​

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_caption1">
      対象フィールド
    </div>
    <div class="config_input">
      <select id="target_field1" name="target_field1">
        <option value="">(未選択)</option>
      </select>
    </div>
    <div class="plus">
      +
    </div>
    <div class="config_input">
      <select id="target_field2" name="target_field2">
        <option value="">(未選択)</option>
      </select>
    </div>
    <div class="plus">
      +
    </div>
    <div class="config_input">
      <select id="target_field3" name="target_field3">
        <option value="">(未選択)</option>
      </select>
    </div>
  </div>

STEP2：プラグイン本体​

対象フィールド１と対象フィールド２と対象フィールド３に入力した値を連結文字で連結して、連結先フィールドにセットします。

レコード作成・編集画面表示時に、連結先フィールドを変更不可とします。(plugin.js)
  // プラグイン設定画面で設定した値を取得します。
  const config = atPocket.plugin.app.getConfig();

  // レコード作成画面表示時の処理
  atPocket.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {

    // 連結先フィールド変更不可にします
    atPocket.app.record.setFieldDisabled(config.concat_field, true);

  });
レコード作成・編集画面でフィールド値の変更時、設定した複数のフィールドを連結してセットします。(plugin.js)
  // レコード作成・編集画面 フィールド変更時
  atPocket.events.on(['app.record.create.change', 'app.record.edit.change'], function(event) {
    const record = event.record;
    const targets = [config.target_field1, config.target_field2, config.target_field3];
    const seames  = [config.seames_field1, config.seames_field2, ''];
    
    let concatText = '';
    targets.forEach((fieldKey, i) => {
      const val = getDisplayValue(record[fieldKey]);

      // 値があるときだけ、必ず区切り文字を追加
        concatText += val + seames[i];
    });
    
    record[config.concat_field].value = concatText;
    
    return record;
  });

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

なし