カスタマイズ kintone 初心者向け：初めての JavaScript プログラムの作成（パート3；値の色を変える）
チュンこんにちは！ 私の名前はチュンです。
株式会社メディアフュージョンでkintone関連製品の開発を担当しているベトナム出身のエンジニアです。
kintoneに興味のある方、kintoneを使っている方に私の蓄積した経験を共有したいと思います。
前回パート2では、 JavaScriptを使用して経費予測のJavaScriptによる処理方法の詳細について説明しました。
以下は、このJavaScriptによって動作する経費予測アプリの動画です。
今回は、前回作成したJavaScriptをカスタマイズして機能強化をしてみたいと思います。
Saveボタンをクリックすると「経費予測」フィールドには、数値が赤くなるのがわかります。これは、広告キャンペーンが予算を超過したことを警告しています。
実は、この警告は、前回作成したJavaスクリプトでは出ません。kintoneの標準機能ではデータフィールドの文字色はデフォルトで黒色なんです。
重要なデータを色で強調表示する必要がある場合は、前回作成したJavaｓクリプトをカスタマイズする必要があります。以下、データフィールドの値の色を変更する方法をご紹介します。
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カスタマイズトピックで説明します。
基本的に、「予算進捗管理」アプリの「経費予測」フィールドの値が予算を超える場合、色を変更するには、次の手順が必要です。
- レコードの詳細画面にアクセスすると、色の変化イベントをアクティブにします。
- サブテーブル内のキャンペーン行のデータを取得します。
- もし「経費予測」の値が「予算」の値以上の場合、「経費予測」の 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の基本構文について書きます、お楽しみに。
