SAPクラウド演習3. 標準アプリの拡張

演習の目的

SAP導入企業はカスタム項目を追加するなど、バックエンドERPを拡張して使っています。SAP Fiori においても、それらの追加項目を表示したいという要件が当然でてきます。

そんな時に、アプリのソースコードを丸ごとコピーして変更したら、後のメンテナンスが大変です。標準コードのバク修正があったり、新しいバージョンで新機能が追加されたりします。バックエンド側にEXITやBADIの拡張機能がありますが、同じような概念をフロントエンド側の SAPUI5に持ってきたのが、SAPUI5 拡張ポイント です。

拡張は差分だけの開発で、実行時に標準コードとマージされて実行されます。利用パターンとしては以下が考えられます。

• SAP標準アプリをカスタマープロジェクトで拡張
• 本社カスタムアプリを標準として、海外支社で拡張利用
• パートナー企業がパッケージアプリを開発し、カスタマープロジェクトで拡張

この演習3では以下を学びます。

1. SAP Fiori リファレンスアプリを使ってサンプルプロジェクトを作成します。これらサンプルは本稼働で使われるレベルの機能を持っています。実プロジェクトに近いサンプルアプリで拡張を体験できます。
2. 拡張プロジェクトの作成
3. ビュー拡張を実装
4. SAP Web IDE の拡張ウィンドウから不必要なボタンを非表示
5. 詳細ビューの拡張ポイントを実装

この拡張ではComponent.js が重要な役割を担います。各章でComponent.js のコードを参照してみてください。

1.   サンプルプロジェクトの作成

SAP Fiori リファレンスアプリを元にサンプルプロジェクトを作成します。SAP Web IDEで提供されているサンプルの中からPurchase Order Approval app を選択します。

Note: 過去のバージョンでサンプルプロジェクトを作成した事がある場合は、古いプロジェクトを削除して、新規にプロジェクトを作り直してください。

1.1. 演習1で登録したブックマークからSAP Web IDE を起動

1.2. メニューからFile à New à Project from Sample Application

1.3. Approve Purchase Orders を選択し Next.

1.4. ライセンス文面に同意して Finish.

1.5. サンプルプロジェクトnw.epm.refapps.ext.po.apv が作成されました。

• viewフォルダにはSAPUI5 のビュー
• modelフォルダにはモックデータ
• localIndex.htmlがアプリ起動の入り口です

1.6.       Purchase Order Approval アプリをアプリプリビューでテストします。localIndex.htmlから右ボタン、または、メニューからRun à Run with Mock Data

Note: SAP Fiori リファレンスアプリはモックデータで動くようになっています。バックエンドサービスとのデータバインディングはされていません。

これがSAP Fiori の標準アプリと思ってください。これから、お客さんの要件に応じて標準アプリを拡張していきます。実プロジェクトでは、標準アプリはバックエンドのGateway サーバーに格納されているのでインポートしてから拡張します。

Note: 拡張では標準のコードを変更することはありません。モディファイではなく、差分のみの拡張開発です。この拡張は、パッケージビジネスや、クラウドで企業ごとに別画面を提供する時に重要な仕組みになります。

2.   拡張プロジェクトの作成

標準アプリを拡張する場合は、差分開発の拡張プロジェクトを作成します。

2.1. メニューから File à New à Extension Project を選択するとNew Extension Project ウィザードがスタートします。

2.2. Workspace… ボタンを選択し、親のプロジェクトnw.epm.refapps.ext.po.apv を指定します。

2.3. 他のフィールドはデフォルトのままで Next 、 Finish でウィザードを終了します。

2.4.作成された拡張プロジェクトnw.epm.refapps.ext.po.apvExtension を展開して親プロジェクトのnw.epm.refapps.ext.po.apv と比べてください。拡張プロジェクトは差分開発のため親プロジェクトよりも少ないファイルで構成されています。

2.5. nw.epm.refapps.ext.po.apvExtension プロジェクトからlocalindex.html を選択

2.6.       メニューからRun à Run with Mock Dataでアプリプリビューでテストします。今は拡張アプリを起動しましたが、まだ何も拡張していないので親アプリがそのままロードされます。

3.   ビュー拡張ポイントに購買発注承認依頼のコメント表示を追加

最初の拡張演習は、以下のように発注伝票承認依頼のコメントを表示させます。

3.1. プロジェクトフォルダからnw.epm.refapps.ext.po.apvExtension で右クリックNew à Extension

3.2. 現在の拡張プロジェクトの場所 /nw.epm.refapps.ext.po.apvExtension を確認して、Next

3.3. ウィザード、ステップ2でExtend View/Fragment を選択し Next

3.4. 以下の2つを選択

• View/Fragment: S3_PurchaseOrderDetails
• Extension Point: extensionAfterObjectHeader

3.5. Next

3.6. Finishでウィザード終了

ウィザードが終了すると、view フォルダに新規のfragment.xml が作成されます。このファイルに拡張コードを追加します。

3.7. 拡張プロジェクトnw.epm.refapps.ext.po.apvExtension を確認し、view フォルダからfragment.xml を開きます。S3_PurchaseOrderDetails_extensionAfterObjectHeaderCustom.fragment.xml

3.8.       以下のコードを追加します。

<form:SimpleForm       xmlns:form=”sap.ui.layout.form” title=”Note” layout=”ResponsiveGridLayout” minWidth=”1024″ maxContainerCols=”2″ class=”nwEpmRefappsExtPoApvControlLayout” labelSpanL=”3″ labelSpanM=”3″ emptySpanL=”5″ emptySpanM=”5″ columnsL=”1″ columnsM=”1″>

          <Label xmlns=”sap.m” text=”Please approve purchase order”/>

          <Text xmlns=”sap.m” text=”{POId}”/>

</form:SimpleForm>

3.9. Save

3.10.    Component.jsのファイルを開きます。sap.ui.viewExtensionsという名前でS3ビューの拡張が管理されています。

  注意：Component.js はマニュアルで変更しないでください。SAPUI5で拡張の仕組みがどのように管理されているか理解するためにこのファイルを開きました。

3.11. nw.epm.refapps.ext.po.apvExtension の拡張プロジェクトからlocalindex.html を選択

3.12. メニューからRun à Run withMock Dataでテスト。拡張したNote セクションが表示されている事を確認。

アプリプリビュー画面からRefresh で再読み込みもできます。

4.   拡張画面で不必要なボタンを非表示

標準アプリのフル機能は必要ないので非表示にして画面をシンプルにしたいという要件はよくあるケースです。上の画面の右下のボタンを隠します。

4.1. nw.epm.refapps.ext.po.apvExtension の拡張プロジェクトを確認して、選択

4.2. メニューから Tools à Extensibility Pane with Mock Dataで拡張画面を表示します。これから右下にあるShare ボタンを隠すステップを学びます。

4.3. 画面を拡張する場合はPreview Mode から Extensibility Mode へ切り替えます

4.4. 右下のShare ボタンを選択すると、右側のOutline 画面が更新されます。

4.5. btnShareのノードで右クリックしてHide Controlを選択、Yes で変更を確認。

4.6. ボタンが非表示になった事を確認

4.7. 右上の  ボタンで拡張画面をクローズして、Component.js を再度見てみましょう。新しい拡張  sap.ui.viewModifications が追加されています。

  注意：Component.js はマニュアルで変更しないでください。SAPUI5で拡張の仕組みがどのように管理されているか理解するためにこのファイルを開きました。

5.   ビュー拡張ポイントで拡張ビューを実装 （ウィザード使わない場合）

最後の拡張演習は通貨コードを画面に追加します。今度はウィザードを使わずに拡張画面から行います。以下のようにビューを拡張します。

5.1. nw.epm.refapps.ext.po.apvExtension 拡張プロジェクトを確認して選択

5.2. メニューからTools à Extensibility Pane with Mock Dataで拡張画面を表示

5.3. General Information ブロック下の拡張ポイントを探すには右側のOutline 画面から Show extensible elements で表示させます。

5.4. Outline画面でView -> S3_PurchaseOrderDetails -> detailsPage

5.5. 拡張ポイントextensionAfterFormで右クリックしてExtend

5.6. 確認画面でOK

5.7. コードを編集するには拡張ポイントextensionAfterForm が選択されている事を確認して、一番下にあるボタンGo to Code -> Extension Code でコード・エディタへジャンプ

5.8. fragment.xml に以下のコードを追加 (S3_PurchaseOrderDetails_extensionAfterFormCustom.fragment.xml)

<IconTabBar>

  <items>

    <IconTabFilter

id=”ZiconTabFilter”

icon=”sap-icon://hint”>

             <form:SimpleForm xmlns:form=”sap.ui.layout.form” title=”” layout=”ResponsiveGridLayout” minWidth=”1024″ maxContainerCols=”2″ class=”nwEpmRefappsExtPoApvControlLayout” labelSpanL=”3″ labelSpanM=”3″ emptySpanL=”5″ emptySpanM=”5″ columnsL=”1″ columnsM=”1″>

<Label xmlns=”sap.m” text=”Currency Code”/>

                        <Text xmlns=”sap.m” text=”{CurrencyCode}”/>

             </form:SimpleForm>

    </IconTabFilter>

  </items>

</IconTabBar>

5.9. Save

5.10.    Component.jsのファイルを開きます。extensionAfterForm部分が追加されています。

  注意：Component.js はマニュアルで変更しないでください。SAPUI5で拡張の仕組みがどのように管理されているか理解するためにこのファイルを開きました。

• nw.epm.refapps.ext.po.apvExtension の拡張プロジェクトからlocalindex.html を選択
• メニューからRun à Run with Mock Dataでテスト。詳細画面をスクロールダウンするとIconTabBarのコントロールがあり、クリックすると追加した通貨コードが表示/非表示されます。

6.    アプリプリビュー画面からRefreshで再読み込みもできます。

  この演習では、標準のコードをモディファイすることなく、拡張で差分開発できる事を体験しました。標準コードがバージョンアップされても、修正のコードが更新されても、拡張部分はそのままでアプリが動くのでメンテナンスコストを抑える事ができます。