WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Mobile Design

Mobile Development

  • React Native or Cordova

React Native

  • Welcome
  • Features
  • Supported Widgets
  • Supported Variables
  • Test Run Preview
  • Debug Web Preview
  • Inspection Framework
  • Mobile Preview
  • Styles
  • Theme
  • Export as Zip
  • Build Installers
  • Debug APK
  • Debug IPA

Cordova

  • Building Hybrid Mobile Apps
  • Native Device Support
  • First Mobile App
  • Mobile Design

    • Mobile Page Design
    • Gesture Support
    • Mobile Tabbar
    • Mobile Navbar

    Mobile Installer

    • Test Run (Preview)
    • Debugging Mobile Apps
    • Test via Live Sync
    • Testing Hybrid Mobile Apps using WaveLens
    • Mobile Build - Android
    • Generating iOS and Android Distribution Certificates
    • Export Cordova zip
    • Mobile Build - Manual
    • Mobile Build - AppChef

    Mobile Integrations

    • Mobile Integrations - Amazon Mobile Analytics
    • Mobile Integrations - Amazon SNS
    • Using Push Notifications in Mobile Device
    • Invoking Web App APIs in Mobile Apps

    Offline Features

    • Offline Data Support
    • Implementation
    • Switching between Offline and Online Mode
Edit

Mobile Navbar


Mobile Navbar is created specifically for hybrid apps to construct page header. It contains an icon, title and a list of actions on left and right sides.

note
  • Mobile Navbar comes as part of the page when the page layout with top navbar is selected. It is not available as a ‘drag n drop’ widget.
  • Widgets cannot be dropped on the mobile navbar.

Features

Mobile Navbar always comes at the top of the page. Mobile Navbar has two views:

  1. Action View - the default view, and
  2. Search View - can be selected as the Default view. It is also activated when the search button (enabled at design time using the Show search button property) is clicked at run-time. When the search is the main action on the page (for example, a search page) then change the default view as search-view.

Action View

In action view, the widget area is divided into 3 sections:

Left Section

Left section is reserved for 2 buttons.

  • First button will be visible if there is a left panel in the page. It is used to toggle the left panel. Icon of left panel button can be configured in the properties panel.

  • Second button is by default acts as a button that takes the user to the last visited page. Following properties for this button are configurable.

    • Show Back Button
    • Back Button icon class
    • Back Button label

Middle Section

Middle section holds icon and title.

  • Image for icon can be specified from the Image source property. Icon size is 32 x 32 (px) and images of that size can be set as an icon for the navbar.
  • A title can be set from the Title property either static content or bound to another Widget property or a Variable field.

Right Section

In the Right section, widgets can be added using Add Widgets button. Add Widgets provides a widget (like Anchor, Menu, Popover, Button) to be added. Depending upon the widgets added various properties can be set:

  • Anchor: can have a hyperlink to specify the destination link, target where the linked document should be opened.
  • Menu: can specify the layout, position, and value–action combination. Click here for more on menu usage.
  • Popover: can set the content source and content for further action. Click here for Popover usage.
  • Button: on click event can be set for page navigation

Search Button

There is also search button available on Mobile Navbar which appears at extreme right. Search text is exposed as an outbound property on Mobile Navbar as ‘query’.

Search View

In search view of the mobile navbar, there is a button for navigating from search view to action-view and a text area for the user to enter the search text.

Properties

PropertyDescription
TitleSet the title of the widget.
NameThe name is a unique identifier for the Navbar. Special characters and spaces are not allowed in widget name.
Add WidgetThis action button allows you to add widgets within the Navbar. The available options are Anchor, Menu, Popover, or Button.
Layout
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Image SourceThis property specifies the source for the brand image. The source can be either a file or a URL: File: enter the directory and filename for the image to display (supported file types include .jpg, .gif and .png). By default, WaveMaker looks for images in the src/main/webapp directory of the project. Every WaveMaker project has a data directory under src/main/webapp, so this is a good place to put pictures. URL: enter a URL to any internet-accessible image. To display the file, foo.jpg, in the project directory src/main/webapp/resources/images/imagelists/, enter the following into the source property:resources/images/imagelists/foo.jpg or simply foo.jpg
Behavior
Default ViewThis property shows the action bar if set to action-view and shows the search bar if set to search view.
ShowShowing determines whether or not a component is visible. It is a bindable property.
Left Nav Panel Icon ClassThis property sets the icon class for Left nav panel toggle button.
Show Back ButtonBack button is displayed only when this property is set.
Back Button LabelThis property sets the back button label.
Show Search ButtonSearch button is displayed only when this property is set.

Callback Events

On Search

This event handler to call when the user clicks ‘enter’ button in the search text box.

On back button click

This event handler to call when the user clicks the back button in action view of Mobile Navbar. If no event handler is specified, then upon clicking the back button, user will be navigated to the last visited page.

Use Cases

Example 1

  1. Create a page with ‘Two column with top nav’ layout.
  2. Select the mobile navbar and go to properties panel.
  3. Mention ‘App Name’ as title
  4. Check ‘show search button’.
  5. Add anchor widget using ‘Add Widgets’
  6. Select the anchor from the canvas.
  7. Specify ‘camera-enhance’ as icon in the anchor properties

Example 2

  1. Create a page with a ‘One column with top nav’ layout.
  2. Select the mobile navbar and go to properties panel
  3. Mention ‘App Name’ as the title.
  4. Check ‘show back button’.
  5. Add anchor widget using ‘Add Widgets’
  6. Select the added anchor from the canvas.
  7. Set the Icon Class to either 'wi wi-done' or 'fa fa-check'. You can choose from the list of icons by clicking the search icon next to the Icon Class property

See Also

How to use search widget within leftnav
How to add sliding leftnav

Last updated on 12/31/2019 by Swetha Kundaram
← Mobile TabbarTest Run (Preview) →
  • Features
  • Action View
    • Left Section
    • Middle Section
    • Right Section
    • Search Button
  • Search View
  • Properties
  • Callback Events
    • On Search
    • On back button click
  • Use Cases
    • Example 1
    • Example 2
  • See Also
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.