@sapui5/sap.fe.templates 1.146.0 → 1.148.0

package/src/sap/fe/templates/ObjectPage/ExtensionAPI.ts

@@ -48,6 +48,12 @@ class ObjectPageExtensionAPI extends ExtensionAPI {
 	 */
 	private customMessageStripId?: string;
 
+	/**
+	 * Flag to prevent concurrent navigateToSubSection calls.
+	 * Set to true when navigation starts, reset after navigation completes (including polling).
+	 */
+	private isNavigatingToSubSection = false;
+
 	/**
 	 * Refreshes either the whole object page or only parts of it.
 	 * @param [vPath] Path or array of paths referring to entities or properties to be refreshed.
@@ -130,9 +136,32 @@ class ObjectPageExtensionAPI extends ExtensionAPI {
 	 */
 	showSideContent(sSubSectionKey: string, bShow?: boolean): void {
 		const sBlockID = getSideContentLayoutID(sSubSectionKey),
-			oBlock = this._view.byId(sBlockID),
-			bBlockState = bShow === undefined ? !(oBlock as DynamicSideContent).getShowSideContent() : bShow;
-		(oBlock as DynamicSideContent).setShowSideContent(bBlockState, false);
+			oBlock = this._view.byId(sBlockID) as DynamicSideContent;
+
+		if (!oBlock) {
+			return;
+		}
+
+		const sCurrentBreakpoint = oBlock.getCurrentBreakpoint();
+		const bBlockState = bShow === undefined ? !oBlock.getShowSideContent() : bShow;
+
+		// On small screens (S breakpoint), side content should replace main content
+		if (sCurrentBreakpoint === "S") {
+			if (bBlockState) {
+				// Show side content, hide main content
+				oBlock.setShowSideContent(true, false);
+				oBlock.setShowMainContent(false, false);
+			} else {
+				// Hide side content, show main content
+				oBlock.setShowSideContent(false, false);
+				oBlock.setShowMainContent(true, false);
+			}
+		} else {
+			// On larger screens, show side content alongside main content
+			// Always keep main content visible on large screens
+			oBlock.setShowMainContent(true, false);
+			oBlock.setShowSideContent(bBlockState, false);
+		}
 	}
 
 	/**
@@ -313,7 +342,11 @@ class ObjectPageExtensionAPI extends ExtensionAPI {
 	 */
 	_showMessages(messages: Message[], origin: "Backend" | "Custom" = "Custom"): void {
 		try {
-			this.removeCustomMessageStrip();
+			if (messages.length > 0) {
+				// Only if there are messages to show, we remove custom message strip.
+				// This way we ensure that we don't interfere with custom message strip's lifecyle until there are new messages to show in the standard message strip.
+				this.removeCustomMessageStrip();
+			}
 
 			const view = this._view;
 			const internalModel = view.getModel("internal");
@@ -478,70 +511,177 @@ class ObjectPageExtensionAPI extends ExtensionAPI {
 		MessageBox.error(sTitle);
 	}
 
+	/**
+	 * Navigate to the first section of the object page.
+	 * Used as a fallback when the target section is not found or invalid.
+	 * @param objectPageLayout The ObjectPageLayout control to navigate within
+	 */
+	private navigateToFirstSection(objectPageLayout: ObjectPageLayout): void {
+		const sections = objectPageLayout.getSections();
+		if (!sections || sections.length === 0) {
+			return;
+		}
+
+		const firstSection = sections[0];
+		const subSections = firstSection.getSubSections();
+		if (!subSections || subSections.length === 0) {
+			return;
+		}
+
+		const firstSubSection = subSections[0];
+		const subSectionFullId = firstSubSection.getId();
+
+		if (!subSectionFullId) {
+			return;
+		}
+
+		objectPageLayout.setSelectedSection(subSectionFullId);
+		objectPageLayout.fireNavigate({
+			section: firstSection,
+			subSection: firstSubSection
+		});
+	}
+
 	/**
 	 * Navigate to a specific section or subsection within the current page.
 	 * Works with Object Page layouts and other section-based layouts.
+	 * If the target section is not found or invalid, the app automatically falls back to the first available section.
 	 * @param sectionOrSubSectionId The ID of the target section or subsection (without a view prefix, for example, "fe::FacetSection::TravelData" or "fe::SubSection::Details")
 	 * @public
 	 */
 	navigateToSubSection(sectionOrSubSectionId: string): void {
+		// Guard against concurrent navigation calls to prevent infinite loops
+		// from multiple polling mechanisms (ViewState.apply and ObjectPageController._navigateToTargetSection)
+		if (this.isNavigatingToSubSection) {
+			return;
+		}
+		this.isNavigatingToSubSection = true;
+
+		// Helper to reset navigation flag after a delay
+		const resetNavigationFlag = (delayMs: number): void => {
+			setTimeout(() => {
+				this.isNavigatingToSubSection = false;
+			}, delayMs);
+		};
+
 		try {
 			// Find the Object Page Layout control
 			const objectPageLayout = this._view.getContent()[0] as ObjectPageLayout | undefined;
 
-			if (!objectPageLayout) {
-				this.showNavigationError();
+			if (!objectPageLayout || !objectPageLayout.getDomRef()) {
+				// ObjectPageLayout not available or destroyed - silently return during navigation transitions
+				// This is expected when ViewState.apply runs on a view being navigated away from
+				this.isNavigatingToSubSection = false;
 				return;
 			}
 
 			if (!sectionOrSubSectionId) {
-				this.showNavigationError();
+				this.navigateToFirstSection(objectPageLayout);
+				resetNavigationFlag(100);
 				return;
 			}
 
 			const control = this._view.byId(sectionOrSubSectionId);
 
-			if (!control) {
+			if (!control || !(control as Control).getVisible()) {
+				this.navigateToFirstSection(objectPageLayout);
 				this.showNavigationError();
+				resetNavigationFlag(100);
 				return;
 			}
 
 			let targetSubSection: ObjectPageSubSection | undefined;
+			let targetSection: ObjectPageSection | undefined;
+			let isNavigatingToSection = false; // Track if original target was a Section (not SubSection)
 
 			// Check if control is a SubSection or Section
 			if (control.isA<ObjectPageSubSection>("sap.uxap.ObjectPageSubSection")) {
 				targetSubSection = control;
 			} else if (control.isA<ObjectPageSection>("sap.uxap.ObjectPageSection")) {
-				// If it's a section, get the first subsection
+				targetSection = control;
+				isNavigatingToSection = true;
+				// If it's a section, get the first subsection (if available)
 				const subSections = control.getSubSections();
 				targetSubSection = subSections.length > 0 ? subSections[0] : undefined;
 			}
 
-			// Validate subsection
-			if (!targetSubSection || !targetSubSection.getVisible()) {
+			// Validate we have either a section or subsection
+			const hasValidTarget = targetSubSection || targetSection;
+			if (!hasValidTarget || (targetSubSection && !targetSubSection.getVisible())) {
+				this.navigateToFirstSection(objectPageLayout);
 				this.showNavigationError();
+				resetNavigationFlag(100);
 				return;
 			}
 
-			// Get the full subsection ID (including view prefix)
-			const subsectionFullId = targetSubSection.getId();
+			// If we have a section but no subsection (lazy loading scenario), scroll directly to the section
+			if (targetSection && !targetSubSection) {
+				const sectionFullId = targetSection.getId();
+				objectPageLayout.scrollToSection(sectionFullId, 0);
+				resetNavigationFlag(100);
+				return;
+			}
 
-			if (!subsectionFullId) {
-				Log.error("Subsection ID is undefined, cannot set selected section.");
+			// At this point, targetSubSection is guaranteed to be defined
+			// (we've already returned if it was undefined with a valid targetSection)
+			if (!targetSubSection) {
+				// This should never happen, but satisfies TypeScript
+				this.isNavigatingToSubSection = false;
 				return;
 			}
 
-			// Navigate using ObjectPageLayout API
-			objectPageLayout.setSelectedSection(subsectionFullId);
+			// Note: we intentionally do not check getVisible() here.
+			// When navigating to a subsection in an inactive IconTabBar tab, the subsection is not yet visible.
+			// setSelectedSection will activate the parent section and make the subsection visible.
+
+			// Get the full subsection ID (including view prefix)
+			const subSectionFullId = targetSubSection.getId();
+
+			if (!subSectionFullId) {
+				this.isNavigatingToSubSection = false;
+				return;
+			}
 
-			// Trigger iApp state change by firing navigate event
 			const parentSection = targetSubSection.getParent() as ObjectPageSection;
-			objectPageLayout.fireNavigate({
-				section: parentSection,
-				subSection: targetSubSection
-			});
+			const parentSectionFullId = parentSection.getId();
+			const isParentSectionSelected = objectPageLayout.getSelectedSection() === parentSectionFullId;
+
+			if (!isParentSectionSelected && !isNavigatingToSection) {
+				// When navigating to a subsection in an inactive section, we must first activate
+				// the parent section, then wait for subsection to be ready before scrolling to it
+				objectPageLayout.scrollToSection(parentSectionFullId, 0);
+
+				// Poll for subsection DOM to be ready after parent section activation
+				// Related: helpers/SectionNavigationHelper.ts (used by ViewState.apply and ObjectPageController.navigateToTargetSection)
+				// This polling differs: checks DOM readiness (binary), not section ID stability
+				let attempts = 0;
+				const maxAttempts = 10;
+				const checkSubsectionReady = (): void => {
+					attempts++;
+					const subSectionDom = targetSubSection.getDomRef();
+					if (subSectionDom) {
+						// Subsection is ready, scroll to it
+						objectPageLayout.scrollToSection(subSectionFullId, 0);
+						resetNavigationFlag(100);
+					} else if (attempts < maxAttempts) {
+						// Not ready yet, check again
+						setTimeout(checkSubsectionReady, 50);
+					} else {
+						// Timeout - try scrolling anyway
+						objectPageLayout.scrollToSection(subSectionFullId, 0);
+						resetNavigationFlag(100);
+					}
+				};
+				// Start checking after 100ms initial delay
+				setTimeout(checkSubsectionReady, 100);
+			} else {
+				// Parent section already selected or navigating to section - scroll directly
+				const scrollTarget = isNavigatingToSection ? parentSectionFullId : subSectionFullId;
+				objectPageLayout.scrollToSection(scrollTarget, 0);
+				resetNavigationFlag(100);
+			}
 		} catch (error) {
-			Log.error("Error during navigation to subsection:", error as Error);
+			this.isNavigatingToSubSection = false;
 		}
 	}
 }