【SAP Fiori】標準アプリの拡張

##はじめに
標準のFioriアプリケーションに項目を追加したり、機能を追加したい場合に拡張できるスポットが用意されています。

##拡張の種類
ビュー、コントローラーいずれも標準を上書きすることも可能ですが、拡張の利点が失われてしまうので推奨されません。ここでの拡張の利点とは、標準部分に機能追加などの変更があった場合、拡張側にも自動的に反映されるということです。

**ビュー**

| 種類     |拡張方法        |おすすめ度        |
|:-----------------|:------------------|:------------------|
| Extension |標準ビューにFragmentとして画面項目をする |○        |
| Modification |標準ビューの項目を消したり、属性を変えたりする |○        |
| Replacement |標準ビューをアドオンのビューと交換する |△        |

**コントローラー**

| 種類     |拡張方法        |おすすめ度        |
|:-----------------|:------------------|:------------------|
| Extension |標準コントローラーのメソッドに処理を追加、または上書きする|○        |
| Replacement |標準コントローラーをアドオンのコントローラーと交換する |△        |

##拡張できる箇所の探し方
拡張の種類のうち"Extention"については、[Fiori App Library](https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/)に拡張できるスポットが載っています。対象のアプリを検索し、Extensibilityのセクションを見ます。以下は[Manage Cost Centers](https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F1443')/S11OP)というアプリの例です。

Technical Nameのところに書かれているのが拡張するときに必要なAppの技術名称です。その下がビューの拡張ポイントで、ここではフィルタ項目の追加と、テーブルの列追加ができることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0c50794b-a3ce-09ad-aa39-152885fa8253.png)

コントローラーの拡張スポットでは、ヘッダ（※）にボタンを追加することができます。
※ヘッダと書いてありますが、実装してみるとフッタでした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/502f4383-7cf5-7d88-654f-ecdf0248d257.png)

##拡張プロジェクトの登録
標準アプリを拡張するためには、拡張プロジェクトを登録する必要があります。WebIDEで拡張プロジェクトを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b1b0e7f1-06fb-e433-d596-f4e0c446dbe0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b97b2d53-c5a8-7974-4028-d4dd4188d0af.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/acf86ea1-4efd-994e-f7f0-5c528121c5ef.png)
SAP UI5バージョンはバックエンドのに合わせて指定します。（ここではオンプレミスの環境を使用）
"Import original application"にチェックを入れ、参照用にオリジナルのアプリケーションもインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a3701555-167e-9b24-acca-978fe18c3db8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2af5b453-f147-c596-7b8b-dd6f476a6849.png)
オリジナルのアプリのフォルダと、拡張プロジェクトのフォルダが登録されました。
<img width="238" alt="extensionProject.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f5fcc294-192c-2ed5-9712-a9515e4f3ed8.png">

extensibility paneが開き、現状のアプリのプレビューが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/bd1f7007-4ab6-940d-ced0-e923aafc9c36.png)

##ビューの拡張方法
以下の拡張を行います。
①フィルタ項目の追加
②テーブル列の追加
③標準項目の非表示化(Modification)
###フィルタ項目の追加
原価センタの構造にあるCityという項目のフィルタを追加します。
拡張ポイント"extFilters"を選択し、Extend>Extend/View/Fragmentをクリックします。
<img width="198" alt="extension.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1087358b-fee6-ea38-6616-95d933397ab4.png">
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/3799d0a8-59b8-4414-f8b5-9459333b7973.png)
拡張プロジェクトの"manifest.json"を見ると、S1というビューに対する拡張のフラグメントが追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/cd466d3b-fce8-abe8-3220-d548ee8ca87b.png)

原価センタのEntity Set(CostCenter)の中からCity(Ort01)という項目を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f068574d-87d4-3a30-e07d-1eda40821dc6.png)

```xml
<fb:ControlConfiguration xmlns:fb="sap.ui.comp.smartfilterbar" id="fin.co.costcenter.manage.s1.Ort01" key="Ort01" displayBehaviour="idAndDescription" groupId="_BASIC" index="6" visible="true" hasValueHelpDialog="true"/> 
```
####結果
項目が追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e3e9211c-1962-726d-dd53-01dc0ab07b9b.png)

###テーブル列の追加
検索条件に追加したのと同じ項目をテーブルにも追加します。
拡張ポイント"extTableColumns"を選択し、Extend>Extend/View/Fragmentをクリックします。
※拡張用の画面はTools>Extensibility Paneで開きます。
<img width="207" alt="extension_tab.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0980ff4e-b079-d224-74cd-bb324239fc93.png">

登録されたビューの拡張に、以下のようにコードを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/dd4cbed8-017b-d5a6-44c8-38ef8c3fdfb6.png)

拡張元のビューを参考に、項目のIDを追加項目のものに変更すればOKです。

```xml
	<t:Column xmlns:t="sap.ui.table" id="fin.co.costcenter.manage.COL_Ort01" autoResizable="true" filterProperty="Ort01" hAlign="Left" 
		width="auto" visible="true" xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
		data:persoKey="fin.co.costcenter.manage.view.S1.columns.ort01" sortProperty="Ort01">
		<t:label>
			<Label xmlns="sap.m" id="fin.co.costcenter.manage.table.ort01.label" design="Standard" text="{/#CostCenter/Ort01/@sap:label}"/>
		</t:label>
		<t:template>
			<Text xmlns="sap.m" id="fin.co.costcenter.manage.table.ort01.text" text="{Ort01}" wrapping="false"/>
		</t:template>
		<t:customData>
			<core:CustomData key="p13nData" value='\{"columnKey": "Ort01", "leadingProperty": "Ort01"}'/>
		</t:customData>
	</t:Column>
```

####結果
項目が左端に追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e64bb4c6-db3c-1fe9-526c-afde6b6d8c25.png)

左端でなく右端に追加できないのかな？と思ったのですが、元のビューを見ると拡張ポイントが一番上にあるので、左端に来るのはやむをえないのかもしれません。

**元のビュー**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b4971cb3-65e0-0144-0e7d-59af7230acba.png)

###標準項目の非表示化(Modification)
Profit Centerのフィルタ項目を非表示にします。

非表示にする項目を選択し、Extend>Hide Controlをクリックします。
<img width="196" alt="deletion_filter.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2228ec04-22cb-64ef-09b8-4a3e9f8c8cd7.png">

####結果
Profit Centerが非表示になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5b6e824e-3016-1069-ca0c-9711d3edb17a.png)


##コントローラーの拡張方法
フッタにボタンを追加します。
画面の赤枠で囲った部分に追加のボタンを出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/cfc7e35e-be10-6065-87f1-32683359ff9c.png)

拡張ポイント"extHookGetSettingsButton"を選択し、Extend>Extend UI Control Hookをクリックします。
<img width="198" alt="button_extension.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a384cacf-c8de-410c-6671-834a19d78c36.png">
以下のようなコードが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e633c4db-6cea-f2c5-66d5-5f65c474daab.png)
引数の"O"をデバッグで見てみると、buttonListという名前の配列を持っています。ここに新しいボタンの定義を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/7f8c4707-fb39-06aa-98bc-1b20e20dbceb.png)
以下のようにコードを書きます。

```javascript
	extHookGetSettingsButton: function (O) {
		// Place your hook implementation code here
		var helloButton = {
	        sId: "helloButton",
	        sI18nBtnTxt: "Hello", //本来はi18nから
	        bEnabled: true,
	        onBtnPressed: function (evt) {
	            sap.m.MessageToast.show("Hello");
	        }			
		};
		O.buttonList.push(helloButton);
	}
```
###結果
Helloボタンが追加されました。ボタンを押すとメッセージが出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5d75102b-9852-dcb1-b893-4d1c0676e980.png)

##まとめ
今回はFiori App Libraryに載っている拡張スポットを使いました。
このほかにも以下のようなことが拡張でできます。これらは別の機会に記事にしてみたいと思います。

- i18nテキストの拡張
- コントローラーメソッドの上書き
- ODataの拡張