More than 5 years have passed since last update.

SAPUI5アプリで再利用可能なライブラリを作る（ABAPリポジトリ）

Last updated at 2019-07-23Posted at 2019-07-23

#目的

以前SAP CP上にデプロイするアプリケーションでアプリ間（タイル間）で共通カスタムライブラリを参照する方法を調査した
↓↓
SAP Cloud Platform 上のSAP UI5でアプリ（プロジェクト）間で共有できる関数を作る

追加調査した内容＋ABAPリポジトリにデプロイしたSAPUI5のカスタムアプリではどうするのかについて記載します。

以下、途中までは以前の記事と同じ内容を含みます

#カスタムライブラリの作り方
###ライブラリの作成
New Project from Templateを押下

テンプレートのCategoryを選ぶ
SAP Fiori Libraryがあるのでそれを選択

プロジェクト名等は適当に作成

Template Customization画面ではTitleとNamespaceを入力

画像とは少し違うが、以下を設定した

key	val
Priject名	customLibrary
Title	customLib
Namespace	common
Description(任意)	common lib test

Finishを押下

###作成されたプロジェクト配下に共通関数用のファイルを用意する
functionsフォルダを作成
functions/commonfunction.jsを作成する

commonfunction.jsの中身は以下の通り

commonfunction.js

sap.ui.define([
    "sap/ui/base/Object"
], function (Object) {
    "use strict";
    return Object.extend("common.customlibrary.functions.commonfunction", {
        onTestFunc: function () {
            // とりあえずコンソールログする
            console.log("common Function!");
        },

    });
});

#カスタムライブラリの使用方法
###ライブラリを使用するプロジェクトを作成

callLIbraryというプロジェクトを作成

key	val
Priject名	callLIbrary
Namespace	test

###ライブラリの読み込み設定をする
プロジェクトを右クリック→Project→Add Reference to Libraryを押下

Repository項目にWorkSpaceを指定する
先程作成したcommon.customlibraryが表示されるので、
includeにチェックを入れてAddを押下

上記の設定をするとneo-app.jsonに以下の設定が追記される

neo-app.json

{
	"welcomeFile": "/webapp/index.html",
	"routes": [{
		"path": "/webapp/resources/common/customlibrary",
		"target": {
			"type": "application",
			"name": "commoncustomlibrary"
		},
		"description": "common lib test"
	}, {
		"path": "/resources/common/customlibrary",
		"target": {
			"type": "application",
			"name": "commoncustomlibrary"
		},
		"description": "common lib test"
	}, 
        //省略
],
	"sendWelcomeFileRedirect": true
}

また、自動生成のままカスタムライブラリを実行するとライブラリのCSSがなくても読もうとするので、
不要であればLibrary.jsの以下の部分を修正

Library.js

		sap.ui.getCore().initLibrary({
			name: "common.customlibrary",
			version: "1.0.0",
			dependencies: ["sap.ui.core"],
			types: [],
			interfaces: [],
			controls: [
				"common.customlibrary.controls.Example"
			],
			elements: [],
                        //↓追記　CSS読み込みをさせない
			noLibraryCSS: true
		});

###ライブラリに記載した処理を実行

View1.controller.js（ルートViewのController）に関数の呼び出しを記載

View1.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"common/customlibrary/functions/commonfunction"
], function (Controller, commonfunction) {
	"use strict";

	return Controller.extend("test.callLibrary.controller.View1", {
		onInit: function () {
			var common = new commonfunction();
			
			common.onTestFunc();
		}
	});
});