はじめに
SAP CloudPlatformのCF環境にFiori Launchpadを作成してみたので、その応用としてLaunchpadに表示するタイルにグラフを表示してみます。
下記のブログを参考に、カスタムタイルを作成してLaunchpadに登録・公開しました。
【参考URL】
Custom Tiles with Cloud Foundry Portal – Cloud Platform
本投稿は以下の内容をベースとしてSAP CloudPlatformのCF環境上にFiori Launchpadを作成・公開までしていることが前提となっています。
SAP CP Trial環境でMulti Target Applicationを作ってみる【Fiori LanchPadモジュールの作成】
【SAP CP CF環境】Fiori LaunchpadでDynamic Tileを作ってみる
カスタムタイルアプリケーションの作成
Launchpadにグラフを表示するためにはまず、表示するタイルの見た目や処理を定義する必要があります。
そのため、専用のHTML5モジュールを作成してLaunchpadに表示するタイルを一つのアプリケーションとして作成します。
MTAプロジェクトを右クリック -> New -> HTML5 Moduleを選択し、新規モジュールを作成します。
テンプレートではSAPUI5 Applicationを選択しました。
作成時にViewファイル名をTileとしています。
新規モジュール内にcontroller/Tile.controller.jsとview/Tile.view.xmlが確認できます。
作成したHTML5モジュールの中身を編集し、カスタムタイルを作成します。
ViewファイルではGenericTileコンポーネントを作成するため、以下のように変更します。
通常の画面アプリケーションに存在するShellやAppは不要で、View配下に直接GenericTileを定義します。
<mvc:View controllerName="jp.co.kyoso.demo.demoCustomTileMod.controller.Tile"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m"
xmlns:microchart="sap.suite.ui.microchart">
<GenericTile
header="{view>/title}"
subheader="{view>/subTitle}"
frameType="OneByOne"
press="onPress"
busy="{view>/busy}"
>
<tileContent>
<TileContent>
<content>
<microchart:HarveyBallMicroChart formattedLabel="true" total="{view>/total}" size="Responsive" alignContent="Center">
<microchart:items>
<microchart:HarveyBallMicroChartItem fraction="{view>/count}" color="Good" />
</microchart:items>
</microchart:HarveyBallMicroChart>
</content>
</TileContent>
</tileContent>
</GenericTile>
</mvc:View>
作成したViewに合わせて、Controllerファイルを編集します。
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("jp.co.kyoso.demo.demoCustomTileMod.controller.Tile", {
_oProperties: {},
_oViewModel: undefined,
onInit: function () {
var oComponentData = this.getOwnerComponent().getComponentData();
console.log("tile Init oComponentData:", oComponentData);
this._oProperties = (oComponentData && oComponentData.properties) ? oComponentData.properties : {
title: "Fallback Title",
subtitle: "Fallback SubTitle",
targetURL: "#"
};
console.log("tile set oProperties:", this._oProperties);
this._oViewModel = this._initViewModel();
this.getView().setModel(this._oViewModel, "view");
// 固定値でグラフを表示
this._oViewModel.setProperty("/total", 100);
this._oViewModel.setProperty("/count", 20);
this._oViewModel.setProperty("/busy", false);
},
/* =========================================================== */
/* internal methods */
/* =========================================================== */
/**
* Creates view model (local view model).
*
* @returns {sap.ui.model.json.JSONModel} Local JSON model for fragment data
* @private
*/
_initViewModel: function () {
var oData = {
busy: false,
title: this._oProperties.title,
subTitle: this._oProperties.subtitle,
notifications: 0,
info: 0
};
if (!this._oViewModel) {
return new JSONModel(oData);
} else {
this._oViewModel.setData(oData);
return this._oViewModel;
}
},
onPress: function () {
var sTargetUrl = this._oProperties.targetURL;
if (sTargetUrl) {
if (sTargetUrl[0] === "#") {
hasher.setHash(sTargetUrl);
} else {
window.open(sTargetUrl, "_blank");
}
}
}
});
});
上記変更後にindex.htmlを実行すると下図のようにタイルが表示できます。
作成したTileアプリをLaunchpadに設定する
HTML5モジュール：manifest.jsonの更新
HTML5モジュールで作成したカスタムタイルをLaunchpadに設定します。
まず、HTML5モジュールのwebapp/manifest.jsonに以下の設定を追加します。
"sap.flp": {
"type": "tile",
"tileSize": "1x1"
},
Lunchpadモジュール：baCustomTile.jsonの作成
カスタムタイルの設定はLaunchpadモジュールの配下に特定のディレクトリとファイルを作成する必要があるとのことなので、
portal-site/business-apps/baCustomTile.jsonを作成しました。
baCustomTile.jsonには以下を記載します。
{
"_version": "3.0.0",
"identification": {
"id": "jp.co.kyoso.demo.demoUIMod",
"entityType": "businessapp",
"i18n": "i18n/customTile.properties"
},
"payload": {
"visualizations": {
"customTile-displayGraph": {
"vizType": "jp.co.kyoso.demo.demoCustomTileMod",
"vizConfig": {
"sap.app": {
"title": "{{customTile.title}}",
"subTitle": "{{customTile.subtitle}}"
},
"sap.flp": {
"target": {
"inboundId": "demoUI-display"
}
}
}
}
}
}
}
それぞれの設定値は以下のようになっています。
| 項目 | 値 |
|---|---|
| identification.id | タイル押下時に呼び出すHTML5モジュールのnamespaceを指定 |
| visualizations配下のKey | JSONのKeyに任意のIDを設定する（カスタムタイルのIDとしてCommonDataModel.jsonで使用する） |
| vizType | 定義したID（この場合はcustomTile-displayGraph）に紐づくカスタムタイルのnamespaceを指定 |
| inboundId | 呼び出すHTML5モジュールの"SemanticObject-action"を指定 |
また、title・subTitleはi18nの定義を参照しています。
読み込むプロパティファイルはLaunchpadモジュール内に定義しました。
Lunchpadモジュール：CommonDataModel.jsonの編集
CommonDataModel.jsonをLaunchpad Editerで開き、タイル設定の追加を行います。
今回はグラフのタイルを押下した際にdemoUIModモジュールを表示するように設定しようと思うので、
まずはdemoUIModモジュールのタイルを追加しました。
Code Editerで確認するとgroups.payloadの配下にタイル設定が追加されています。
追加された設定をベースに、以下を変更します。
groups.payload.viz
追加された設定のうち、vizIdをbaCustomTile.jsonのvisualizationsに定義したKeyに変更します。
{
"id": "jp.co.kyoso.demo.demoUIMod-2-1603264832519",
"appId": "jp.co.kyoso.demo.demoUIMod",
"vizId": "customTile-displayGraph"
}
catalogs.payload.viz
catalogs.payload.vizにも以下を追加します。
{
"id": "jp.co.kyoso.demo.demoUIMod",
"vizId": "customTile-displayGraph"
}
Build+デプロイして結果を確認
上記までの設定を実施したら、Build -> Deployを実施します。
デプロイ後にapprouterのRouteにアクセスすることで結果が確認できます。
オプション：表示を変えてみる
グラフが表示できたので、いくつかの変更を試してみました。
タイルの大きさを変えてみる
対応しているタイルのサイズは
・1x1
・1x2
とのことなので、1x1 -> 1x2に変更してみます。
Tile.view.xmlを下記のように変更します。
- GenericTileのframeTypeプロパティを
OneByOne->TwoByOneに変更 - TileContentを追加（ついでに違うmicroChartを設定）
manifest.jsonを下記のように変更します。
- tileSizeを
1x1->1x2に変更
ODataからデータを取得する
通常のSAPUI5アプリケーションと同様の方法でODataServiceから結果の取得が可能でした。
Controllerファイルは以下のように変更しています。
※manifest.json、xs-app.jsonにも設定の追加が必要です。
xs-app.jsonに追加
manifest.jsonに追加
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("jp.co.kyoso.demo.demoCustomTileMod.controller.Tile", {
_oProperties: {},
_oViewModel: undefined,
onInit: function () {
var oComponentData = this.getOwnerComponent().getComponentData();
console.log("tile Init oComponentData:", oComponentData);
this._oProperties = (oComponentData && oComponentData.properties) ? oComponentData.properties : {
title: "Fallback Title",
subtitle: "Fallback SubTitle",
targetURL: "#",
readInterval: 5000
};
console.log("tile set oProperties:", this._oProperties);
this._oViewModel = this._initViewModel();
this.getView().setModel(this._oViewModel, "view");
// 固定値でグラフを表示
this._oViewModel.setProperty("/total", 100);
this._oViewModel.setProperty("/count", 0);
this._oViewModel.setProperty("/busy", false);
this._oViewModel.setProperty("/percentage", 90);
// ODataServiceから取得する
this.readCount(this._oViewModel, "/count");
// var iInterval = this._oProperties.readInterval;
// // 定期的なポーリングを実施
// var fnGetCount = function(){
// this.readCount(this._oViewModel, "/count");
// };
// window.setInterval(fnGetCount.bind(this), iInterval);
},
/* =========================================================== */
/* internal methods */
/* =========================================================== */
/**
* Creates view model (local view model).
*
* @returns {sap.ui.model.json.JSONModel} Local JSON model for fragment data
* @private
*/
_initViewModel: function () {
var oData = {
busy: false,
title: this._oProperties.title,
subTitle: this._oProperties.subtitle,
notifications: 0,
info: 0
};
if (!this._oViewModel) {
return new JSONModel(oData);
} else {
this._oViewModel.setData(oData);
return this._oViewModel;
}
},
onPress: function () {
var sTargetUrl = this._oProperties.targetURL;
if (sTargetUrl) {
if (sTargetUrl[0] === "#") {
hasher.setHash(sTargetUrl);
} else {
window.open(sTargetUrl, "_blank");
}
}
},
readCount: function(oViewModel, sProp){
var oDemoServiceModel = this.getOwnerComponent().getModel("DemoServiceModel");
oDemoServiceModel.read(
"/People",
{
success: function(oData, oResponse){
console.log("get People:", oData);
oViewModel.setProperty(sProp, oData.results.length);
},
error: function(oError){
console.log("get People:", oError);
}
}
);
}
});
});
ただ、継続的なデータの更新に関しては上手な方法が見つかりませんでした。。
setIntervalによるポーリングを行った場合はFiori Launchpadから各アプリケーションに遷移した場合でもずっと定期的なリクエストを行ってしまうためやるべきではなさそうです。
Build+デプロイして結果を確認
Build -> Deployを実施しすると以下のようになりました。
うまくいってよかったですが、Busyの表示がずれているのは気になる。。。。
おわりに
カスタムタイルの設定は思ったよりも簡単に行えました。
タイルに表示するのはグラフ以外も可能なので、Lunchpad上でもある程度の表現が可能になったかなと思います。