找到你要的答案

Q:SAPUI5 change text dynamically based on context/route matched

Q:sapui5更改文本语境/路由匹配的动态

I am currently working on one XML view which is used for the user creation and user editing process.

Is there an elegant way for example to change the title of the view depending on the mode (create user / edit user) i am using? Preferable a way without hiding DOM elements.

我目前正在研究一个用于用户创建和用户编辑过程的xml视图。

是否有一个优雅的方式,例如改变视图的标题取决于模式(创建用户/编辑用户)我正在使用?有没有隐藏的DOM元素的方法。

answer1: 回答1:

Step 1: In your controller say S1.controller.js , if you are already defining headerFooter using getHeaderFooterOptions well and good. Else define it

    getHeaderFooterOption:function(){
    var that = this;
    var objHeaderFooterOptions = {
        sI18NFullscreenTitle: "CREATE_TITLE",//you need to define the value in i18n files
        //
        /*oEditBtn: {
            sId: "BTN_SEND",
            sI18nBtnTxt: "USER_CREATE",
            onBtnPressed: function(evt) {
                that.handleCreate(evt);
            }
        },*/
        buttonList: [
                 //your footer buttons go here
                  ]
    };
    return objHeaderFooterOptions;
    }

Now, in onInit() of controller:

onInit: function () {
    var that = this;
    this.oRouter.attachRouteMatched(function (oEvent) {

        if (oEvent.getParameter("name") === "create") { //the name you have given for the view in **Component.js**
            //your initial create login
        }
      //this will be executed whent you come as update context
        if (oEvent.getParameter("name") === "update") { //the name you have given for the view in Component.js
            var editContextHeaderFooter = that.getHeaderFooterOptions();
            editContextHeaderFooter.sI18NFullscreenTitle = "UPDATE_TITLE" //define the value in i18n file
                //you can edit other values also, example you want a different button in the footer.
            that.setHeaderFooterOptions(editContextHeaderFooter);

        }
    });
}

in metadata of Component.js

fullScreenPageRoutes : {
            // fill the routes to your full screen pages in here.
                "create" : {
                    "pattern" : "",
                    "view" : "S1"
                },
                "update" : {
                    "pattern" : "update/{context}",
                    "view" : "S1"
                }
            }

in i18n.properties file

#XTIT: Create Screen Title
CREATE_TITLE: Create New User

#XTIT: Update Screen Title
UPDATE_TITLE: Update User

步骤1:在你说s1.controller.js控制器,如果你已经定义headerfooter使用getheaderfooteroptions不错。其他的定义

    getHeaderFooterOption:function(){
    var that = this;
    var objHeaderFooterOptions = {
        sI18NFullscreenTitle: "CREATE_TITLE",//you need to define the value in i18n files
        //
        /*oEditBtn: {
            sId: "BTN_SEND",
            sI18nBtnTxt: "USER_CREATE",
            onBtnPressed: function(evt) {
                that.handleCreate(evt);
            }
        },*/
        buttonList: [
                 //your footer buttons go here
                  ]
    };
    return objHeaderFooterOptions;
    }

现在,在oninit()控制器:

onInit: function () {
    var that = this;
    this.oRouter.attachRouteMatched(function (oEvent) {

        if (oEvent.getParameter("name") === "create") { //the name you have given for the view in **Component.js**
            //your initial create login
        }
      //this will be executed whent you come as update context
        if (oEvent.getParameter("name") === "update") { //the name you have given for the view in Component.js
            var editContextHeaderFooter = that.getHeaderFooterOptions();
            editContextHeaderFooter.sI18NFullscreenTitle = "UPDATE_TITLE" //define the value in i18n file
                //you can edit other values also, example you want a different button in the footer.
            that.setHeaderFooterOptions(editContextHeaderFooter);

        }
    });
}

在元数据的component.js

fullScreenPageRoutes : {
            // fill the routes to your full screen pages in here.
                "create" : {
                    "pattern" : "",
                    "view" : "S1"
                },
                "update" : {
                    "pattern" : "update/{context}",
                    "view" : "S1"
                }
            }

在i18n.properties文件

#XTIT: Create Screen Title
CREATE_TITLE: Create New User

#XTIT: Update Screen Title
UPDATE_TITLE: Update User
answer2: 回答2:

in case you are using plain UI5 application:

 onRouteMatched : function(oEvent) {
    var that = this;
    if (oEvent.getParameter("name") === "user") { //the name you have given for the view in **Component.js**
        //your initial create login
    that.byId("myPage").setTitle("Create New user");
   that.byId("objHeader").setTitle("Update user");
    }
  //this will be executed when you come as update context
    if (oEvent.getParameter("name") === "edituser") {

        that.byId("myPage").setTitle("Update user");
        that.byId("objHeader").setTitle("Update user");
    }
  }

similary in XML add IDs:

<Page id="myPage" class="sapUiFioriObjectPage" title="{i18n>createNewUserHdrTitle}"
        showNavButton="true" navButtonTap="onNavBack">
        <ObjectHeader id="objHeader" title="{i18n>createNewUserHdrTitle}">
        </ObjectHeader>
    </Page>

if you are using i18n texts make sure you bind the translation resources to your view.

如果您使用的是普通的ui5应用:

 onRouteMatched : function(oEvent) {
    var that = this;
    if (oEvent.getParameter("name") === "user") { //the name you have given for the view in **Component.js**
        //your initial create login
    that.byId("myPage").setTitle("Create New user");
   that.byId("objHeader").setTitle("Update user");
    }
  //this will be executed when you come as update context
    if (oEvent.getParameter("name") === "edituser") {

        that.byId("myPage").setTitle("Update user");
        that.byId("objHeader").setTitle("Update user");
    }
  }

同样在XML添加ID:

<Page id="myPage" class="sapUiFioriObjectPage" title="{i18n>createNewUserHdrTitle}"
        showNavButton="true" navButtonTap="onNavBack">
        <ObjectHeader id="objHeader" title="{i18n>createNewUserHdrTitle}">
        </ObjectHeader>
    </Page>

如果您使用的是国际化的文字让你把翻译资源视图。

xml  dynamic  view  localization  sapui5