はじめに
標準のFioriアプリケーションに項目を追加したり、機能を追加したい場合に拡張できるスポットが用意されています。
拡張の種類
ビュー、コントローラーいずれも標準を上書きすることも可能ですが、拡張の利点が失われてしまうので推奨されません。ここでの拡張の利点とは、標準部分に機能追加などの変更があった場合、拡張側にも自動的に反映されるということです。
ビュー
| 種類 | 拡張方法 | おすすめ度 |
|---|---|---|
| Extension | 標準ビューにFragmentとして画面項目をする | ○ |
| Modification | 標準ビューの項目を消したり、属性を変えたりする | ○ |
| Replacement | 標準ビューをアドオンのビューと交換する | △ |
コントローラー
| 種類 | 拡張方法 | おすすめ度 |
|---|---|---|
| Extension | 標準コントローラーのメソッドに処理を追加、または上書きする | ○ |
| Replacement | 標準コントローラーをアドオンのコントローラーと交換する | △ |
拡張できる箇所の探し方
拡張の種類のうち"Extention"については、Fiori App Libraryに拡張できるスポットが載っています。対象のアプリを検索し、Extensibilityのセクションを見ます。以下はManage Cost Centersというアプリの例です。
Technical Nameのところに書かれているのが拡張するときに必要なAppの技術名称です。その下がビューの拡張ポイントで、ここではフィルタ項目の追加と、テーブルの列追加ができることがわかります。
コントローラーの拡張スポットでは、ヘッダ（※）にボタンを追加することができます。
※ヘッダと書いてありますが、実装してみるとフッタでした
拡張プロジェクトの登録
標準アプリを拡張するためには、拡張プロジェクトを登録する必要があります。WebIDEで拡張プロジェクトを登録します。
SAP UI5バージョンはバックエンドのに合わせて指定します。（ここではオンプレミスの環境を使用）
"Import original application"にチェックを入れ、参照用にオリジナルのアプリケーションもインポートします。
オリジナルのアプリのフォルダと、拡張プロジェクトのフォルダが登録されました。
extensibility paneが開き、現状のアプリのプレビューが表示されます。
ビューの拡張方法
以下の拡張を行います。
①フィルタ項目の追加
②テーブル列の追加
③標準項目の非表示化(Modification)
フィルタ項目の追加
原価センタの構造にあるCityという項目のフィルタを追加します。
拡張ポイント"extFilters"を選択し、Extend>Extend/View/Fragmentをクリックします。
拡張プロジェクトの"manifest.json"を見ると、S1というビューに対する拡張のフラグメントが追加されています。
原価センタのEntity Set(CostCenter)の中からCity(Ort01)という項目を追加します。
<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"/>
結果
項目が追加されます。
テーブル列の追加
検索条件に追加したのと同じ項目をテーブルにも追加します。
拡張ポイント"extTableColumns"を選択し、Extend>Extend/View/Fragmentをクリックします。
※拡張用の画面はTools>Extensibility Paneで開きます。
登録されたビューの拡張に、以下のようにコードを追加します。
拡張元のビューを参考に、項目のIDを追加項目のものに変更すればOKです。
<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>
結果
項目が左端に追加されました。
左端でなく右端に追加できないのかな？と思ったのですが、元のビューを見ると拡張ポイントが一番上にあるので、左端に来るのはやむをえないのかもしれません。
元のビュー
標準項目の非表示化(Modification)
Profit Centerのフィルタ項目を非表示にします。
非表示にする項目を選択し、Extend>Hide Controlをクリックします。
結果
Profit Centerが非表示になりました。
コントローラーの拡張方法
フッタにボタンを追加します。
画面の赤枠で囲った部分に追加のボタンを出します。
拡張ポイント"extHookGetSettingsButton"を選択し、Extend>Extend UI Control Hookをクリックします。
以下のようなコードが追加されます。
引数の"O"をデバッグで見てみると、buttonListという名前の配列を持っています。ここに新しいボタンの定義を追加します。
以下のようにコードを書きます。
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ボタンが追加されました。ボタンを押すとメッセージが出力されます。
まとめ
今回はFiori App Libraryに載っている拡張スポットを使いました。
このほかにも以下のようなことが拡張でできます。これらは別の機会に記事にしてみたいと思います。
- i18nテキストの拡張
- コントローラーメソッドの上書き
- ODataの拡張