表示レコード値に応じた異なる色を表示する

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要件

レポートやページ内でレコードの値に基づいて異なる色を表示します。

使用ケース

売上管理アプリケーションでは、ビジネスオーナーが購入と販売を追跡したいと考えています。新しい購入が行われると、該当する請求書がシステムに追加され、それにより製品が追跡されます。新しい注文が発注されると、請求書から派生した製品インベントリから製品が表示されます。管理者は購入と販売を追跡し、目標と予算に達しているかどうかを確認したいと考えています。色を組み合わせて、月ごとの購入金額と販売金額に注目することを示したいと考えています。

使い方を見る

手順

1. フォームを作成以下の詳細で：

フォーム	フォームリンク名	フィールドタイプ	フィールド名	フィールドリンク名
新規注文	New_Order	名前	顧客名	Customer_Name
		日付	注文日	注文日
		サブフォーム一行数字通貨通貨	商品商品名数量単価小計	商品商品名数量価格小計
		通貨	合計	合計
		パーセンテージ	税金	税金
		通貨	合計	ネット合計
		式（作成元：注文日から月番号を取得するため）： Order_Date.getMonth()	注文月	Order_Month
式（作成元：注文日から月番号を取得するため）： Order_Date.getMonth()	注文月	Order_Month
式（作成元：注文日から月番号を取得するため）： Order_Date.getMonth()	注文月	Order_Month
式（作成元：注文日から月番号を取得する）： Order_Date.getMonth()	注文月	Order_Month
請求書を追加	Add_Invoice	名前	仕入先の名前	Supplier_Name
		日付	請求書の日付	Invoice_Date
		サブフォーム一行数値通貨通貨	商品商品名数量価格小計	商品商品名数量単価小計
		通貨	合計	合計
		パーセンテージ	税金	税金
		通貨	合計金額	合計金額

注文管理システムの一部として、複数のフォームを作成することができます。ここでは、簡潔に2つのフォームのみを作成します。新規注文フォームの注文日フィールドのデフォルト値と、請求書フォームの請求日フィールドのデフォルト値を zoho.currentdateとして設定します。

現在、報告書の値に色を付けるコーディングを行います。

2. 新しい注文フォームのロード時に実行するワークフローを作成しましょう。日付の変更を回避するために、注文日フィールドを無効にします。

3. 以下のコードをDeluge Editorに追加します。

注文日を無効にします。

4. 同様に、私たちは「追加請求書」フォームのロード時に、請求日フィールドを無効にするための別のワークフローを作成します。

5. 以下のコードをDeluge Editorに追加します：

請求日を無効にする;

私たちは2つの異なる色付け技術を行います：レポートベースのものとページベースのものです。この例では、レポートを使用して「請求書の追加」フォームのレコードを色付けし、ページを使用して「新規注文」フォームのレコードを色付けします。

6. 「全ての請求書」という名前のリストレポートを、「請求書を追加」フォームに基づいて作成しましょう。

7. 請求書の金額の上限を5000とした場合、5000を超える請求書を知るために、' 条件付き書式を作成する必要があります。「請求書」フォーム内の「合計金額」フィールドの値が5000を超えるレコードには、以下のような特別な書式を適用します。

それでは、このレポートがアクセスされたとき、5000以上の請求書の値がハイライト表示されます。ステークホルダーがレコードをフィルタリングしてデータを見つける必要はありません。

次に、ページを使用して値のカラーコーディングに進みましょう。月額制限を下回る売上高を強調表示します。そのためには、月間の売上高の合計を求める必要があります。それを求める関数を作成することから始めましょう。

8. 私たちは、各月の売上総額を取得する関数を作成します。関数名を作成します '月別売上':

9. 以下のコードを追加して、関数に渡された月番号の合計売上を取得します。

float SalesByMonth(int 月)
{
//渡された月の値を注文月の値と比較します
売上高 = New_Order[Order_Month == 月].sum(Net_Total);
return 売上高;
}

10. 今度は、「注文数（月別）」というページを作成し、HTMLスニペットを追加しましょう。

11. エディターで、月ごとの合計販売額を表形式で表示するために以下のコードを追加します。

<%{「ここにコードを入力してください」}%>
％＞
<style>
.salesTable
.salesTable
{「ここにテキストが入ります」}
幅: 96％;
罫線を結合する: collapse;
margin: 1% 2%;
｝
.salesTable td
.salesTable td
{「
パディング: 10px;
フォントサイズ：14px;
文字配置：中央寄せ
border-bottom: 1px solid #f1f1f1;
これです
table.salesTable > thead > tr > th（テーブル。セールステーブル > thead > tr > th）
{「あなたのサポートをお願いします」}
font-weight: 600;
太字にする
フォントサイズ：15px;
background: #ececec;
）
td.green {カラー: 緑}
background: #228B22;
色: 白;
）
td.red { 赤色 }
background: #d10000;
色: 白;
｝
td.blue {色: 青; }
背景：#89CFF0;
色: 白;
「}」
</style>
<table class='salesTable'>を設定します。
<thead>を記述します。
<tr>を記述します。
<th>月の名前</th>
<th>販売</th>
</tr>
</thead>
<tbody>
<% システム変数を参照する %>
//リストを作成する
リスト = List（）;
//1から12までの数字を作成して月番号を示します
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,8,9,10,11,12});
list.addAll({1,2,3,4,5,6,7,
月名 = リスト();
//月の名前のリストを作成します
monthName.addAll({'1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'});
//各月を繰り返す
リスト内の各月について
{「
％＞
<tr>
<td><%=monthName.get(month - 1)%></td>
<%％>
//月別売上を使用して合計売上を求めます
合計 = このアプリケーションの月ごとの売上（month）;
if(sum >= 5000)
if(sum >= 5000)を満たす場合
{「
//5000以上の売上を緑色で表示してください
％>
<td class='green'><%=このアプリケーションの月間売上(month)%></td>
<%％＞
}
それ以外の場合、sumが5000未満かつ2000以上の場合
{「
//2000から5000までの売上を青色で表示します
％>
<td class='blue'><%=このアプリケーションの月間売上（month）%></td>
<% のようにしてください。
} ご利用いただけます。
それ以外の場合 {
//2000以下の売上を赤色で表示してください
％>
<td class='red'><%=thisapp.SalesByMonth(month)%></td>
<td class='red'><%=このアプリ.月別売上(月)%></td>
<%％>
}
%> これ以上の操作が必要です。
</tr>
<% 「％」を入力します。
これです
％＞
</tbody>
</table>
<%「％」を使用します。
}%>