Edit an App's Header, Footer, and Navigation Items

You can edit your app's default header and footer elements to add a description, add graphics like a company-specific logo, or insert text functions. You can also customize navigation items built into the web app templates, even add new ones after the app is created.

1. Select the root page under the Root Pages node in the Navigator.

   The header and footer elements for these apps are defined in separate fragments and consumed by the app's root page in fragment containers. The default root page is named shell and set as the default entry page when a web app is first created. This entry page contains fragments that define the header, the footer, and navigation items such as tabs and navigation drawers. It also contains a flow container where the app's default flow is embedded.

   For example, here's the shell page for an app that uses the Navigation Drawer template:
   
   Description of the illustration default-shell-redwood-customize.png
   

   When the entire page is in focus without any component selected, you can use the options in the Properties pane to customize the app's header elements. By default, the header includes the Settings, Like, Bookmark, and Avatar elements. You can also customize the navigation items built into the Navigation Drawer and Bottom Tabs templates or add new items if you use the None template.

   For each option, you can:

   • Update the default label in the text box.
   • Click the icon to choose a different one from the Redwood icon gallery.
   • Click to add a new item.
   • Click to delete an item.
   • Drag to reorder an item.

   Here's an example:
   

   
   Description of the illustration default-shell-redwood-customize-properties.png

   
   
2. Select a fragment to view and edit its properties. You can select the component on the canvas, but sometimes, it might be easier to select the component in the Structure view, as shown here for the Shell Drawer fragment that defines the navigation drawer:
   
   

   
   Description of the illustration default-shell-redwood-container.png

   
   

   Because fragment variables can be enabled as input parameters to a page, input parameters defined for the fragment become available to you under Input Parameters in the fragment's Properties pane. You can click Go to Fragment if you want to access and update the fragment in an editor.

   You select different fragments to access the editor for the header and footer fragments. Alternatively, you can access each fragment directly from the Fragments node in the Navigator, as described in the next step.

3. If you want to further customize header, footer, and navigation items, click the Fragments node in the Navigator, then select the fragment you want to edit. To update header elements, select shell-header; to update footer elements, select shell-footer. Use shell-drawer to update the main navigation panel that comes with the Navigation Drawer template.

   For example, here's the shell-footer fragment for a web app:
   
   Description of the illustration default-redwood-footer.png
   

   In the Design view of the Fragment Designer, you can select a component and edit its properties in the Properties pane.

   The Fragment Designer is similar to the Page Designer, except that it builds a fragment instead of a page. You can add components to your fragment and bind them to events, action chains, variables, and functions, much like what you'd do when developing a page. You can also pass parameters from a fragment to the pages consuming it, so you have the option of overriding the default parameter value with an alternate value on a particular page. For more on fragments, see Work with Fragments.