Openui5: selectedSection in ObjectPageLayout did not work as expected

[TinaC]

OpenUI5 version: 1.54.8

• Browser/version (+device/version):
  Chrome Version 67, MacOS Version 10.13.3

• URL (minimal example if possible):
  https://plnkr.co/edit/cKviWexDJ7rXgWagqSj5?p=preview

• Steps to reproduce the problem:

1. After onAfterRendering, id is set to "1", and Section 1.1 is showed, but not selected by default
2. Click toggleSection button, Section 1.1 is still not selected

• What is the expected result?

I have write selectedSection="{= ${detailView>/id} ? 'section1_1' : 'section2'}", so I expect section 1.1 to be selected after showed.

• What happens instead?
  section1_1 is visible, but not selected

In my real app situation, this is a detail page, after I switch in master list, I need some detail page to show section 1 (which id oData property is not null ), others are not. Visibility works fine, but the first section is not selected by default.

[TeodorTaushanov]

Hi,

I've created an internal incident 1880415342. The status of the issue will be updated here in GitHub.

Best,
Teo

[plamenivanov91]

Hello @TinaC ,

Thank You for the detailed information!

selectedSection="{= ${detailView>/id} ? 'section1' : 'section2'}"> won't work, since selectedSection is association, and associations don't support this binding syntax. Instead you can explicitly say selectedSection="section1".

selectedSection takes effect before onAfterRendering. This causes the framework to select the next section, since section1 is not yet visible, because you set it to visible in onAfterRendering.

Simple solution to this is to put your oViewModel.setProperty("/id", "1"); in onBeforeRendering instead of onAfterRendering like this:

onBeforeRendering: function() {
    var oViewModel =  this.getView().getModel("detailView");

    oViewModel.setProperty("/id", "1");
},

Let me know if you need further investigation on the issue.

Kind Regards,
Plamen Ivanov

[TinaC]

Thanks @plamenivanov91 ,

so the sequence is onInit -> onBeforeRendering(section visible) -> selectedSection -> onAfterRendering ？

move visible to onBeforeRendering fixed this problem.

---

In my real situation, data id is load by oData GET, visible="{= Boolean(${id})}". So the sequence is :

onInit -> onBeforeRendering -> selectedSection in XML View-> data loaded(get id, section visible) -> onAfterRendering

Thanks for your inspiring, I changed my code to

onInit -> routePattenMatched -> bindElement change event, data loaded (get id) -> selectedSection in controller

Detail.controller.js:

onInit: function() {
  this.getRouter().getRoute("entity").attachPatternMatched(this._onObjectMatched, this);
}

_onObjectMatched: function(oEvent) {
  var sObjectId = oEvent.getParameter("arguments").objectId;

  this._oModel.metadataLoaded().then( function() {
    var sObjectPath = this._oModel.createKey("MyEntitySet", {
      id: sObjectId
    });

    this.getView().bindElement({
      path: sObjectPath,
      events: {
        change: function() {
          // if there is no section1, will silently failed.
          this.byId("ObjectPageLayout").setSelectedSection("section1");
        }
      }
    });
  }.bind(this));
}

[plamenivanov91]

Thanks @plamenivanov91 ,

so the sequence is onInit -> onBeforeRendering(section visible) -> selectedSection -> onAfterRendering ？

move visible to onBeforeRendering fixed this problem.

Yes, this is the correct sequence.

I am happy to help.

Regards,
Plamen Ivanov