LoginSignup
4
1

More than 3 years have passed since last update.

@tami(Yasutake Mio)

【Fiori】Analytical List Pageで家計簿を作ってみる

Last updated at Posted at 2020-08-16

はじめに

Analytical List Page(ALP)はデータを可視化し、ドリルダウンやトランザクションデータへのナビゲーションなどの機能を提供します。
この記事では、家計の支出を可視化するためのレポートを想定して作ってみます。
CDSのアノテーションやアプリ側での設定がどのような役割を果たしているのか理解するため、段階を踏んで少しずつ完成させてきたいと思います。

＜やること＞
・チャートとテーブルを出力
・Visual Filterを出力
・KPIを出力
・Visual Filterのデフォルト値を設定

ゴール

以下のようなAnalytical List Pageを作成します。
image.png

開発環境

  • フロントエンド：SAP WebIDE Full-Stack
  • バックエンド： S/4HANA 1909 (FPS01)

データモデル

データモデルは以下のように簡単な構成です。ベースに支出を記録するためのテーブル(ZMYEXPENSES)と、支出カテゴリのマスタ(ZEXCATEGORYTEXT)があります。ALPで使用するビューはクエリブラウザで使うのと同じ、分析用のビューです。トップのビューは@Analytics.query: trueのアノテーション、その下のベースになるビューには@Analytics.dataCategory: #CUBE（または用途によりFACT, DIMENSION, HIERARCHY）のアノテーションをつけます。

image.png

ZMYEXPENSES
image.png
データは以下のような形で入っています。
image.png

ZEXCATEGORYTEXT
image.png
簡単にするために、カテゴリは3種類のみとします。
image.png

ステップ

  1. CDSビューの作成
  2. チャートとテーブルを出力
  3. Visual Filterを出力
  4. KPIを出力
  5. Visual Filterのデフォルト値を設定

1. CDSビューの作成

支出カテゴリのビュー：ZI_Category_Text

支出カテゴリ取得用のビューを作成します。

ZI_Category_Text
@AbapCatalog.sqlViewName: 'ZICATTEXT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Category Text'

@ObjectModel.dataCategory: #TEXT
@ObjectModel.representativeKey: 'category'
define view ZI_Category_Text as select from zexcategorytext {
    key category,
    @Semantics.language: true
    key lanugage,
    @Semantics.text: true
    text
}

集計用のCube View：ZI_MyExpenses_Cube

集計用のCube Viewを作成します。I_CalendarDateは標準のビューで、日付を年、年月などに変換することができます。ALPのフィルタで年や年月を選択できるようにしたいので、I_CalendarDateとAssociationを持たせています。

ZI_MyExpenses_Cube
@AbapCatalog.sqlViewName: 'ZIMYEXPENSES'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'My Expences Cube'

@Analytics.dataCategory: #CUBE
define view ZI_MYEXPENSES_CUBE as select from zmyexpenses 
association [0..1] to ZI_Category_Text as _Text
on $projection.Cateogry = _Text.category
association [0..1] to I_CalendarDate as _CalendarDate
on $projection.PostingDate = _CalendarDate.CalendarDate
{
    @ObjectModel.foreignKey.association: '_CalendarDate'
    posting_date as PostingDate,
    @ObjectModel.text.association: '_Text'
    category     as Cateogry,
    @Semantics.amount.currencyCode: 'Currency'
    @DefaultAggregation: #SUM
    amount       as Amount,
    @Semantics.currencyCode: true
    currency     as Currency,
    _CalendarDate._CalendarYear.CalendarYear,
    _CalendarDate._YearMonth.YearMonth,

    _Text,
    _CalendarDate
}

ALPで使用するために必要なアノテーションは以下の部分です。

分析用のビューにするために、@Analytics.dataCategoryを設定します。トランザクションデータ（支出）とマスタデータ（支出カテゴリ）を合わせたビューなので、カテゴリは#CUBEです。

@Analytics.dataCategory: #CUBE

分析用のビューは集計対象の項目(measure)を持つ必要があります。@DefaultAggregationをつけた項目が集計対象になります。

    @DefaultAggregation: #SUM
    amount       as Amount,

Consumption View：ZC_MyExpenses

最後に、ODataのもとになる一番上のビューを作成します。

ZC_MyExpenses
@AbapCatalog.sqlViewName: 'ZCMYEXPENSES'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'My Expences Query'

@Analytics.query: true
@OData.publish: true
@Metadata.allowExtensions: true
define view ZC_MyExpenses 
as select from ZI_MYEXPENSES_CUBE {
    PostingDate,
    @AnalyticsDetails.query.display: #KEY_TEXT
    Cateogry,
    Amount,
    Currency,
    @Semantics.calendar.year: true
    CalendarYear,
    @Semantics.calendar.yearMonth: true
    YearMonth
}

ここでも重要なのは@Analytics.query: trueというアノテーションです。このビューにはキーがないのですが@Analytics.query: trueとするとキーなしでも許容されます。

もう1点重要なのが以下のアノテーションです。

    @Semantics.calendar.year: true
    CalendarYear,
    @Semantics.calendar.yearMonth: true
    YearMonth

CalendarYear（年）、YearMonth（年月）はODataの型がedm.stringになります。そのままだと時間に関連する項目として認識されないので、@Semantics.calendarをつける必要があります。（参考：Chart Cards Used in Overview Pages>Time Series Chart）

2. チャートとテーブルを出力

つづいて、チャートとテーブルを出力するための最低限のアノテーションをつけて、アプリを作成してみましょう。
ZC_MyExpensesのMetadata Extensionを作成します。まずは選択項目(selectionField)とテーブルの列項目(lineItem)を定義します。

@Metadata.layer: #CORE
annotate view ZC_MyExpenses
    with 
{
    @UI:{ 
        lineItem: [{ position: 10 }]
    }
    PostingDate;
    @UI:{ 
        selectionField: [{position: 10 }],
        lineItem: [{ position: 20 }]
    }    
    Cateogry;
    @UI:{ 
        lineItem: [{ position: 30 }]
    }    
    Amount;
    @UI:{ 
        selectionField: [{position: 20 }]
    }  
    CalendarYear;
    @UI:{ 
        selectionField: [{position: 30 }]
    }     
    YearMonth;   
}

続いて、チャートを表示するためのアノテーションを設定します。annotate view ZC_MyExpenses...の上に以下を追加します。

これはアプリを開いたときの表示用のバリアント(presentationVariant)と選択用のバリアント(selectionVariant)を決めるアノテーションです。それぞれ'Default'というqualifier(ID)を指定しています。

@UI.selectionPresentationVariant: [{
    qualifier: 'Default',
    presentationVariantQualifier: 'Default',
    selectionVariantQualifier: 'Default'    
 }]

実際のバリアントの中身を以下で定義します。
presentationVariantにはデータの見せ方、すなわちチャートして表示する（type: #AS_CHART）ということと、チャート定義への参照（qualifier）を指定します。
selectionVariantにはデフォルトのフィルタ定義を指定できますが、ここでは特に何も指定しません。

@UI.presentationVariant: [{
    qualifier: 'Default',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartDefault'
    }]
 }]
@UI.selectionVariant: [{
    qualifier: 'Default',
    text: 'Default'
 }]

最後に、チャートの定義です。年月ごと、支出カテゴリごとの積み上げ棒グラフを作ります。
image.png

 @UI.chart: [{
    qualifier: 'ChartDefault',
    chartType: #COLUMN_STACKED,
    dimensions: ['Cateogry', 'YearMonth'],
    measures: ['Amount'],
    dimensionAttributes: [{ 
        dimension: 'Cateogry',
        role: #SERIES
     },{ 
        dimension: 'YearMonth',
        role: #CATEGORY
     }],
    measureAttributes: [{
        measure: 'Amount',
        role: #AXIS_1
     }]
  }]

項目の意味は以下のとおりです。

項目 説明
qualifier チャートのID。presentationVariantで指定したqualifierと同じ
chartType チャートの種類。#COLUM_STACKEDは積み上げ棒グラフ
dimensions 分析軸を指定する。チャートの種類により複数指定可能
measures 分析対象の数値項目を指定する。チャートの種類により複数指定可能
dimensionAttributes 分析軸それぞれについてrole（用途）を指定する（※）
measureAttributes 数値項目それぞれについてrole（用途）を指定する。何番目の軸かを指定する

※dimentionのroleの意味

  • category:　棒グラフでいうところのX軸になるdimensionに対して設定する
  • series:　同じcategoryの中で分類（色）を分けたい場合に使用する
  • category2: heatmapなどで使われる第二の軸

ALPを作成

WebIDEでALPを作成します。
ODataは公開しておきましょう。（Tr: /IWFND/MAINT_SERVICE）

Analytical List Pageのテンプレートを選択します。
image.png
image.png
今回作成したODataを選択します。
image.png
アノテーションを全て選択します。
image.png
Qualifierにステップ2で設定したselectionPresentationVariantのqualifierを指定します。
image.png
この時点でmanifest.jsonのpagesセクションの中は以下のようになっています。

manifest.json
        "pages": {
            "AnalyticalListPage|ZC_MYEXPENSES": {
                "entitySet": "ZC_MYEXPENSES",
                "component": {
                    "name": "sap.suite.ui.generic.template.AnalyticalListPage",
                    "list": true,
                    "settings": {
                        "condensedTableLayout": true,
                        "showGoButtonOnFilterBar": true,
                        "tableType": "ResponsiveTable",
                        "multiSelect": false,
                        "qualifier": "Default",
                        "autoHide": true,
                        "smartVariantManagement": true,
                        "keyPerformanceIndicators": {}
                    }
                },
                "pages": {
                    "ObjectPage|ZC_MYEXPENSES": {
                        "entitySet": "ZC_MYEXPENSES",
                        "component": {
                            "name": "sap.suite.ui.generic.template.ObjectPage"
                        }
                    }
                }
            }
        }

実行結果

立ち上げた時点では何も表示されません。
image.png
Goを押すとチャート、テーブルが表示されました。
image.png
右上のCompact Filterのボタンを押すと、selectionFieldで定義したフィルタ項目が表示されます。
image.png
ただ、年月のグラフなのに年月の順になっていません。
image.png

調整

2点調整を入れます。

  • グラフが年月順に並ぶようにする
  • アプリを立ち上げた時点でロードされるようにする

Metadata Extensionファイルを更新したら、CDSビューの有効化も忘れずに！

グラフが年月順に並ぶようにする
presentationVariantにsortOrderを追加します。YearMonthの昇順、PostingDateの降順に並ぶようにします。PostingDateを入れているのは、このソート順がテーブルの見え方にも影響するので、最新のレコードが上に来るようにするためです。

@UI.presentationVariant: [{
    qualifier: 'Default',
    sortOrder: [{
        by: 'PostingDate',
        direction: #DESC
     },{
        by: 'YearMonth', 
        direction: #ASC
     }],    
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartDefault'
    }]
 }]

また、YearMonthをlineItemにも追加します。sortOrderに指定した項目がlineItemに含まれていないとエラーになってしまうためです。

    @UI:{ 
        selectionField: [{position: 30 }],
        lineItem: [ { position: 40 } ]
    }     
    YearMonth;

アプリを立ち上げた時点でロードされるようにする
アプリを立ち上げた時点でロードするには、manifest.jsonのsettingsの中にdataLoadSettingsを追加します。loadDataOnAppLaunchには"always"/"never"/"ifAnyFilterExist"の3種類あり、本当はifAnyFilterExistにしたいですが、今はデフォルトフィルタの設定がないので"always"を選択します。

manifest.json
                    "settings": {
                        "condensedTableLayout": true,
                        "showGoButtonOnFilterBar": true,
                        "tableType": "ResponsiveTable",
                        "multiSelect": false,
                        "qualifier": "Default",
                        "autoHide": true,
                        "smartVariantManagement": true,
                        "keyPerformanceIndicators": {},
                        "dataLoadSettings": {
                            "loadDataOnAppLaunch": "always"
                        }

この結果、実行するとすぐにグラフが表示され、年月の昇順に並ぶようになりました。
image.png

3. Visual Filterを出力

ここでは、3つのVisual Filterを作成します。
Visual Filterでサポートされる3つのチャートタイプを使って、以下のフィルタを作成します。それぞれカテゴリ、年度、年月を指定するためのフィルタになります。

  • カテゴリごとの支出：円グラフ
  • 年度ごとの支出：棒グラフ
  • 年月ごとの支出：折線グラフ

アノテーションを追加

presentationVariantを3つ追加します。

@UI.presentationVariant: [{...
 },{  
    qualifier: 'FilterCategory',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartCategory'
     }]
 },{ 
    qualifier: 'FilterYear',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartYear'
     }]
 },{ 
    qualifier: 'FilterYearMonth',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartYearMonth'
     }]
 }]

chartアノテーションを追加します。最初に作ったチャートと同じ要領で、chartTypeを変えるだけです。

@UI.chart: [{...
 },{
   qualifier: 'ChartCategory',
   chartType: #DONUT,
   dimensions: ['Cateogry'],
   measures: ['Amount'],
   dimensionAttributes: [{
       dimension: 'Cateogry',
       role: #CATEGORY
    }],
   measureAttributes: [{
       measure: 'Amount',
       role: #AXIS_1
    }]
 },{
   qualifier: 'ChartYear',
   chartType: #BAR,
   dimensions: ['CalendarYear'],
   measures: ['Amount'],
   dimensionAttributes: [{
       dimension: 'CalendarYear',
       role: #CATEGORY
    }],
   measureAttributes: [{
       measure: 'Amount',
       role: #AXIS_1
    }]
 },{
   qualifier: 'ChartYearMonth',
   chartType: #LINE,
   dimensions: ['YearMonth'],
   measures: ['Amount'],
   dimensionAttributes: [{
       dimension: 'YearMonth',
       role: #CATEGORY
    }],
   measureAttributes: [{
       measure: 'Amount',
       role: #AXIS_1
    }]
 }]

ローカルアノテーションを設定

VisualFilterを表示するためにはフィルタ項目とpresentationVariantを紐づける必要があり、それをローカルアノテーションで設定します。

annotations.xmlファイルを開き、SelectTargetsをクリックします。
image.png
フィルタしたい項目を選択します。
image.png
CategoryのLocal Anntationsを開きます。
image.png
ValueListを選択します。
image.png
CollectionPathにEntitySet名を入力します。
image.png
Common.ValueListの行の＋ボタンを開き、PresentationVariantQualifierを選択します。
image.png
qualifierを入力します。
image.png
他の2つも同様に設定します。

実行結果

Visual Filterが表示されました。フィルタを選択すると、選択した値で中央のチャートが絞り込まれます。
image.png

4. KPIを出力

KPIとはレポートの一番上に出るふせんのようなもので、重要な数字とその評価（色で表現）が表示されます。
image.png

アノテーションを追加

selectionPresentationVariantを追加します。

@UI.selectionPresentationVariant: [{...},{
    qualifier: 'KPITotalExpense',
    presentationVariantQualifier: 'KPITotalExpense',
    selectionVariantQualifier: 'KPITotalExpense'
 }]

selectionVariantを追加します。中身は特にありません。

@UI.selectionVariant: [{...
 },{
    qualifier: 'KPITotalExpense',
    text: 'Default'
 }]

presentationVariantを追加します。visualizationsが二つあり、一つがchartを指し、もう一つがdataPointを指します。dataPointはKPIでどの数字を表示するかや、評価（criticality）をどうするのかを定義します。

@UI.presentationVariant: [{...
 },{
    qualifier: 'KPITotalExpense',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartTotalExpensePerCategory'
     },{
        type: #AS_DATAPOINT,
        qualifier: 'Amount'
     }]
 }]

chartを以下のように定義します。CategoryのVisualFilterで指定したものと同じです。

@UI.chart: [{...
  },{
    qualifier: 'ChartTotalExpensePerCategory',
    chartType: #DONUT,
    dimensions: ['Cateogry'],
    measures: ['Amount'],
    dimensionAttributes: [{
        dimension: 'Cateogry',
        role: #CATEGORY
     }],
    measureAttributes: [{
        measure: 'Amount',
        role: #AXIS_1
     }]
  }]

Amountに対してdataPointアノテーションをつけます。

  @UI:{
      lineItem: [{ position: 30 }],
      dataPoint: {
          criticalityCalculation: {
              improvementDirection: #MINIMIZE,
              toleranceRangeHighValue: 100000,
              deviationRangeHighValue: 150000
          }
      }
  }
  Amount;

criticalityCalculationはmeasure（今回はAmount）の値によってKPIの色を変えるための設定です。

項目 説明    
improvementDirection measureの値がどこに向かうのが望ましいかを指定する
#TARGET: 目標とする値があり、それを上回っても下回ってもよくない　
#MINIMIZE: 値が小さいほうがよい
#MAXIMIZE: 値が大きいほうがよい
toleranceRangeHighValue #MINIMIZEの場合、これを超えたら警告（黄色）とする閾値を定義する
deviationRangeHighValue #MINIMIZEの場合、これを超えたら危険（赤色）とする閾値を定義する

image.png
Create KPIs with data points and criticality calculation in a SAP Fiori Overview Pageより引用

toleranceRangeHighValue、deviationRangeHighValueの意味合いはimprovementDirectionによって変わります。上記ブログの説明がわかりやすいです。

manifest.jsonの設定

KPI用のモデルを追加します。見る先は同じODataサービスなのですが、なぜか名前を指定する必要があります。
image.png

keyPerformanceIndicatorsの設定を追加します。modelに上記で作成したモデル名、qualifierにselectionPresentationVariantのqualifierを指定します。

                        "keyPerformanceIndicators": {
                            "TotalExpense": {
                                "model": "kpi",
                                "entitySet": "ZC_MYEXPENSES",
                                "qualifier": "KPITotalExpense"
                             }                          
                        },

実行結果

KPIは表示されますが文字が切れてしまっています。
image.png
KPIをクリックすると、グラフはちゃんと表示されました。
image.png
KPIを複数表示すると切れずに表示されます。同じものを2つ並べただけですが。
image.png

同じ事象がSAP Communityに質問として上がっています。
Analytical List Page : Global KPI Tag not displaying proper value
質問者の方に聞いたところ、Fiori LaunchpadにデプロイしたらKPI一つでもちゃんと表示されたそうです。WebIDE固有の問題のようでした。

実行時の年のデータに絞る

家計簿としては過去全部の合計が出ていても意味がないので、実行時の年で絞ってKPIを出したいと思います。KPIのフィルタ条件はselectionVariantで指定します。残念ながらここに動的な値を設定する方法がわからなかったので、固定値で'2020'を指定しています。

ローカルでアノテーションを開き、External Annotationsの下にあるUI.SelectionVariant#をコピーします。（画像は既にコピー済の状態）
image.png
以下のようにローカルアノテーションを指定します。
image.png
コードは以下のようになります。

                <Annotation Term="UI.SelectionVariant" Qualifier="KPITotalExpense">
                    <Record Type="UI.SelectionVariantType">
                        <PropertyValue Property="Text" String="Default"/>
                        <PropertyValue Property="SelectOptions">
                            <Collection>
                                <Record Type="UI.SelectOptionType">
                                    <PropertyValue Property="PropertyName" PropertyPath="CalendarYear"/>
                                    <PropertyValue Property="Ranges">
                                        <Collection>
                                            <Record Type="UI.SelectionRangeType">
                                                <PropertyValue Property="Sign" EnumMember="UI.SelectionRangeSignType/I"/>
                                                <PropertyValue Property="Option" EnumMember="UI.SelectionRangeOptionType/EQ"/>
                                                <PropertyValue Property="Low" String="2020"/>
                                            </Record>
                                        </Collection>
                                    </PropertyValue>
                                </Record>
                            </Collection>
                        </PropertyValue>
                    </Record>
                </Annotation>

ほぼ2020年のデータなので違いがわかりにくいですが、グラフの上に2020と表示されています。
image.png

5. Visual Filterのデフォルト値を設定

続いて、メインのチャートとテーブルに対して実行日の年でデフォルトのフィルタがかかるようにします。以下のブログを参考にコントローラーの拡張を追加します。
SAP Fiori Elements – Initial Filter values

    onInitSmartFilterBarExtension: function (oEvent) {
        var sFilterBarId = "demo.myexpenses::sap.suite.ui.generic.template.AnalyticalListPage.view.AnalyticalListPage::ZC_MYEXPENSES--template::SmartFilterBar";
        var oFilterBar = this.getView().byId(sFilterBarId);
        var sYear = new Date().getFullYear().toString();
        var oDefaultFilter = {
            "CalendarYear": {
                "items": [
                    { "key": sYear, "text": sYear }
                ]
            }
        }
        oFilterBar.setFilterData(oDefaultFilter);
    }

実行日の年がデフォルトで選択されるようになりました。
image.png

おわりに

ALPを初めて作ってみての感想として、大枠はわりと簡単にできるのですが、細かいところ（デフォルトのフィルタ、Criticalityの設定など）がなかなか思うようにいかず苦労しました。今回は作りたいものを想定してどう実現するか調べていったので、ALPでできることや制約に気付けたのがよかったです。

参考

ブログ

ドキュメント

Appendix

Metadata Extensionの全体

@Metadata.layer: #CORE

@UI.selectionPresentationVariant: [{
    qualifier: 'Default',
    presentationVariantQualifier: 'Default',
    selectionVariantQualifier: 'Default'
 },{
    qualifier: 'KPITotalExpense',
    presentationVariantQualifier: 'KPITotalExpense',
    selectionVariantQualifier: 'KPITotalExpense'
 }]
@UI.presentationVariant: [{
    qualifier: 'Default',
    sortOrder: [{
        by: 'PostingDate',
        direction: #DESC
     },{
        by: 'YearMonth',
        direction: #ASC
     }],
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartDefault'
    }]
 },{
    qualifier: 'FilterCategory',
    text: 'Filter: Categories',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartCategory'
     }]
 },{
    qualifier: 'FilterYear',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartYear'
     }]
 },{
    qualifier: 'FilterYearMonth',
    text: 'Filter: Year Month',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartYearMonth'
     }]
 },{
    qualifier: 'KPITotalExpense',
    visualizations: [{
        type: #AS_CHART,
        qualifier: 'ChartTotalExpensePerCategory'
     },{
        type: #AS_DATAPOINT,
        qualifier: 'Amount'
     }]

 }]
@UI.selectionVariant: [{
    qualifier: 'Default',
    text: 'Default'
 },{
    qualifier: 'KPITotalExpense',    
    text: 'Default'
 }]
@UI.chart: [{
   qualifier: 'ChartDefault',
   chartType: #COLUMN_STACKED,
   dimensions: ['Cateogry', 'YearMonth'],
   measures: ['Amount'],
   dimensionAttributes: [{
       dimension: 'Cateogry',
       role: #SERIES
    },{
       dimension: 'YearMonth',
       role: #CATEGORY
    }],
   measureAttributes: [{
       measure: 'Amount',
       role: #AXIS_1
    }]
 },{
   qualifier: 'ChartCategory',
   chartType: #DONUT,
   dimensions: ['Cateogry'],
   measures: ['Amount'],
   dimensionAttributes: [{
       dimension: 'Cateogry',
       role: #CATEGORY
    }],
   measureAttributes: [{
       measure: 'Amount',
       role: #AXIS_1
    }]
 },{
   qualifier: 'ChartYearMonth',
   chartType: #LINE,
   dimensions: ['YearMonth'],
   measures: ['Amount'],
   dimensionAttributes: [{
       dimension: 'YearMonth',
       role: #CATEGORY
    }],
   measureAttributes: [{
       measure: 'Amount',
       role: #AXIS_1
    }]
 },{
   qualifier: 'ChartYear',
   chartType: #BAR,
   dimensions: ['CalendarYear'],
   measures: ['Amount'],
   dimensionAttributes: [{
       dimension: 'CalendarYear',
       role: #CATEGORY
    }],
   measureAttributes: [{
       measure: 'Amount',
       role: #AXIS_1,
       asDataPoint: true
    }]
 },{
    qualifier: 'ChartTotalExpensePerCategory',
    chartType: #DONUT,
    dimensions: ['Cateogry'],
    measures: ['Amount'],
    dimensionAttributes: [{
        dimension: 'Cateogry',
        role: #CATEGORY
     }],
    measureAttributes: [{
        measure: 'Amount',
        role: #AXIS_1
     }]
  }]
annotate view ZC_MyExpenses with
{
  @UI:{
      lineItem: [{ position: 10 }]
  }
  PostingDate;
  @UI:{
      selectionField: [{position: 10 }],
      lineItem: [{ position: 20 }]
  }
  Cateogry;
  @UI:{
      lineItem: [{ position: 30 }],
      dataPoint: {
          criticalityCalculation: {
              improvementDirection: #MINIMIZE,
              toleranceRangeHighValue: 100000,
              deviationRangeHighValue: 150000
          }
      }
  }
  Amount;
  @UI:{
      selectionField: [{position: 20 }]
  }
  CalendarYear;
  @UI:{
      selectionField: [{position: 30 }],
      lineItem: [ { position: 40 } ]
  }
  YearMonth;
}
4
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
1