Skip to main content

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:

  1. App Header
  2. Add Content
  3. Add Buttons
  4. 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

  1. Navigate to VirtuApp → App Header.
  2. Locate the Add Content section.
  3. Enter the required text in the Title field.
  4. Enter the required text in the Subtitle field.
  5. Select a background image from the Background Image dropdown, if required.
  6. Click Save.
  7. 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

  1. Navigate to VirtuApp → App Header.
  2. Locate the Add Buttons section.
  3. Select the required position from the Position dropdown.
  4. Enter the button label in the Title field.
  5. Click Icon Picker to select an appropriate icon.
  6. Select the required option from the Type dropdown.
  7. Review the configured details.
  8. Click Save.
  9. 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

  1. Click Icon Picker.
  2. Select the required icon from the available options.
  3. Confirm the selection.
  4. 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

  1. Navigate to the Add Content section.
  2. Open the Background Image dropdown.
  3. Select the required image.
  4. Click Save.
  5. 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

  1. Navigate to VirtuApp → App Header.
  2. Locate the Settings section.
  3. Click Style.
  4. Configure the available style settings as required.
  5. Save the changes if a save option is provided.
  6. 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.

Back to top