CAPとSAP Fiori toolsでコーディングなしのプロトタイプを作る（3）Fioriプロジェクトの作成

##はじめに
この記事は、[SAP Inside Track 2021](https://blogs.sap.com/2020/12/01/sap-inside-track-tokyo-2021/)で発表した「CAPとSAP Fiori toolsでコーディングなしのプロトタイプを作る」に関する補足資料のパート3です。

ここでは、[CAPプロジェクトの作成]()で作成したODataサービスを使ったFioriのUIを作成します。最終的に以下のようなList Report + Object Pageのアプリケーションができ上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/aa3e2c15-f3cc-07a6-dafa-32a2a002dc0f.png)

##ステップ
1. [SAP Business Application Stuidoのセットアップ](https://qiita.com/tami/items/49bc470bf62224a467bc)
2. [CAPプロジェクトの作成](https://qiita.com/tami/items/bb5106723e6a8c69e90a)
3. Fioriプロジェクトの作成（今回の記事）

##Fioriプロジェクトの作成
###1. テンプレートからFioriプロジェクトを生成
CAPプロジェクトを作成したときと同じように、File>New Project from Templateをクリックしウィザードを立ち上げます。

- **SAP Fiori elements application**を選択し、**Start**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/11e3c74c-d84e-ff9b-d26d-95f9bc0d3026.png)
※2021/2/10更新
[Fiori toolsのアップデート](https://blogs.sap.com/2021/02/08/simplifying-application-generation-for-sapui5-freestyle-and-sap-fiori-elements-apps/)に伴い、ジェネレータの名前が**SAP Fiori application**に変わっています。ここからFiori elementsもフリースタイルのアプリも作成できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/af1d65da-a3f7-d169-928a-2ca7d0b17a36.png)


- **List Report Object Page**を選択し、**Next**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d65b0991-6cd8-477e-65a5-4c4ae2eb5ff7.png)
- データソースに**Connect to an OData Service**を選択

OData service URLには`http://localhost:4004/catalog`を設定します。これで、ローカルで実行中のODataサービスにアクセスできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/44e00aca-2180-f7bd-b7c5-585d6b6be19e.png)

- Main entityに**Projects**、Navigation entityに**toTasks**を選択し、**Next**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f3db151a-8bf6-9e41-bb15-3873f521121e.png)
- Module name, Application title, Application namespace, Descriptionを入力 （設定値は任意）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/63eb8705-dd64-0ad5-6fdb-5b6dca085e04.png)
- Project folder pathのボタンをクリックし、CAPプロジェクトappフォルダを選択してOpen
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/3cf8d474-30d9-2220-448d-19b8347ae611.png)
- **Finish**をクリックするとFioriプロジェクトが生成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/29fe3d72-9cbc-7380-dc0e-f09311ff7921.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/98692ad1-32ca-3951-0527-7b2815a8e9f3.png)

###2. Fioriアプリを実行
- 新しいターミナルを開き、今作成したprojectappフォルダへ移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/cc513227-87a8-3a4d-c33d-76143be3fb90.png)
- `npm install`で必要なモジュールをローカルにインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a741126d-5f26-284f-5d8d-64f23803f929.png)
- `npm start`でアプリケーションを起動し、ポップアップが出たら**Open in New Tab**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ed8e92cf-5a68-6c47-8cfb-f4b3e9e41fba.png)
- ブラウザが開いたら**index.html**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/97b8d714-f680-6037-80bd-f42eec6d0f24.png)
List Report画面が起動しますが、この時点では基本的な項目しか表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/3c9005a6-aa53-d2f5-4e05-3b8b54160910.png)

###3. UIアノテーションの定義
以下では、**Guided Development**ツールを使ってUIアノテーションを定義していきます。
Guided Developmentを起動するには、View>Find Commandまたは、ショートカット**Ctrl+Shift+P**を使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9910ed7c-3fe0-686d-3f1f-0a80d3fba17e.png)

- "fiori"などで検索して、**Open Guided Development**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/089c5752-bb52-57a4-54e8-283f1d7efcc9.png)
以下の画面が開きます。ここからやりたいことを選択して、ウィザードに従って入力していくとアノテーションができあがります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/37c78ead-b83d-aa2c-81e9-03c1644c6930.png)

####3.1. 検索項目の定義
List Reportの検索項目を定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/24350314-6073-8488-469d-58842bb6ccd3.png)

- **Add a new filter field to the Smart Filter Bar**を選択して、**Start Guide**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/def995bb-d36a-8aac-598c-29a2f94b9ec0.png)
- Entity Typeに**Projects**、Propertyに**projectCode**を選択して、**Apply**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/4e872cd1-6648-becf-68df-02e6f3d93106.png)
すぐには何も起きませんが、10秒くらい心静かに待ちます。すると、右側にannotation.xmlファイルが開きます。UI.SelectionFieldsというアノテーションが追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/97ca34e4-00b1-fee6-1bed-102906d5d983.png)
赤枠で囲った`<PorpertyPath>...</PrpertyPath>`の部分が1つの検索項目になります。項目を増やしたければ、この部分をコピーして項目名を変更すればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f50ab129-5a68-0d22-09ab-3f959abed0bc.png)
項目名を入力するところで**Ctrl + Space**を押すと、入力可能なプロパティを提案してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e26ae203-2340-af8a-483a-0bf584fd00d5.png)
以下の3項目を追加しました。

```xml
                <Annotation Term="UI.SelectionFields">
                    <Collection>
                        <PropertyPath>projectCode</PropertyPath>
                        <PropertyPath>toCustomer_customer</PropertyPath>
                        <PropertyPath>toManager_user</PropertyPath>
                    </Collection>
                </Annotation>
```
####3.2. テーブル列の定義
List Reportのテーブル列を定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/7f15fb98-088f-4da7-6dfe-d9341d810c08.png)

- **Add a new column to a table**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/729bc400-66d8-45ed-541d-748d2d3d65d1.png)
- Entity Typeに**Projects**、Propertyに**ProjectCode**を選択し、**Apply**をクリック

※UI Importanceはデフォルトのままで構いません。この項目は、デバイスの種類（デスクトップ、タブレット、モバイル）が変わったときに項目が表示されるかどうかをコントロールします。Highにすると、すべてのデバイスで表示されます。⇒[参考](https://sapui5.hana.ondemand.com/#/topic/0096cd2e7abb4c3fb11cf4dedc9fa740)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b2e38bb6-06c6-7586-9440-e40d2e15ed58.png)
UI.LineItemのブロックが追加されます。ここでは、`<Record Type="UI.DataField">...</Record>`のブロックが1項目を表します。このブロックをコピーして項目を増やしていきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e3bc9f36-5f2c-40fc-9660-677a09a452f1.png)

以下の項目を追加しました。`toCustomer/name`のように、アソシエーション先の項目を表示することもできます。

```xml
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="projectCode"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="projectName"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="toCustomer/name"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="toManager/fullName"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="startsAt"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="endsAt"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="toStatus/text"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                    </Collection>
                </Annotation>
```

####3.3. Object Pageヘッダの定義
テーブルの行を選択するとObject Pageにナビゲーションします。ここからは、Objedct Pageのコンテンツを設定していきます。まずはヘッダです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/eab1bb39-734f-ab90-38f1-45c83b9647b7.png)

- "header"で検索し、**Configure object page header**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0e99de8d-ca4f-2a82-997d-aa8719ddef30.png)

- Entity Typeに**Projects**、 Type Nameに**Project**、Type Name (Plural)に**Projects**、Object Titleに**projectCode**を設定して**Apply**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a53c8c57-43e3-d723-9545-a0da3ecd82bc.png)

UI.HeaderInfoのアノテーションが追加されます。アノテーションは以下のように画面に反映されます。
※Type Nameについては、ラウンチパッドから実行した場合にObject PageのShellヘッダのタイトルになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b2c9ac93-88ae-abfd-331b-23a143af41c8.png)

Object Pageでプロジェクトコードの下にundefinedと出ているのが気になるのと、画像は不要なので以下のようにアノテーションを修正します。

- `<PropertyValue Property="Description">...</PropertyValue>`を追加
- `<PropertyValue Property="TypeImageUrl">...</PropertyValue>`を削除

TitleとDescriptionはセットのようなものですが、Guided Developmentの設定項目には出てこないのです。Guided Develpmentは全てのUIアノテーションをカバーしているわけではないため、全体が知りたい場合は[こちら](https://github.com/SAP/odata-vocabularies/blob/master/vocabularies/UI.md)をご参照ください。

```xml
                <Annotation Term="UI.HeaderInfo">
                    <Record Type="UI.HeaderInfoType">
                        <PropertyValue Property="TypeName" String="Project"/>
                        <PropertyValue Property="TypeNamePlural" String="Projects"/>
                        <PropertyValue Property="Title">
                            <Record Type="UI.DataField">
                                <PropertyValue Property="Value" Path="projectCode"/>
                            </Record>
                        </PropertyValue>
                        <PropertyValue Property="Description">
                            <Record Type="UI.DataField">
                                <PropertyValue Property="Value" Path="projectName"/>
                            </Record>
                        </PropertyValue>
                    </Record>
                </Annotation>
```

####3.4. コンテンツ（Facet）の定義
Object Pageのメインとなるエリアは、Facetと呼ばれるパーツを組み合わせて作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/71c31883-3faf-8f91-40e1-9dac5b0822a2.png)
ページの構造は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/155d88c4-3b67-559c-2314-00319dac47a5.png)

#####3.4.1. FieldGroupを作成
- **Add a filed group as a section to a page**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/00057e3f-33ee-12e2-3859-c858a0c225df.png)
Entity Typeに**Projects**、Qualifierに**GeneralGroup**、Propertyに**ProjectCode**を設定して**Apply**をクリック

※QualifierはあとでFacetからFiledGroupを参照するときに使うIDです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2ad86d48-66fa-700e-f140-378fc92922c8.png)
UI.FieldGroupが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ef3a44c3-3301-e575-33e4-28ca6ad08c5b.png)

- `<Record Type="UI.DataField">...</Record>`の部分をコピーしてGeneralGroupの項目を増やす

```xml
                <Annotation Term="UI.FieldGroup" Qualifier="GeneralGroup">
                    <Record Type="UI.FieldGroupType">
                        <PropertyValue Property="Data">
                            <Collection>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="projectCode"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="projectName"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="toCustomer_customer"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="toManager_user"/>
                                </Record>
                            </Collection>
                        </PropertyValue>
                    </Record>
                </Annotation>
```

- `<Annotation Term="UI.FieldGroup" Qualifier="GeneralGroup">...</Annotation>`の部分をコピーしてUI.FiledGroupをもう一つ追加。Qualifierは"TechnicalGroup"とする

```xml
                <Annotation Term="UI.FieldGroup" Qualifier="TechnicalGroup">
                    <Record Type="UI.FieldGroupType">
                        <PropertyValue Property="Data">
                            <Collection>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="startsAt"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="endsAt"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="toStatus_status"/>
                                </Record>
                            </Collection>
                        </PropertyValue>
                    </Record>
                </Annotation>
```

#####3.4.2.タスクを表示する明細（LineItem）を作成
- **Add a new column to a table**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/41e1bd10-b3be-ccb2-551a-d0f0973429eb.png)
- Entity Typeに**Tasks**、Propertyに**taskId**を選択し、**Apply**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b5f52851-8ec9-85c1-d469-eb83f95789a4.png)
- UI.LineItemが追加される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/353704b4-a486-e581-2315-18c9588d15a7.png)
- `<Record Type="UI.DataField">...</Record>`の部分をコピーして項目を増やす

```xml
            <Annotations Target="CatalogService.Tasks">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="taskId"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="description"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="toStatus/text"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                    </Collection>
                </Annotation>
            </Annotations>
```

#####3.4.3. Facetsを追加
前のステップで作成した部品をFacetsに配置します。

- **Add a new section to a page**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2953019e-0a6b-e52b-4530-89fbeb89ad1b.png)
- Entity Typeに**Projects**、Labelに**General Information**、IDに**GeneralInfo**を設定し、**Apply**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/49245817-d42b-5a71-44ea-b2e707582dc1.png)

※このタイミングでなぜかODataのVersionが"4"に変わってしまいエラーになるので、"4.0"に直します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a7a0fb63-40b3-15ca-4a54-f39f8b69427d.png)

- UI.Facetsが追加される
- Targetを**@UI.FieldGroup#GeneralGroup**に変更（Ctrl + Spaceで候補から選択可能）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5580689f-a1b9-8e73-0197-1bc223580db6.png)
- `<Record Type="UI.ReferenceFacet">...</Record>`の部分をコピーして、それぞれもう一つのFieldGroupとLineItemをターゲットに指定（項目も調整）

```xml
                <Annotation Term="UI.Facets">
                    <Collection>
                        <Record Type="UI.ReferenceFacet">
                            <PropertyValue Property="Label" String="General Information"/>
                            <PropertyValue Property="ID" String="GeneralInfo"/>
                            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#GeneralGroup"/>
                        </Record>
                        <Record Type="UI.ReferenceFacet">
                            <PropertyValue Property="Label" String="Technical Information"/>
                            <PropertyValue Property="ID" String="TechnicalInfo"/>
                            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#TechnicalGroup"/>
                        </Record>
                        <Record Type="UI.ReferenceFacet">
                            <PropertyValue Property="Label" String="Tasks"/>
                            <PropertyValue Property="ID" String="Tasks"/>
                            <PropertyValue Property="Target" AnnotationPath="toTasks/@UI.LineItem"/>
                        </Record>
                    </Collection>
                </Annotation>
```

####3.5. Taskの詳細画面を追加
Taskのテーブルからナビゲーションした詳細画面を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5e362ef1-cba0-701c-255a-6f6724609d38.png)


手順は3.3.～3.4.と同じなので割愛しますが、アノテーションは以下のようになります。

```xml:HeaderInfo
                <Annotation Term="UI.HeaderInfo">
                    <Record Type="UI.HeaderInfoType">
                        <PropertyValue Property="TypeName" String="Task"/>
                        <PropertyValue Property="TypeNamePlural" String="Tasks"/>
                        <PropertyValue Property="Title">
                            <Record Type="UI.DataField">
                                <PropertyValue Property="Value" Path="taskId"/>
                            </Record>
                        </PropertyValue>
                        <PropertyValue Property="Description">
                            <Record Type="UI.DataField">
                                <PropertyValue Property="Value" Path="description"/>
                            </Record>
                        </PropertyValue>
                    </Record>
                </Annotation>
```

```xml:FieldGroup
                <Annotation Term="UI.FieldGroup" Qualifier="TaskGeneralGroup">
                    <Record Type="UI.FieldGroupType">
                        <PropertyValue Property="Data">
                            <Collection>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="taskId"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="description"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="startsAt"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="endsAt"/>
                                </Record>
                                <Record Type="UI.DataField">
                                    <PropertyValue Property="Value" Path="toStatus_status"/>
                                </Record>
                            </Collection>
                        </PropertyValue>
                    </Record>
                </Annotation>
```
```xml:toMembers/LineItem
            <Annotations Target="CatalogService.Members">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="toMember_user"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="toMember/fullName"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                    </Collection>
                </Annotation>
            </Annotations>
```

```xml:Facets
                <Annotation Term="UI.Facets">
                    <Collection>
                        <Record Type="UI.ReferenceFacet">
                            <PropertyValue Property="Label" String="General Information"/>
                            <PropertyValue Property="ID" String="TaskGeneralInfo"/>
                            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#TaskGeneralGroup"/>
                        </Record>
                        <Record Type="UI.ReferenceFacet">
                            <PropertyValue Property="Label" String="Members"/>
                            <PropertyValue Property="ID" String="TaskMembersInfo"/>
                            <PropertyValue Property="Target" AnnotationPath="toMembers/@UI.LineItem"/>
                        </Record>
                    </Collection>
                </Annotation>
            </Annotations>
```

##さいごに
以上で、コーディングなしでFioriアプリを作成できました。とはいえ、「ある画面要件を実現したいときに、Guided Developmentのどの項目を使えばいいのか？」という判断は最初は難しく感じるかもしれません。右上の検索はそんなとき助けになるかもしれません。思いついたキーワードを入れると、関連しそうなガイドを出してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e72b0527-b61c-70c8-5b09-84527123b158.png)
「こんな画面を作りたいけどどんなアノテーションを使ったらよいか？」については、ABAP CDSベースですが以下のような記事も書いています。

- [【Fiori】List Reportのためのアノテーション](https://qiita.com/tami/items/87a4d18e9954cd4c34ee)
- [【Fiori】Object Pageのためのアノテーション](https://qiita.com/tami/items/c6585f743936146a4ede)
- [【Fiori】Analytical List Pageで家計簿を作ってみる](https://qiita.com/tami/items/05765d6a538d9ea7c30f)

##参考（SAP Fiori toolsについて）

- [SAP Fiori tools is generally available. Increase the efficiency of developing SAP Fiori elements apps](https://blogs.sap.com/2020/06/22/sap-fiori-tools-is-generally-available.-increase-the-efficiency-of-developing-sap-fiori-elements-apps/)
- [SAP Help Portal](https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US)
- [チュートリアル](https://developers.sap.com/tutorial-navigator.html?sort=latest_asc&search=application%20programming%20model&tag=products:technology-platform/sap-fiori/sap-fiori-tools)