App- Header

1. Overview 
 The App Header section is used to configure the header displayed in the VirtuApp application. It allows administrators to customize the header title, subtitle, background image, and buttons displayed in the header area. 
 Administrators can also configure button positions, icons, and types to provide quick access to application features. 
 2. Navigation Path 
 Navigation Path: VirtuBox → Settings → VirtuApp → App Header 
 3. App Header Page 
 The App Header page contains three main sections: 
 
 App Header 
 Add Content 
 Add Buttons 
 Settings 
 
 4. App Header 
 The App Header section displays a preview of the configured header content. 
 The preview can display: 
 
 Title: The main heading displayed in the header. 
 Subtitle: Additional text displayed below the title. 
 Buttons: Configured header buttons, when available. 
 
 For example: 
 
 Title: Hello, 
 Subtitle: Welcome Back 
 
 If no buttons have been configured, the preview displays the message No buttons added yet . 
 5. Add Content 
 The Add Content section allows administrators to configure the main header content. 
 5.1 Available Fields 
 
 
 
 Field 
 Description 
 
 
 
 
 Title 
 Specifies the main heading displayed in the application header. 
 
 
 Subtitle 
 Specifies the supporting text displayed below the title. 
 
 
 Background Image 
 Allows users to select a background image for the header. 
 
 
 Save 
 Saves the configured header content. 
 
 
 
 5.2 How to Configure Header Content 
 
 Navigate to VirtuApp → App Header . 
 Locate the Add Content section. 
 Enter the required text in the Title field. 
 Enter the required text in the Subtitle field. 
 Select a background image from the Background Image dropdown, if required. 
 Click Save . 
 Verify the updated content in the App Header preview. 
 
 6. Add Buttons 
 The Add Buttons section allows administrators to add buttons to the application header. 
 6.1 Available Fields 
 
 
 
 Field 
 Description 
 
 
 
 
 Position 
 Specifies where the button appears in the header. 
 
 
 Title 
 Defines the button label. 
 
 
 Icon 
 Allows users to select an icon using the Icon Picker. 
 
 
 Type 
 Specifies the functionality associated with the button. 
 
 
 Save 
 Saves the configured button. 
 
 
 
 6.2 Button Positions 
 The Position dropdown provides the following options: 
 
 Left button: Places the button on the left side of the header. 
 Right button: Places the button on the right side of the header. 
 
 6.3 Button Types 
 The Type dropdown provides the following options: 
 
 Back 
 Search 
 Addresses 
 Bookmark 
 Broadcasts 
 Cart 
 Form 
 Hamburger 
 Home 
 Listing 
 Map-points 
 Map-track 
 Maps 
 Order-history 
 Page 
 Page-share 
 Profile 
 Settings 
 Share 
 Workflow 
 
 The selected type determines the functionality associated with the button. 
 6.4 How to Add a Header Button 
 
 Navigate to VirtuApp → App Header . 
 Locate the Add Buttons section. 
 Select the required position from the Position dropdown. 
 Enter the button label in the Title field. 
 Click Icon Picker to select an appropriate icon. 
 Select the required option from the Type dropdown. 
 Review the configured details. 
 Click Save . 
 Verify that the button appears in the App Header preview. 
 
 7. Icon Picker 
 The Icon Picker allows administrators to select an icon for a header button. 
 How to Select an Icon 
 
 Click Icon Picker . 
 Select the required icon from the available options. 
 Confirm the selection. 
 Save the button configuration. 
 
 8. Background Image 
 The Background Image field allows administrators to select a background image for the header from the available options. 
 How to Configure a Background Image 
 
 Navigate to the Add Content section. 
 Open the Background Image dropdown. 
 Select the required image. 
 Click Save . 
 Verify the header preview. 
 
 9. Settings 
 The Settings section provides access to the header appearance configuration. 
 Available Option 
 
 
 
 Option 
 Description 
 
 
 
 
 Style 
 Opens the style configuration interface for customizing the header appearance. 
 
 
 
 How to Configure Header Style 
 
 Navigate to VirtuApp → App Header . 
 Locate the Settings section. 
 Click Style . 
 Configure the available style settings as required. 
 Save the changes if a save option is provided. 
 Verify the updated header appearance. 
 
 10. Important Notes 
 
 Configure the title and subtitle according to the application's requirements. 
 Select the appropriate button position. 
 Choose the correct button type to provide the intended functionality. 
 Use suitable icons to make buttons easy to identify. 
 Available background images depend on the assets configured in the application. 
 Verify all changes in the App Header preview. 
 Button behavior depends on the selected type and its configuration. 
 
 11. Key Benefits 
 
 Allows customization of application header content. 
 Supports title and subtitle configuration. 
 Provides background image selection. 
 Supports left and right header buttons. 
 Allows button types and icons to be configured. 
 Provides access to header appearance customization. 
 
 12. Conclusion 
 The VirtuApp App Header section allows administrators to customize the application header by configuring its content, background image, and buttons. Proper configuration helps create a consistent interface and provides users with convenient access to important application features.