カスタマイズ kintone 初心者向け:初めての JavaScript プログラムの作成(パート3;値の色を変える)

前回パート2では、 JavaScriptを使用して経費予測のJavaScriptによる処理方法の詳細について説明しました。
以下は、このJavaScriptによって動作する経費予測アプリの動画です。
今回は、前回作成したJavaScriptをカスタマイズして機能強化をしてみたいと思います。

Saveボタンをクリックすると「経費予測」フィールドには、数値が赤くなるのがわかります。これは、広告キャンペーンが予算を超過したことを警告しています。
実は、この警告は、前回作成したJavaスクリプトでは出ません。kintoneの標準機能ではデータフィールドの文字色はデフォルトで黒色なんです。
重要なデータを色で強調表示する必要がある場合は、前回作成したJavasクリプトをカスタマイズする必要があります。以下、データフィールドの値の色を変更する方法をご紹介します。
kintoneでは、データフィールドの値の色を変更するカスタマイズは、kintoneのテーブルのデータフィールドかサブテーブルのデータフィールドかによって、JavaScriptの処理が異なります。

①テーブル(サブテーブル外)のデータフィールドの値の色を変更します
「予算進捗管理」アプリの「月」フィールドの値の色を変更する方法をご案内します。
「budget_management.js」ファイルに以下のソースコードを追加してください。
「budget_management.js」ファイルはすでにパート2で使用されています。

kintone.events.on([
   // レコードの詳細画面にアクセスすると、色の変化イベントをアクティブにします。
   "app.record.detail.show"
], () => {

    //「monthElement 」変数を初期化して、「月」 データフィールドの HTML コードを取得ます。
    // HTMLコードの値: <div class="control-value-gaia value-8402069" style="text-align: right;"><span class="control-value-content-gaia">4</span></div>

    let monthElement = kintone.app.record.getFieldElement("月");

    //「monthElement 」変数のテキストの色を赤に変更します('red' の値を他の色名や任意のカラーコードに変更することができます)。
    // HTMLコードの値: <div class="control-value-gaia value-8402069" style="text-align: right; color: red;"><span class="control-value-content-gaia">4</span></div>

    monthElement.style.color = 'red';
});

結果


サブテーブル内のデータフィールドの値の色を変更します
この部分はかなり複雑な記述が必要ですので、詳細な手順を高度なkintoneカスタマイズトピックで説明します。
基本的に、「予算進捗管理」アプリの「経費予測」フィールドの値が予算を超える場合、色を変更するには、次の手順が必要です。

  1. レコードの詳細画面にアクセスすると、色の変化イベントをアクティブにします。
  2. サブテーブル内のキャンペーン行のデータを取得します。
  3. もし「経費予測」の値が「予算」の値以上の場合、「経費予測」の HTML コードを取得し、色を変更します。
kintone.events.on([
      'app.record.detail.show'
], () => {
    let elementCampaigns = kintone.app.record.getFieldElement("リストキャンペーン");
    let tableBody = elementCampaigns.querySelector('tbody');
    let observer = new MutationObserver(function() {
      let record = kintone.app.record.get().record;
      let campaigns = record['リストキャンペーン'].value;
      let trTags = tableBody.querySelectorAll('tr');
      for (let [index, item] of campaigns.entries()){
        let campaign = item.value;
        if (+campaign['経費予測'].value > +campaign['予算'].value){
          let currentRow = trTags[index];
          let expenseForecastingElement = currentRow.querySelectorAll('td')[3].querySelector('.control-value-gaia')
        	expenseForecastingElement.style.color = 'red';
        }
      } 
    });
    let observerConfig = { childList: true };
    observer.observe(tableBody, observerConfig);
});

参照
フィールド要素を取得する

記事を読んでいただきありがとうございます。
次の記事は、JavaScriptの基本構文について書きます、お楽しみに。