ObjectPageLayoyt: Skip Sub-Section to Section promotion

[aoptrifork]

Why are you proposing this feature?

I’ve been asked multiple times to support Sections that contain only a single Sub-Section, with both levels displayed in the IconTabBar.

This usually comes from business requirements related to phased rollouts, where new Sub-Sections are added over time. From the start, they want to preserve the overall app structure (Sections), even if some of them initially contain only one Sub-Section.

As a result, both the Section and its single Sub-Section need to remain visible, rather than promoting the Sub-Section to replace the Section.

Until now I've always extended the control the same way, or tricking the control by using "invisible" Sub-Sections to achieve this behavior. But it would be nice if the framework supported this feature by default.

How should a possible solution look like?

1. /sap/uxap/ObjectPageLayout.js

add property "skipSubSectionPromotion" into the metadata as boolean with defaultValue: false

skipSubSectionPromotion: {type: "boolean", defaultValue: false},

2. /sap/uxap/ObjectPageLayoutABHelper.js

replace
if (aSubSections.length > 1) {

for
if (aSubSections.length > 1 || oObjectPage.getSkipSubSectionPromotion()) {

	ABHelper.prototype._buildAnchorBar = function () {
		var oObjectPage = this.getObjectPageLayout(),
			oIconTabHeader = this._getAnchorBar(),
			bUpperCase = oObjectPage.getUpperCaseAnchorBar();

		this.resetControl();
		this._oObserver.disconnect(); // unobrveserve all previousy obsed objects

		oObjectPage._getVisibleSections().forEach(function (oSection) {
			var sSectionFilterId = oIconTabHeader.getId() + "-" + oSection.getId() + "-anchor",
				oSectionFilter = new IconTabFilter(sSectionFilterId, {
					text: ManagedObject.escapeSettingsValue(oSection._getTitle()),
					key: oSection.getId(),
					iconColor: ManagedObject.escapeSettingsValue(oSection.getAnchorBarButtonColor())
				}),
				aSubSections = oSection._getVisibleSubSections();

			this._setupCustomButtonForwarding(oSection, oSectionFilter, bUpperCase);

			if (oObjectPage.getShowAnchorBarPopover()) {
				// if (aSubSections.length > 1) {
				if (aSubSections.length > 1 || oObjectPage.getSkipSubSectionPromotion()) {
					aSubSections.forEach(function (oSubSection) {
						var sSubSectionFilterId = oIconTabHeader.getId() + "-" + oSubSection.getId() + "-anchor",
							oSubSectionFilter = new IconTabFilter(sSubSectionFilterId, {
							text: ManagedObject.escapeSettingsValue(oSubSection.getTitle()),
							key: oSubSection.getId()
						});

						oSectionFilter.addItem(oSubSectionFilter);
						this._setupCustomButtonForwarding(oSubSection, oSubSectionFilter);
					}, this);
				} else if (aSubSections.length === 1 && !oSection.getCustomAnchorBarButton() && aSubSections[0].getTitle()?.trim()) { // promoted section
					// When SubSectionLayout is TitleOnLeft, the SubSection title is shown in the AnchorBar, when there is only one SubSection and it has title
					oObjectPage.getSubSectionLayout() === ObjectPageSubSectionLayout.TitleOnLeft
						&& oSectionFilter.setText(ManagedObject.escapeSettingsValue(aSubSections[0].getTitle()));

					this._setupCustomButtonForwarding(aSubSections[0], oSectionFilter, bUpperCase);
				}
			}

			oIconTabHeader.addItem(oSectionFilter);
		}, this);
		oObjectPage.setAggregation("_anchorBar", oIconTabHeader);
	};

3. /sap/uxap/ObjectPageSection.js

	ObjectPageSection.prototype._hasPromotedSubSection = function () {
		var oObjectPage = this.getObjectPageLayout()
		var skipSubSectionPromotion = oObjectPage.getSkipSubSectionPromotion()
		if (skipSubSectionPromotion) return false
		return this._bHasPromotedSubSection;
	};

Are there alternative approaches?

No response

Any further information you would like to share?

No response

[didip1000]

Hey @aoptrifork,

Thank you for your request, the issue is tracked internally as DINC0859517. Any updates will be communicated here in GitHub.

Best,
Diana