Duplicate Navigation Appears in an Embedded Screen
When a screen (such as an Include screen) is embedded in another screen, it should contain only the reusable content that the parent screen needs to display. The parent screen supplies the application shell, including Home, MainLayout, MainLayoutHeader, and MainLayoutSidebar.
New screens use the application’s MainLayout by default. A full-page screen, such as PurchaseRequestCreate, should retain MainLayout, while an embedded Include screen, such as PurchaseRequestInclude, should not have its own MainLayout. If both screens retain this layout, the resulting structure is equivalent to:
Symptoms
Section titled “Symptoms”The following symptoms may occur when you execute the app:
- A second application header appears inside the parent screen’s main content area.
- A second sidebar or navigation menu appears below the main application header.
- The parent screen’s content appears inside a nested application shell.
- Buttons or other content from the parent screen appear below the nested header and sidebar.
Solution
Section titled “Solution”To solve the duplicate navigation, remove MainLayout from the embedded screen:
- In the Design editor, open the embedded or Include screen that displays the duplicate navigation.
- Locate the Screen [Module].MainLayout label in the layout editor.
- Click the label to select the
MainLayoutcomponent. - Confirm that only the
MainLayoutcomponent is highlighted and that none of its child components are highlighted. - Right-click the selected component and select Delete & keep children.
- Confirm that Screen [Module].MainLayout is no longer displayed.
- Confirm that the Content Area components remain in the layout editor.
- Save your changes before continuing.
Verify the screen structure
Section titled “Verify the screen structure”After removing the duplicate layout, the screen hierarchy should follow this pattern:
- Wait for the application to complete a successful build.
- Run the parent application and confirm the following:
- Only one application header is displayed.
- Only one sidebar or navigation menu is displayed.
- The Include screen’s content appears inside the parent screen’s main content area.