sitTokyo2023_Flexible_Programming_Modelで_Fiori_elements_or_フリースタイル_の壁を打ち破る.pdf

SAP Inside Track Tokyo 2023,
Week2: Digital Transformation with SAP S/4HANA & AIでの発表資料

sitTokyo2023_Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る

Transcript

1. Putting to an end to „Fiori elements or Freestyle“ discussion with Flexible Programming Model 2023-02-09: Week 2 – Digital Transformation wS4 and AI
2. 2 名前： 安竹みお 役割： BTP, S/4HANAなどの技術調査、プロジェクト支援 TechEd 参加目的：技術情報の収集 関心のある分野：SAPUI5, Fiori elements, CAP, CPI 安竹みお(tami)
3. 2023年2月9日 安竹 みお Flexible Programming Modelで「Fiori elements or フリース タイル」の壁を打ち破る SAP Inside Track 2023 TOKYO
4. 4 1. Flexible Programming Modelとは 2. Flexible Programming Modelは何がうれしいか 3. Flexible Programming Modelが提供する3本柱 4. どんなことができるか 5. Flexible Programming Modelを使うために必要なこと 6. メッセージ：始めてみよう Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る
5. 5 Intelligent, Sustainable Enterprise Intelligent, sustainable enterprise Lead to cash Recruit to retire Design to operate Source to pay ビジネスネットワーク インダストリ ー クラウド エクスペリエンス管理 計画 ソリューション領域 テクノロジー アプリケーション開発 自動化 インテグレーション データ管理＆分析 AI 業種固有の エンドツーエンドプロセス ビジネスプロセス ビジネスプロセス管理 一貫性の あるUX One ワークフ ローインボックス E2Eのプロセス 設計図 共通のドメイン モデル 統合されたセキュ リティ&ID管理 コーディネイトさ れたライフサイク ル管理 組み込み/ クロスアプリの アナリティクス エンタープライズリソース管理 (ERP) 支出管理 人事・人材管理 (HCM) 顧客管理 (CRM)
6. 6 1. Flexible Programming Modelとは 2. Flexible Programming Modelは何がうれしいか 3. Flexible Programming Modelが提供する3本柱 4. どんなことができるか 5. Flexible Programming Modelを使うために必要なこと 6. メッセージ：始めてみよう Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る
7. 7 • OData V4ベースのFioriアプリを作成するときに使える開発手法 (SAPUI5 1.91～) • Fiori elementsのような見た目を提供しながら比較的自由な拡張ができる 1. Flexible Programming Modelとは Flexible Programming Model Fiori elements フリースタイル 画面拡張、ロジック拡張 Fiori elementsの部品を使用
8. 8 1. Flexible Programming Modelとは 2. Flexible Programming Modelは何がうれしいか 3. Flexible Programming Modelが提供する3本柱 4. どんなことができるか 5. Flexible Programming Modelを使うために必要なこと 6. メッセージ：始めてみよう Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る
9. 9 • 「Fiori elementsか、フリースタイルか」で悩まなくていい！ 2. Flexible Programming Modelは何がうれしいか こんな感じの画面を作りたいとき… List Report (Fiori elements) かな… こんな機能が欲しいな List Reportでは無理かな。 フリースタイルだな… Smart ControlでList Report っぽい画面を作ろう
10. 10 • なぜ悩む必要があったのか？ ⇒ 従来のFiori elements（V2ベース）とフリースタイルはアプリの作りが違った 2. Flexible Programming Modelは何がうれしいか manifest.jsonの比較 Fiori elements フリースタイル
11. 11 • Flexible Programming Modelでは、Fiori elementsもフリースタイルも同じ作り 2. Flexible Programming Modelは何がうれしいか Fiori elementsにフリースタイルのページを組み込む フリースタイルにFiori elementsのページを組み込む だから、こんなことができる！ 参考： Blog: Leverage the flexible programming model to extend your SAP Fiori elements apps for OData V4
12. 12 • Flexible Programming Modelを使えば、 2. Flexible Programming Modelは何がうれしいか こんな感じの画面を作りたいとき… 入り口はList Reportにしよう この機能はフリースタイルのページでやろう！
13. 13 1. Flexible Programming Modelとは 2. Flexible Programming Modelは何がうれしいか 3. Flexible Programming Modelが提供する3本柱 4. どんなことができるか 5. Flexible Programming Modelを使うために必要なこと 6. メッセージ：始めてみよう Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る
14. 14 3. Flexible Programming Modelが提供する3本柱 Extension points Building blocks Controller extensions
15. 15 3. Flexible Programming Modelが提供する3本柱 Extension points Building blocks Controller extensions • Fiori elementsアプリケーションのUIを拡張できるポイント • 拡張した箇所に任意のコントロールを配置できる 1. セクション 2. サブセクション 3. アクション 4. カラム（列） 5. ヘッダーファセット 6. フォームの項目 7. フィルタ 8. フリースタイルのページを追 加 9. List Reportにビュー追加 詳しくは：SAP Fiori Elements: Flexible Programming Model Explorer | Extension Points 拡張ポイント
16. 16 Extension points Building blocks Controller extensions 3. Flexible Programming Modelが提供する3本柱 詳しくは：SAP Fiori Elements: Flexible Programming Model Explorer | Building Blocks 1. フィールド 2. フォーム 3. フォームエレメント 4. テーブル 6. フィルターバー 7. フィルター項目 8. マイクロチャート など • Fiori elementsの拡張やフリースタイルで使えるUI部品 • Smart Controlの進化系 見た目だけでなく動作もFiori elementsと同じにできる 部品例
17. 17 Extension points Building blocks Controller extensions 3. Flexible Programming Modelが提供する3本柱
18. 18 3. Flexible Programming Modelが提供する3本柱 Extension points Building blocks Controller extensions • Fiori elementsの標準ロジックを利用・追加・上書きするためのメソッド • フリースタイルでも使える 1. 標準の更新処理の前にロジック追加 2. ページ遷移の前後にロジック追加 3. 外部アプリへ遷移する際のパラメータ書き換え など 詳しくは：SAP Fiori Elements: Flexible Programming Model Explorer | Controller Extensions できることの例
19. 19 1. Flexible Programming Modelとは 2. Flexible Programming Modelは何がうれしいか 3. Flexible Programming Modelが提供する3本柱 4. どんなことができるか 5. Flexible Programming Modelを使うために必要なこと 6. メッセージ：始めてみよう Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る
20. 20 4. どんなことができるか ①Fiori elementsにフリースタイルを組み込む例 デモ動画：SAP Fiori elements: Extending your application with custom controls Gitリポジトリ：SAP-samples/fiori-elements-v4-cap-advanced（ブランチ：fpmVideos） List Report Custom Page Object Page Custom Section
21. 21 4. どんなことができるか ②フリースタイルにFiori elementsを組み込む例 デモ動画：SAP Fiori elements: Going freestyle with the flexible programming model Custom Page Custom Page Object Page Building Blocks Building Blocks
22. 22 1. Flexible Programming Modelとは 2. Flexible Programming Modelは何がうれしいか 3. Flexible Programming Modelが提供する3本柱 4. どんなことができるか 5. Flexible Programming Modelを使うために必要なこと 6. メッセージ：始めてみよう Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る
23. 23 • ODataサービスの条件 • OData V4 • ドラフト対応していること（更新ありの場合） 5. Flexible Programming Modelを使うために必要なこと • フリースタイルアプリの作り方 • Flexible Programming Modelに対応した書き方（※）にする（manifest.jsonやコントローラー） ※詳しくは：SAP Fiori Elements: Flexible Programming Model Explorer | Building Blocks | Guidance | Usage in Custom Apps
24. 24 1. Flexible Programming Modelとは 2. Flexible Programming Modelは何がうれしいか 3. Flexible Programming Modelが提供する3本柱 4. どんなことができるか 5. Flexible Programming Modelを使うために必要なこと 6. メッセージ：始めてみよう Flexible Programming Modelで「Fiori elements or フリースタイル」の壁を打ち破る
25. 25 • 手を動かす • TechEd 2022 | DT181 - Boost Your Productivity in Developing SAP Fiori Apps 6. メッセージ： 始めてみよう • 概要を知る • Qiita | Fiori: Flexible Programming Modelの概要 • Youtube | SAP Fiori elements Flexible Programming Model • ドキュメントとサンプルソース • Flexible Programming Model Explorer
26. 26 参考 • SAP Blog | Leverage the flexible programming model to extend your SAP Fiori elements apps for OData V4 • SAP Blog | How to create an SAP Fiori app using SAP Fiori elements, SAPUI5 freestyle or a mix of both with the Flexible Programming Model • SAP Blog | Video series on flexible programming model for SAP Fiori elements 引用、参考、参照、転載の一覧