はじめに

本ブログでは、Fiori Elementsを用いて開発されたList Report アプリケーションにカスタムアクションボタンを追加していきます。また、そのアクションボタンを修正し、SAPUI5で提供されるアイコンを使ってよりキャッチーなボタンを作成していきます。

目次

前提条件：バックエンドとなるCAPサービスの確認Application Generator を用いたFiori Elements List Reportアプリの作成Guided Developmentを用いたList Reportアプリの拡張カスタムコントローラーを用いたList Report アプリの拡張

1. 前提条件：バックエンドとなるCAPサービスの確認

今回は、支出管理を行うために設計された簡易的なCAPアプリケーションをバックエンドとして想定します。この辺りの具体的な作成手順については、下記ブログ記事をご参照ください。Productivity Tools と呼ばれるローコードツールにより迅速にバックエンド開発が可能となります。

2024/01最新版！Productivity Toolsを使ったCAPバックエンド開発①~モックデータ編~

2024/01最新版！Productivity Toolsを使ったCAPバックエンド開発②~HANA Cloud編~

また、最近リリースされたSAP Build Codeをご利用いただいている場合は、次のようにアプリケーションを構築することも可能です。

まず左側のメニューから、Jouleのアイコンをクリックします。AI-Copilot Jouleの対話画面が展開しますので、「/cap-gen-app」 というCAPアプリ作成用のコマンドを用いて、作成したいアプリケーションについて記述します。

Jouleにより生成されたソースコードを確認し、問題なければ 「Accept」 ボタンをクリックすると、コードベースに反映されます。

同様に、サンプルデータも作成しておきましょう。今度は 「/cap-gen-data」 というコマンドを用いて、サンプルデータの作成をリクエストします。すると、先ほど生成してコードベースに反映したデータモデルに基づき、サンプルデータが生成されます。これも 「Accept」 ボタンをクリックするとコードベースに初期データとして取り込まれます。

バックエンドとなるCAPアプリケーションは、ExpenseおよびCategoryというエンティティから構成され、例えばExpense次のようなデータを返すAPIとなります。

2. Application Generator を用いたFiori Elements List Reportアプリの作成

次に、このバックエンドCAPアプリケーションに対して、UIとなるFioriアプリケーションを生成します。今回は、Fiori Elementsと呼ばれる強力なローコード開発ツールを用いて開発を行います。これは5種類の雛形をもとにFiori UIを作成していくもので、大きな工数を削減することができます。詳細は下記をご参照ください。

https://experience.sap.com/fiori-design-web/smart-templates/

画面上部の検索窓から、「 >Fiori: Application Generator 」 と入力し、ヒットした項目をクリックします。

今回はList Reportのアプリケーションを作成するので、「List Report Page」 を選択し、「Next」 ボタンをクリックします。

Fiori Elementsでは、OData等のデータソースを渡すことで半自動的に画面の生成が可能となります。今回は、ステップ1であらかじめ用意したCAPを用いてUIを構築しますので、「Local CAP Project」を選択し、その中で定義されているODataサービスを指定します。

今回はExpenseに関するUIを作成したいので、Expenseエンティティを選択して次へ進みます。

このUIアプリケーションの名前等を設定し、次へ進みます。

次のページは特に設定を変更せずに 「Finish」 をクリックして設定は完了です。

しばらくすると、アプリケーションが生成されます。

cds watch

というコマンドによりアプリケーションの開発用サーバーを立ち上げると、下記のような画面となります。

Web Applicationsの下のリンクから、たった今生成したUIにアクセスできます。下記のような画面に遷移します。これが標準のFiori Elements List Report アプリケーションです。データの表示や並び替え、データの登録や削除、ドラフトの保存、Excelへのエクスポートなどよく挙がる要件は一通り満たすことができます。

3. Guided Developmentを用いたList Reportアプリの拡張

さて、ここまで開発してきたList Report アプリケーションに少々カスタマイズを行いたいとしましょう。例えば、カスタムのボタンの追加です。支出の管理アプリケーションなので、溜まったデータから生成AIのアドバイスを受けたいとしましょう。すると、この機能をトリガーするためのボタンが必要となります。この章では、Guided Developmentというローコードツールを用いて、List Report アプリケーションにカスタムのアクションボタンを追加していきます。

画面上部の検索窓に 「>Fiori Guided Development 」 と入力してヒットした項目をクリックします。

すると、このList Report アプリケーションに対して行うことの可能な拡張シナリオの一覧が表示されます。今回はカスタムアクションボタンを追加したいので、「 Add a custom action to a page using extensions 」 をクリックします。すると右側にその拡張シナリオの詳細が表示されますので、読み込んだのち、「 Start Guide 」 をクリックします。

するとこのアクションボタンに対して定義されるコントローラーやファンクションの名前の入力欄がありますので、任意の値を入力します。この中で、ボタンに記載するテキストやi18nの設定、データを選択していないとボタンを押せないようにするか、などの設定を行うことができます。今回はi18nによる翻訳設定等はおいておき、 「 Suggestion 」 と書かれたボタンを配置することとします。設定を終えると、青枠で示したようなコードスニペットが生成されます。これにより、カスタムアクションボタンが画面に挿入されます。「 Insert Snippets 」 をクリックして変更をコードベースに反映します。

変更の中身を見てみると、この Suggestion ボタンをクリックすると、「Custom handler invoked.」という記述のメッセージボックスが出現するようです。

早速試してみましょう。再び開発サーバーの画面を開くと、以下のようになります。Suggestion ボタンが表示されており、クリックすると期待通り、「Custom handler invoked.」という記述のメッセージボックスが出現しています。

4. カスタムコントローラーを用いたList Report アプリの拡張

それではもう一歩踏み込んでみましょう。この Suggestion ボタンをアイコン化したい場合にはどうすれば良いでしょうか？先ほどのGuided Developmentではアイコンを設定する項目はありません。ここで用いることのできる方法の一つが、カスタムコントローラーを利用して、デフォルトのFiori Elements List Reportページのコントローラーを拡張する方法です。今回はこれを実施してみましょう。

左側のメニューより、Project Explorerのアイコンをクリックします。画像にある通りにアクセスしていくと、「Page Map」 というツールを開くことができます。これはこのList Reportアプリケーションのページ遷移やページのプロパティを視覚的に捉えることのできる便利なツールです。

ここのList Report の箱の中にある、パズルのボタンをクリックします。すると右側に出現する 「Add Controller Extension」 をクリックします。こうすることで、List Reportページのコントローラーの拡張を定義できます。

任意の名前をつけましょう。

すると、Custom ControllerがList Report ページに対して定義されたことが確認できます。画像のボタンをクリックすると、ソースコードへジャンプすることが可能です。

webapp/ext/controllerの配下に、「 LR_CustomController.controller.js 」 というファイルが生成されています。中身を確認すると、デフォルトのList Reportアプリケーションのコントローラーをextendして、初期ロード時に実行されるコンストラクタである 「onInit()」 関数をoverrideしていることが確認できます。ここに任意のコードを書き込むことで、List Reportページの振る舞いを変更できるという仕掛けになります。

それでは今回利用するソースコードを書き込んでいきましょう。

sap.ui.define([
‘sap/ui/core/mvc/ControllerExtension’
],
function (ControllerExtension) {
‘use strict’;

return ControllerExtension.extend(‘expensemanager.expensemanager.ext.controller.LR_CustomController’, {
// this section allows to extend lifecycle hooks or hooks provided by Fiori elements
override: {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf expensemanager.expensemanager.ext.controller.LR_CustomController
*/
onInit: function () {
// you can access the Fiori elements extensionAPI via this.base.getExtensionAPI
// var oModel = this.base.getExtensionAPI().getModel();

const oView = this.getView();
var oPage = oView.byId(“expensemanager.expensemanager::ExpenseList–fe::ListReport”);

function findAndReplaceActionButton(oControl) {
if (!oControl) {
return;
}
if (oControl.getMetadata().getName() == “sap.ui.mdc.actiontoolbar.ActionToolbarAction”) {
if (oControl.getAction().getText() == “Suggestion”) {
oControl.getAction().setProperty(“icon”, “sap-icon://da-2”);
oControl.getAction().setProperty(“text”, “”);
}
}
if (oControl.getAggregation && typeof oControl.getAggregation === ‘function’) {
var aAggregations = [
“content”,
“actions”
];
aAggregations.forEach(function (sAggregationName) {
var oAggregation = oControl.getAggregation(sAggregationName);
if (Array.isArray(oAggregation)) {
oAggregation.forEach(findAndReplaceActionButton);
} else if (oAggregation) {
findAndReplaceActionButton(oAggregation);
}
});
}
}
findAndReplaceActionButton(oPage.getAggregation(“content”))
}
}
});
});

内容としてはList Report のViewにアクセスしてアクションボタンの一覧を取得し、その中から表示名が 「Suggestion」 であるボタンを探し出します。その後、そのアクションボタンに対して、iconプロパティを任意のアイコンのIDに設定し、代わりにtextプロパティを空白にします。

この変更を行った後、開発サーバーでUIを確認すると以下のようになっています。無事に拡張を行うことができました。

まとめ

本ブログでは、Fiori Elementsを用いて開発されたList Report アプリケーションにカスタムアクションボタンを追加し、それをアイコン化する方法について説明しました。具体的なステップとしては、CAPサービスをバックエンドとして設定、Fiori Application Generatorを使用してList Reportアプリケーションを作成しました。その後、Guided Developmentツールを用いてカスタムアクションボタンを追加し、カスタムコントローラーを用いてそのボタンをアイコン化しました。これにより、よりよりキャッチーなアプリケーションを作成する手順を解説しました。

​ はじめに本ブログでは、Fiori Elementsを用いて開発されたList Report アプリケーションにカスタムアクションボタンを追加していきます。また、そのアクションボタンを修正し、SAPUI5で提供されるアイコンを使ってよりキャッチーなボタンを作成していきます。 目次前提条件：バックエンドとなるCAPサービスの確認Application Generator を用いたFiori Elements List Reportアプリの作成Guided Developmentを用いたList Reportアプリの拡張カスタムコントローラーを用いたList Report アプリの拡張 1. 前提条件：バックエンドとなるCAPサービスの確認今回は、支出管理を行うために設計された簡易的なCAPアプリケーションをバックエンドとして想定します。この辺りの具体的な作成手順については、下記ブログ記事をご参照ください。Productivity Tools と呼ばれるローコードツールにより迅速にバックエンド開発が可能となります。2024/01最新版！Productivity Toolsを使ったCAPバックエンド開発①~モックデータ編~2024/01最新版！Productivity Toolsを使ったCAPバックエンド開発②~HANA Cloud編~ また、最近リリースされたSAP Build Codeをご利用いただいている場合は、次のようにアプリケーションを構築することも可能です。まず左側のメニューから、Jouleのアイコンをクリックします。AI-Copilot Jouleの対話画面が展開しますので、「/cap-gen-app」 というCAPアプリ作成用のコマンドを用いて、作成したいアプリケーションについて記述します。Jouleにより生成されたソースコードを確認し、問題なければ 「Accept」 ボタンをクリックすると、コードベースに反映されます。同様に、サンプルデータも作成しておきましょう。今度は 「/cap-gen-data」 というコマンドを用いて、サンプルデータの作成をリクエストします。すると、先ほど生成してコードベースに反映したデータモデルに基づき、サンプルデータが生成されます。これも 「Accept」 ボタンをクリックするとコードベースに初期データとして取り込まれます。バックエンドとなるCAPアプリケーションは、ExpenseおよびCategoryというエンティティから構成され、例えばExpense次のようなデータを返すAPIとなります。 2. Application Generator を用いたFiori Elements List Reportアプリの作成次に、このバックエンドCAPアプリケーションに対して、UIとなるFioriアプリケーションを生成します。今回は、Fiori Elementsと呼ばれる強力なローコード開発ツールを用いて開発を行います。これは5種類の雛形をもとにFiori UIを作成していくもので、大きな工数を削減することができます。詳細は下記をご参照ください。https://experience.sap.com/fiori-design-web/smart-templates/ 画面上部の検索窓から、「 >Fiori: Application Generator 」 と入力し、ヒットした項目をクリックします。今回はList Reportのアプリケーションを作成するので、「List Report Page」 を選択し、「Next」 ボタンをクリックします。Fiori Elementsでは、OData等のデータソースを渡すことで半自動的に画面の生成が可能となります。今回は、ステップ1であらかじめ用意したCAPを用いてUIを構築しますので、「Local CAP Project」を選択し、その中で定義されているODataサービスを指定します。今回はExpenseに関するUIを作成したいので、Expenseエンティティを選択して次へ進みます。このUIアプリケーションの名前等を設定し、次へ進みます。次のページは特に設定を変更せずに 「Finish」 をクリックして設定は完了です。しばらくすると、アプリケーションが生成されます。cds watchというコマンドによりアプリケーションの開発用サーバーを立ち上げると、下記のような画面となります。Web Applicationsの下のリンクから、たった今生成したUIにアクセスできます。下記のような画面に遷移します。これが標準のFiori Elements List Report アプリケーションです。データの表示や並び替え、データの登録や削除、ドラフトの保存、Excelへのエクスポートなどよく挙がる要件は一通り満たすことができます。 3. Guided Developmentを用いたList Reportアプリの拡張さて、ここまで開発してきたList Report アプリケーションに少々カスタマイズを行いたいとしましょう。例えば、カスタムのボタンの追加です。支出の管理アプリケーションなので、溜まったデータから生成AIのアドバイスを受けたいとしましょう。すると、この機能をトリガーするためのボタンが必要となります。この章では、Guided Developmentというローコードツールを用いて、List Report アプリケーションにカスタムのアクションボタンを追加していきます。画面上部の検索窓に 「>Fiori Guided Development 」 と入力してヒットした項目をクリックします。すると、このList Report アプリケーションに対して行うことの可能な拡張シナリオの一覧が表示されます。今回はカスタムアクションボタンを追加したいので、「 Add a custom action to a page using extensions 」 をクリックします。すると右側にその拡張シナリオの詳細が表示されますので、読み込んだのち、「 Start Guide 」 をクリックします。するとこのアクションボタンに対して定義されるコントローラーやファンクションの名前の入力欄がありますので、任意の値を入力します。この中で、ボタンに記載するテキストやi18nの設定、データを選択していないとボタンを押せないようにするか、などの設定を行うことができます。今回はi18nによる翻訳設定等はおいておき、 「 Suggestion 」 と書かれたボタンを配置することとします。設定を終えると、青枠で示したようなコードスニペットが生成されます。これにより、カスタムアクションボタンが画面に挿入されます。「 Insert Snippets 」 をクリックして変更をコードベースに反映します。変更の中身を見てみると、この Suggestion ボタンをクリックすると、「Custom handler invoked.」という記述のメッセージボックスが出現するようです。早速試してみましょう。再び開発サーバーの画面を開くと、以下のようになります。Suggestion ボタンが表示されており、クリックすると期待通り、「Custom handler invoked.」という記述のメッセージボックスが出現しています。 4. カスタムコントローラーを用いたList Report アプリの拡張それではもう一歩踏み込んでみましょう。この Suggestion ボタンをアイコン化したい場合にはどうすれば良いでしょうか？先ほどのGuided Developmentではアイコンを設定する項目はありません。ここで用いることのできる方法の一つが、カスタムコントローラーを利用して、デフォルトのFiori Elements List Reportページのコントローラーを拡張する方法です。今回はこれを実施してみましょう。左側のメニューより、Project Explorerのアイコンをクリックします。画像にある通りにアクセスしていくと、「Page Map」 というツールを開くことができます。これはこのList Reportアプリケーションのページ遷移やページのプロパティを視覚的に捉えることのできる便利なツールです。ここのList Report の箱の中にある、パズルのボタンをクリックします。すると右側に出現する 「Add Controller Extension」 をクリックします。こうすることで、List Reportページのコントローラーの拡張を定義できます。任意の名前をつけましょう。すると、Custom ControllerがList Report ページに対して定義されたことが確認できます。画像のボタンをクリックすると、ソースコードへジャンプすることが可能です。webapp/ext/controllerの配下に、「 LR_CustomController.controller.js 」 というファイルが生成されています。中身を確認すると、デフォルトのList Reportアプリケーションのコントローラーをextendして、初期ロード時に実行されるコンストラクタである 「onInit()」 関数をoverrideしていることが確認できます。ここに任意のコードを書き込むことで、List Reportページの振る舞いを変更できるという仕掛けになります。それでは今回利用するソースコードを書き込んでいきましょう。sap.ui.define([
‘sap/ui/core/mvc/ControllerExtension’
],
function (ControllerExtension) {
‘use strict’;

return ControllerExtension.extend(‘expensemanager.expensemanager.ext.controller.LR_CustomController’, {
// this section allows to extend lifecycle hooks or hooks provided by Fiori elements
override: {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf expensemanager.expensemanager.ext.controller.LR_CustomController
*/
onInit: function () {
// you can access the Fiori elements extensionAPI via this.base.getExtensionAPI
// var oModel = this.base.getExtensionAPI().getModel();

const oView = this.getView();
var oPage = oView.byId(“expensemanager.expensemanager::ExpenseList–fe::ListReport”);

function findAndReplaceActionButton(oControl) {
if (!oControl) {
return;
}
if (oControl.getMetadata().getName() == “sap.ui.mdc.actiontoolbar.ActionToolbarAction”) {
if (oControl.getAction().getText() == “Suggestion”) {
oControl.getAction().setProperty(“icon”, “sap-icon://da-2”);
oControl.getAction().setProperty(“text”, “”);
}
}
if (oControl.getAggregation && typeof oControl.getAggregation === ‘function’) {
var aAggregations = [
“content”,
“actions”
];
aAggregations.forEach(function (sAggregationName) {
var oAggregation = oControl.getAggregation(sAggregationName);
if (Array.isArray(oAggregation)) {
oAggregation.forEach(findAndReplaceActionButton);
} else if (oAggregation) {
findAndReplaceActionButton(oAggregation);
}
});
}
}
findAndReplaceActionButton(oPage.getAggregation(“content”))
}
}
});
});内容としてはList Report のViewにアクセスしてアクションボタンの一覧を取得し、その中から表示名が 「Suggestion」 であるボタンを探し出します。その後、そのアクションボタンに対して、iconプロパティを任意のアイコンのIDに設定し、代わりにtextプロパティを空白にします。この変更を行った後、開発サーバーでUIを確認すると以下のようになっています。無事に拡張を行うことができました。 まとめ本ブログでは、Fiori Elementsを用いて開発されたList Report アプリケーションにカスタムアクションボタンを追加し、それをアイコン化する方法について説明しました。具体的なステップとしては、CAPサービスをバックエンドとして設定、Fiori Application Generatorを使用してList Reportアプリケーションを作成しました。その後、Guided Developmentツールを用いてカスタムアクションボタンを追加し、カスタムコントローラーを用いてそのボタンをアイコン化しました。これにより、よりよりキャッチーなアプリケーションを作成する手順を解説しました。   Read More Technology Blogs by SAP articles 

#SAP

#SAPTechnologyblog