WaveMaker Docs

WaveMaker Docs

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

›Mobile Design

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Mobile development

  • 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
    • 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

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

Mobile Tabbar


Tabbar provides a form of navigation between the pages. It comes as a part of page layout and is always at the bottom of the page.

note
  • Mobile Tabbar comes as part of the page when the page layout with tabbar is selected. It is not available as a ‘drag n drop’ widget.
  • Widgets cannot be added to a mobile tabbar.

Features

Tabbar is a list of anchor elements. Based on screen size, only limited number of anchor elements are visible. If the number of the anchors is more than the limit, then a more button is shown on right side. Upon clicking more, a dropdown with the remaining anchors is shown.

Following are the limits:

Screen Size (px)Limit of anchors
< 4804
>= 480 and < 7685
>= 768 and < 10247
>= 1024 and < 204810
>= 204812

Each anchor requires a label, Icon (icon CSS class) and link. A JSON array containing this information has to be bound to dataset property of the widget, you can create a Model Variable for the same. Corresponding property names should then be mapped for action label, action icon, and an action link. More Button label and icon are configurable via properties panel. See below for use case example.

Properties

PropertyDescription
NameThe name is a unique identifier for the Tabbar. Special characters and spaces are not allowed in widget name.
Dataset
ValueSet this property to a variable or enter comma-separated values to populate the list of values to display.
Actions
Action LabelLabel for tabbar items to be picked from the fields of the Dataset Value mentioned above or bound to a variable.
Action IconIcon for tabbar items to be picked from the fields of the Dataset Value mentioned above or bound to a variable.
Action LinkLink for tabbar items to be picked from the fields of the Dataset Value mentioned above or bound to a variable.
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
More Button Icon ClassThis property sets the icon for the more button.
More Button LabelSets the label displayed on more items button.

Callback Events

Following events can be used to modify the behavior of Tabbar:

On select

The event listener to call when an anchor is clicked. Using this event user can write javascript code to execute an action, navigate to a page etc.. Three parameters are passed to the event listener:

  1. event object,
  2. the isolated scope of the widget and
  3. The label of the anchor $item on which event happened.

Script Example:

$scope.form1Beforesubmit = function ($event, $isolateScope, $data) { 
//$isolateScope: $isolateScope of the form
//$data has the data of the all widgets inside the form. This data can be modified and validated before sending the request 

        function isValidData(data) {
            /*restrict password to be minimum of 6 characters*/
            if (data.password) {
                if (data.password.length < 6) {
                    return {
                        'error': "Password too small"
                    };
                }
            } else {
                return {
                    'error': "Password field required"
                };
            }
        }
        return isValidData($data)
};

Use Cases

We will create navigation for the following music app pages using tabbar.

  1. Songs
  2. Favorites
  3. Albums
  4. Playlists
  5. Equalizer
  6. Account

(Assume that pages exist with above names)

Step 1: Data

  1. From the Variable on Workspace Toolbar, access Variables to create a New Model Variable.
  2. Set the Type property to Entry and check the Is List option.

  1. Use the TEXT EDITOR under the JSON section to enter the following structure. This structure builds the list as given above. Note: In WaveMaker apps, link to an app page with name ‘pageName’ is ‘#/pageName’
    [{
        "label" : "Songs",
        "icon" : "fa fa-music",
        "link" : "#/Songs"
    },{
        "label" : "Favorites",
        "icon" : "wi wi-favorite",
        "link" : "#/Favorites"
    },{
        "label" : "Albums",
        "icon" : "wi wi-video-library",
        "link" : "#/Albums"
    },{
        "label" : "Playlists",
        "icon" : "wi wi-format-list-bulleted",
        "link" : "#/Playlists"
    },{
        "label" :"Equalizer",
        "icon" : "wi wi-equalizer",
        "link" : "#/Equalizer"
    },{
        "label" :"Account",
        "icon" : "wi wi-account-box",
        "link" : "#/Account"
    }]
    

Step 2: Design

  1. Select the tabbar and bind Dataset Value property to the dataset of the Model Variable created earlier.

  1. Set action label, action icon and action link to corresponding fields from the Model Variable

Step 3: Preview App

  1. Click Run to preview the tabbar.

  1. When more button is clicked, the remaining anchors will be shown.

Last updated on 7/15/2020 by Swetha Kundaram
← Gesture SupportMobile Navbar →
  • Features
  • Properties
  • Callback Events
    • On select
  • Use Cases
  • Step 1: Data
  • Step 2: Design
  • Step 3: Preview App
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.