WaveMaker Docs

WaveMaker Docs

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

›Dropdown Menu

Widgets & Prefabs Library

  • Widgets Library
  • Widgets Composition
  • Prefabs Overview

Cards

  • Overview
  • Creating a Card
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Data Table

  • Overview
  • Creating a Data Table
  • Data Source
  • Layouts
  • Styles
  • Configuration
  • Field Configuration
  • Summary Row
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

  • Overview
  • Creating a List
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Form

  • Forms Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Field Validations
  • Events & Methods

Live Form

  • Overview
  • Creating a Live Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Actions
  • Events & Methods
  • Use Cases

Form Widgets

  • Button
  • Button Group
  • Text
  • Number
  • Textarea
  • Select
  • Chips
  • Currency
  • Radioset
  • Checkbox
  • CheckboxSet
  • Toggle
  • Switch
  • Date,  Time and  Datetime
  • Calendar
  • FileUpload
  • Color Picker
  • Slider
  • Rating Widget
  • Select Locale

Live Filter

  • Overview
  • Creating a Live Filter
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Actions
  • Events & Methods
  • Use Cases

Container

  • Grid Layout
  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

  • Label
  • Anchor
  • Icon
  • Picture
  • Tree
  • Video
  • Audio
  • HTML
  • Iframe
  • Message
  • Spinner
  • Search
  • Search - Basic Usage
  • Richtext Editor
  • Progress Bar
  • Progress Circle

Charts

  • Chart Widgets
  • Callback Event

Navigation

    Nav

    • Nav Overview
    • Creating navigation

    Nav Bar

    • Nav Bar Overview

    Breadcrumb

    • Breadcrumb Overview
    • Creating a Breadcrumb

    Dropdown Menu

    • Dropdown Menu
    • Creating a Dropdown Menu

    Popover

    • Popover Overview
    • Creating a Popover

Advanced Widgets

  • Login
  • Marquee
  • Carousel

Dialog Widgets

  • Modal Windows/ Dialogs
  • Design Dialog
  • Alert Dialog
  • Confirm Dialog
  • IFrame Dialog
  • Page Dialog
  • Login Dialog

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Youtube
  • Googlemaps
  • QRCode
  • Box Viewer Prefab
  • Entity Extraction Prefab
  • Docusign Prefab
  • OAuth

    • OAuth Prefabs
    • Box
    • Facebook
    • Google
    • Instagram
    • LinkedIn

    Develop Prefab

    • Create Prefab
    • Use Cases - Prefabs
Edit

Creating a Dropdown Menu


This document talks of a simple Dropdown Menu usage. For usage example involving role-based menu access see here.

In this section, we will walk through the steps to create a multi-level menu, with icons and links to pages at various levels.

Using a Model Variable

We will be using a Model Variable for this example.

  1. Create or Open the app where you want to use the Dropdown Menu
  2. Open the Variables dialog from the Variables menu and using New Variable create a Model variable (Know more about variables).
  3. Name the variable as menudata and s_elect isList option._

  1. Add the following in the Text Editor. It defines the structure for Menu identifying Label, Icon, Link, and Children. Icons can be halflings from glyphicons or font awesome icons.
    [
      {
        "label": "Main Page",
        "icon": "glyphicon glyphicon-home",
        "link": "#Main"
      },
      {
        "label": "Facebook",
        "icon": "glyphicon glyphicon-user",
        "link": "http://www.facebook.com"
      },
      {
        "label": "Search Engines",
        "icon": "glyphicon glyphicon-search",
        "children": [
          {
            "label": "Google",
            "icon": "glyphicon glyphicon-arrow-right",
            "link": "http://www.google.com"
          },
          {
            "label": "Yahoo",
            "icon": "glyphicon glyphicon-arrow-right",
            "link": "http://www.yahoo.com"
          }
        ]
      }
    ]
note

If you follow this structure, WaveMaker picks the label, icon, link and children tags automatically. If you are using different tag names, then you need to specify them in the Menu property as shown in step: 4

  1. Bind the Value property of the Menu widget to the model variable created in the previous step.

  1. Set the Action label, Action icon, Action link, Sub actions to the appropriate item names from the model variable.
note

If you have used the same names then you may skip this step.

  1. Use the Action link specified above to navigate to a page within the project, or an external URL. You can use the On Select event to invoke a dialog or call a variable. From the Events tab of Properties panel, set On Select event to JavaScript and use the following code. This code will check if the selected value of the Menu is My Account and open either a dialog or invoke a variable.
if($item.label=="My Account"){
    DialogService.open("DialogName");
    }
else{
    Page.Variables.logoutAction.invoke();
  }
  1. Run the application and see the menu in action.
Last updated on 2/24/2020 by Swetha Kundaram
← Dropdown MenuPopover Overview →
  • Using a Model Variable
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2021 WaveMaker, Inc. All rights reserved.