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

色付き数値プラグイン

概要​

一覧・詳細画面表示時に、条件を満たした値の文字色を変更します。

活用例

金額を表示する際に 0 以下の値を赤字で表示する などができます。

注意事項​

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

制限事項​

  • レコード一覧/詳細画面のみ動作します。
  • 対象フィールドは数字・計算タイプのみ選択可能です。

プラグインの機能​

  • 設定画面
    数字・計算フィールドから対象フィールドを選択し、文字色変更の条件を入力します。

    プラグイン設定

  • プラグイン
    受注予定金額が 100,000円 以上だった場合に文字色が 赤色 になります。

    • 詳細画面

      プラグイン

    • 一覧画面

      プラグイン_一覧

開発手順​

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="number_field" name="number_field">
        </select>
      </div>
      <div>
        <select id="limit_sign" name="limit_sign">
          <option value="1">=</option>
          ・・・
          <option value="6">≠</option>
        </select>
      </div>
      <div>
        <input type="text" id="limit_value" name="limit_value">
      </div>
      <div>
        <select id="limit_color" name="limit_color">
          <option value="red">赤</option>
          <option value="blue">青</option>
          ・・・
        </select>
      </div>
    </div>
  </div>
</div>

STEP2：プラグイン本体​

対象フィールド値が条件を満たすかをチェックし、満たす場合は文字色を変更して表示します。

レコード一覧画面/詳細画面表時、条件に一致した場合は文字色を変更します。(plugin.js)
  // レコード一覧/レコード詳細画面表示時に実行する
  atPocket.events.on(['app.record.index.show', 'app.record.detail.show'], function(event) {
    // プラグイン設定を取得する
    const config = atPocket.plugin.app.getConfig();

    ・・・
    
    // 画面によって処理分け
    if (event.type === 'app.record.detail.show') {
      // 詳細画面表示
      // 値のチェック
      if(checkValue(limitSign, limitValue, event.record[numberField].value)) {
        // フィールドのデータ表示要素を取得
        const element = atPocket.app.record.getFieldValueElement(numberField);
        // 色を変更
        element.style.color = getColor(limitColor);
      }
    } else {
      // レコード一覧表示
      // レコード一覧データをチェック
      event.records.map(function(record, index) {
        // 値のチェック
        if(checkValue(limitSign, limitValue, record[numberField].value)) {
          // レコード一覧の特定の行のフィールド要素を取得
          const element = atPocket.app.getFieldElement(numberField, index);
          // 色を変更
          element.style.color = getColor(limitColor);
        }
      });
    }
  });
レコードの現在の値でチェックを行います。(plugin.js)
  // 値のチェック
  function checkValue(limitSign, limitValue, value) {
    // 比較記号による処理分け
    if (limitSign == 1) {
      // 「=」の場合
      return value == limitValue ? true : false;
      ・・・
    } else {
      // それ以外
      return false;
    }
  }
指定した色のカラーコードを取得します。(plugin.js)
  // 色の取得
  function getColor(limitColor) {
    // 「黒」
    let color = "#323130";
    if (limitColor == "red") {
      // 「赤」の場合
      color = "#d42a2a";
    } else if(limitColor == "blue") {
      ・・・
    }
    return color;
  }

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

なし