レコードの値に応じて色を変更する方法

レコードの値に応じて色を変更する方法

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

要件  

レポートやページで、データの値に応じて異なる 色で表示します。

ユースケース  

営業管理アプリケーションで、法人担当者は仕入れと売上を管理したいと考えています。新規の仕入れが発生すると、対応する請求書がシステムに追加され、商品を管理するために使用されます。新規の注文が登録されると、請求書から作成された商品在庫から商品が表示されます。管理者は、目標や予算を達成しているかどうかを把握するために、仕入れと売上を把握したいと考えています。そのために、 色 の組み合わせを使って、 仕入れ金額や売上完了の頻度を月ごとに強調表示したいと考えています。

手順  

1. フォームを作成 し、次の詳細を設定します。
フォーム
フォームリンク名
項目タイプ
項目名
項目リンク名
新規注文
New_Order
名前
顧客名
Customer_Name
日付
注文日
Order_Date
サブフォーム
  • 単一行
  • 数値
  • 通貨
  • 通貨
商品
  • 商品名
  • 数量
  • 単価
  • 小計
商品
  • Product_Nam
  • 数量
  • 単価
  • Sub_Total
 
通貨
合計
合計
割合（%）
税金
税金
通貨
純合計
Net_Total
数式（ 注文日 から月番号 [1 - 12] を取得するために作成）： Order_Date.getMonth()
注文月
Order_Month
請求書の追加
Add_Invoice
名前
仕入先名
Supplier_Name
日付
請求書日付
Invoice_Date
サブフォーム
  • 単一折れ線グラフ
  • 数値
  • 通貨
  • 通貨
商品
  • 商品名
  • 数量
  • 単価
  • 小計
商品
  • Product_Name
  • 数量
  • 単価
  • Sub_Total
 
通貨
合計
合計
割合（%）
税金
税金
通貨
正味合計
Net_Total
 
順番管理システムの一部として、複数のフォームを作成できます。ここでは説明を簡潔にするため、2 つのフォームのみを作成します。 まず、 順番日付 項目の初期値を 新規順番 フォームで、また 請求書日付 項目の初期値を 請求書 フォームで、いずれも Zoho.currentdate に設定します。
 
次に、レポート内の値に色分けを行います。
 
2. 続いて、フォームの読み込み時に実行されるワークフローを作成し、 新規順番 フォームで 順番日付 項目を無効にして、日付が変更されないようにします。

3. 次のコードを Deluge エディターに追加します。
  1. disable Order_Date;

4. 同様に、 別のワークフローを作成し、読み込み時に 追加する請求書 フォーム内の 請求書日付 項目を無効にします。
 
5. 次のコードを Deluge エディターに追加します。
  1. disable Invoice_Date;

ここでは 2 種類の色分け手法を使用します。1 つはレポートに基づく方法、もう 1 つはページに基づく方法です。この例では、レポートを使用して 追加する請求書 フォームのデータに色分けを行い、ページを使用して 新規順番 フォームのデータに色分けを行います。

6. 「追加する 請求書」フォームを基に、「すべて 請求書」という名前の 一覧レポート を作成します。
 
7. 任意の請求書の上限額を 5000 と仮定し、それを超えた請求書を把握したいとします。そのため、、条件付き書式を作成し、「追加する 請求書」フォームの 純 合計 値が 5000 より大きいデータに対して、以下のような特別な書式を適用します。
 
このレポートにアクセスすると、5000 を超える請求書の値が強調表示されます。関係者がデータを探すためにデータをフィルターする必要はありません。
 
次に、ページを使用して値に色分けを行います。月間の上限値より小さい営業数値を強調表示します。そのためには、1 か月間に完了したすべての営業の合計を求める必要があります。まず、その合計を求める関数を作成します。
 
8. ここでは、各月の合計営業完了数を取得する関数を作成します。関数名を  『SalesByMonth』とします。
 
9. 次のコードを追加して、この関数に引数として渡された月番号の合計営業を取得します。
  1. float SalesByMonth(int month)
  2. {
  3. //Compare the passed month 値 to the Order_Month 値
  4. 営業 = New_Order[Order_Month == month].sum(Net_Total);
  5. 返品する 営業;
  6. }

10. 次に、「 注文 By Month」という名前のページを作成し、そこに HTML スニペット を追加します。
 
11. エディターで、以下のコードを追加して、月ごとの合計営業頻度を表形式で表示します。
  1. <%{
  2. %>
  3. <style>
  4. .salesTable
  5. {
  6. width: 96%;
  7. border-collapse: collapse;
  8. margin: 1% 2%;
  9. }
  10. .salesTable td
  11. {
  12. padding: 10px;
  13. フォント-size: 14px;
  14. text-align: center;
  15. border-bottom: 1px solid #f1f1f1;
  16. }
  17. table。salesTable > thead > tr > th
  18. {
  19. フォント-重さ: 600;
  20. フォント-size: 15px;
  21. background: #ececec;
  22. }
  23. td。green {
  24. background: #228B22;
  25. color: white;
  26. }
  27. td。red {
  28. background: #d10000;
  29. color: white;
  30. }
  31. td。blue {
  32. background: #89CFF0;
  33. color: white;
  34. }
  35. </style>
  36. <table クラス='salesTable'>
  37. <thead>
  38. <tr>
  39. <th>月名</th>
  40. <th>売上</th>
  41. </tr>
  42. </thead>
  43. <tbody>
  44. <%

  46. //リストを作成
  47. list = List();

  49. //月番号を表す 1〜12 の数値を作成
  50. list。addAll({1,2,3,4,5,6,7,8,9,10,11,12});
  51. monthName = List();

  53. //月名のリストを作成
  54. monthName。addAll({'January','February','March','April','May','June','July','August','September','October','November','December'});

  56. //各月について繰り返し処理
  57. for each month in list
  58. {
  59. %>
  60. <tr>
  61. <!--monthName リストから月名を取得--> <td><%=monthName。取得する(month - 1)%></td>
  62. <%

  64.   //SalesByMonth 関数を使用して売上合計を取得
  65. sum = thisapp。SalesByMonth(month);
  66. if(sum >= 5000)
  67. {

  69.   //売上が 5000 以上の場合は緑色で表示
  70. %>
  71. <td クラス='green'><%=thisapp。SalesByMonth(month)%></td>
  72. <%
  73. }
  74. else if(sum < 5000 && sum >= 2000)
  75. {

  77.   //売上が 2000〜5000 の場合は青色で表示
  78. %>
  79. <td クラス='blue'><%=thisapp。SalesByMonth(month)%></td>
  80. <%
  81. }
  82. else {

  84.   //売上が 2000 未満の場合は赤色で表示
  85. %>
  86. <td クラス='red'><%=thisapp。SalesByMonth(month)%></td>
  87. <%
  88. }
  89. %>
  90. </tr>
  91. <%
  92. }
  93. %>
  94. </tbody>
  95. </table>
  96. <%
  97. }%>

動作を確認する