sapui5 组件重用

在sapui5中可以提取一些公用的函数或组件，由其他App调用，这里只简单的例举出一个例子。

1，生成library

 

2，抽取共通函数，这里做成一个简单的js文件，实装了一个方法用于返回字符串。需要注意js文件的路径。

sap.ui.define([
    "sap/ui/base/Object"
], function (Object) {
    "use strict";    
       return Object.extend("comdialog.comdialog.controls.TestCommonJs", {
           getUserName : function () {
               // your code here 
            return "Guo Ziyang" ;
           }
       });       
});

目录结构

 

3，将该工程发布。发布之后，可以在se80中，看到该工程，并不需要在fiori的管理页面中进行配置，因为我们不需要通过tile来对它进行访问。

 

4，创建一个新工程，用来对该工程进行参照。需要在Component.js中，添加以下代码。需要注意registerModulePath的两个参数。分别是共同app的id，以及发布后的url。

jQuery.sap.registerModulePath("comdialog.comdialog", {
    url: "/sap/bc/ui5_ui5/sap/ZCOMDIALOG"
});

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "reusecomdialog/ReuseComDialog/model/models",
    "comdialog/comdialog/controls/TestCommonJs"
], function (UIComponent, Device, models, TestCommonJs) {
    "use strict";

    return UIComponent.extend("reusecomdialog.ReuseComDialog.Component", {

        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // enable routing
            this.getRouter().initialize();

            // set the device model
            this.setModel(models.createDeviceModel(), "device");
            
            this.getUser =new TestCommonJs();// Create new instance. Like new sap.m.Button
            // And now we can call the functons inside the JS file as we please :)
            console.log(this.getUser.getUserName());
        }
    });
});

5，发布新工程，配置FLD，运行，可以看到以下结果。

 

参照blog：

https://blogs.sap.com/2017/04/05/sapui5-how-to-reuse-parts-of-a-sapui5-application-in-othermultiple-sapui5-applications/

https://blogs.sap.com/2017/10/23/demystifying-the-art-of-component-reuse-in-sapui5/?preview_id=559009

https://blogs.sap.com/2017/10/30/component-reuse-4-ways-of-sharing-data-between-the-apps/

https://blogs.sap.com/2017/11/23/component-reuse-the-move-to-manifest.json/

https://blogs.sap.com/2017/06/06/sapui5-how-to-create-a-custom-library-and-how-to-use-the-js-files-in-other-apps/

https://blogs.sap.com/2019/04/05/sapui5-custom-libraries-deploy-to-abap-repository-and-use-in-applications/

https://blogs.sap.com/2018/01/15/step-by-step-procedure-to-create-sapui5-library-with-custom-controls-and-consume-the-library-into-sapui5-applications/

转载于:https://www.cnblogs.com/suoluo119/p/11591862.html