0

I wrote a Fiori App a while ago using the old Master-Detail Application floorplan which uses an ObjectPageHeader static header. The new SAP guidelines require an ObjectPageDynamicHeaderTitle. My objective is to have a TabContainer along the whole width of the header on top which is visible at all times.

ObjectPageHeader has a naviogationBar aggregation which accepts a Bar, the TabContainer was inside the Bar. The ObjectPageDynamicHeaderTitle doesn’t have this aggregation. I’ve tried putting the tab controller in the actions aggregation and this is how it looks. If I press the arrow I can see a list of all the open tabs:

Tab container in actions aggregation

If I put the tab controller inside the content aggregation it looks like this: Tab container in content aggregation

Again, if I press the arrow I can see a list of the open tabs. The only workaround I found, is that in SAPUI5 V1.71 the breadcrumbs aggregation of ObjectPageDynamicHeaderTitle accepts the Bar Control for some reason and it expands over the whole width of the top of the header as it should. This is not written in the SAP documentation and does not work in newer Fiori versions. This is how I'd like it to look and it works with the workaround. TabContainer inside breadcrumbs aggregation

Is there a more elegant and sustainable way to make this happen?

Here are links to the relevant documentations:

ObjectPageDynamicHeaderTitle

TabContainer

ObjectPageHeader

ObjectPageLayout

Thanks,

Ben

Bwal
  • 135
  • 1
  • 2
  • 7
  • 1
    Struggeling a little with your requirement. Is this not the same as using `sections` that already have this horizontal nav build in? [demo](https://sapui5.hana.ondemand.com/1.71.2/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.AnchorBar) – Jorg Feb 03 '21 at 22:57
  • I'm trying to get it on top of the header, the ```sections``` are underneath – Bwal Feb 04 '21 at 07:45
  • Are you trying to create a ["Multi-Instance Layout"](https://experience.sap.com/fiori-design-web/multi-instance-handling-floorplan/)? – Boghyon Hoffmann Feb 04 '21 at 10:16
  • This was originally a workaround to a bug with the ```TabContainerItem```, long story short it was decided to use just the tab strip from it and change the binding on a normal ```ObjectPageLayout``` according to the selected tab – Bwal Feb 04 '21 at 14:54
  • Still struggling to understand. Which "bug" exactly? Is there an issue on GitHub? If not, have you considered creating an issue so that UI5 maintainers can fix it? The question as well as your comments are a bit difficult to understand.. – Boghyon Hoffmann Feb 06 '21 at 19:13
  • Unfortunately I didn't have time to create a ticket back than because recreating the whole situation without revealing any internal data would have been very time consuming, time which I did not have. I'm not trying to solve that issue right now and it's not relevant to my question. If I manage to recreate it in the future I'll upload it. I would just like to have the Tabs as a toolbar for an Object Page while using a dynamic header – Bwal Feb 08 '21 at 09:00
  • _> Tabs as a toolbar for an Object Page while using a dynamic header_ ... So.. like the ["Multi-Instance Layout"](https://experience.sap.com/fiori-design-web/multi-instance-handling-floorplan/)? – Boghyon Hoffmann Feb 08 '21 at 23:31
  • Yes, similar to the Multi-Instance Layout. I had a lot of problems with the creation of the ```TabContainerItem``` and after a lot of thought decided to create one Object Page whose binding changes according to the selected entry in a Master list. So the items of the ```TabContainer``` only contain the name of the selected entries in the master list. The details of the selected item are dynamically bound to the ```ObjectPageLayout``` – Bwal Feb 09 '21 at 07:54

1 Answers1

0

I found a different solution to the problem. I just used the TabContainer in a Bar above the ObjectPageLayout as an element of the View. This way I don't have to rerender every time there's a change in the tabs model and I can keep the behavior I'd like. Thanks for the help anyway!

Bwal
  • 135
  • 1
  • 2
  • 7