もう少しかんたんなやり方が見つかったので別の記事にしました。
SAPUI5アプリで再利用可能なライブラリを作る(ABAPリポジトリ)
#やりたいこと
SAP CloudPlatformでカスタムのFioriアプリケーションを作る際、
Fiori LaunchPadでの利用を想定するとタイル1枚につき、1アプリケーションが作成されることになるはず
SAP WebIDE上ではたくさんのディレクトリに分かれてしまうことになるが、共通関数を作りたかったので試してみた
※手探りなので、もっとこうしたほうが。。。という部分が多いかと思いますがご容赦ください
##カスタムLibraryを作成
テンプレートのCategoryを選ぶ
SAP Fiori Libraryがあるのでそれを選択
プロジェクト名等は適当に作成
Template Customization画面ではTitleとNamespaceを入力
画像とは少し違うが、以下を設定した
key | val |
---|---|
Priject名 | libTest |
Title | functionLibs |
Namespace | testfunc |
Finishを押下
###作成されたプロジェクト配下に共通関数用のファイルを用意する
functionsフォルダを作成
functions/common.jsを作成する
common.jsの中身は以下の通り
sap.ui.define([
"sap/ui/base/Object"
], function (Object) {
"use strict";
return Object.extend("testfunc.libtest.functions.common", {
onTestFunc: function () {
// とりあえずコンソールログする
console.log("teste");
}
});
});
このcommon.jsを他のプロジェクトから使えるようにする
プロジェクト直下のlibrary.jsを編集する
編集前↓
/*!
* ${copyright}
*/
/**
* Initialization Code and shared classes of library testfunc.libtest.
*/
sap.ui.define(["sap/ui/core/library"], // library dependency
function () {
"use strict";
/**
*
*
* @namespace
* @name testfunc.libtest
* @author SAP SE
* @version 1.0.0
* @public
*/
// delegate further initialization of this library to the Core
sap.ui.getCore().initLibrary({
name: "testfunc.libtest",
version: "1.0.0",
dependencies: ["sap.ui.core"],
types: [],
interfaces: [],
controls: [
"testfunc.libtest.controls.Example"
],
//この部分に自分で作ったcommon.jsを追記している
functions: [
"testfunc.libtest.functions.common"
],
elements: []
});
/* eslint-disable */
return testfunc.libtest;
/* eslint-enable */
}, /* bExport= */ false);
上記でライブラリ側の設定はOK
##読み込むアプリ側の設定
次はlibTestのcommon.jsを使いたいアプリ側での設定をする
neoapp.json内で以下を記述
{
"welcomeFile": "/webapp/index.html",
"routes": [
{
"path": "/resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/resources"
},
"description": "SAPUI5 Resources"
},
// 省略
{
"path": "/resources/testfunc/libtest",
"target": {
"type": "application",
"name": "libTest",
"entryPath": "/"
},
"description": "commonControl"
}
],
"sendWelcomeFileRedirect": true
"/resources/testfunc/libtest"
はlibraryのプロジェクト設定を参考にする
↓の部分
bsap.ui.getCore().initLibrary({
name: "testfunc.libtest",//この部分
version: "1.0.0",
dependencies: ["sap.ui.core"],
types: [],
interfaces: [],
controls: [
"testfunc.libtest.controls.Example"
],
functions: [
"testfunc.libtest.functions.common"
],
elements: []
});
/resources/
をつけて.を/にする
##Controllerで共通関数を読み込む
上記までの設定ができたらこうできる
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"testfunc/libtest/functions/common" //共通関数を作ったクラスを指定
], function (Controller,JSONModel,common) {
//↑も追加
"use strict";
return Controller.extend("table.tableSample.controller.table", {
onInit: function () {
//実際に使うところ
new common().onTestFunc()
},
});
});
あとはcommon.jsに共通で使いたい処理を作るだけ
#まとめ
SAP CloudPlatformのNeo環境で再利用可能な関数作成の方法がぱっと見つからなかったので手順をまとめた
libraryのプロジェクトをちゃんとデプロイすれば使えることは確認済み