WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Releases
  • Login
  • Start free trial

›List

Widgets & Prefabs Library

  • Widgets Library
  • 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
  • Configuration
  • Field Configuration
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

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

Form

  • Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • 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

  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

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

Charts

  • Chart Widgets
  • Callback Event

Navigation

  • Breadcrumb
  • Creating a Breadcrumb
  • Dropdown Menu
  • Dropdown Menu - Basic Usage
  • Nav
  • Nav Bar
  • Popover
  • Popover - Basic Usage

Advanced Widgets

  • Carousel
  • Login
  • Marquee

Dialog Widgets

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

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Youtube
  • Googlemaps
  • QRCode
  • Box Viewer Prefab
  • OAuth

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

List Widget


List widget provides a list view of items from a data source. List data can be obtained from various Services like database, queries or web services through Variables. The list provides a variety of flexible templates for defining the display format of each item.

Features of List Widget

While designing the List following features can be set:

  • define the number of items to be displayed per row,
  • group data by the field of the underlying data source,
  • order the data by the fields of the underlying data source,
  • set the pagination style for multi-page data,
  • enable reorder property can be used to allow the user to reorder the list items at runtime
  • enable multiple selections of items in the list,

For multi-selection

  • To select consecutive items, click the first item, press and hold down SHIFT, and then click the last item. Or press and hold down SHIFT, and use arrow keys to select next item.
  • To select nonconsecutive items, press and hold down CTRL, and then click each item.
  • For mobile: Press and hold the item for a second which enables multi-select then tap on other items to select more items in a List. (default behavior nonconsecutive selection)

Select List Items at run-time

list items can be selected by the user at run-time either

  • by a simple click of the mouse on the item or
  • Up and Down arrows can be used to traverse the list items. Pressing enter key on any focused item will select the item.

Last updated on 10/18/2019 by Swetha Kundaram
← Use CasesCreating a List →
  • Features of List Widget
    • For multi-selection
  • Select List Items at run-time
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2019 WaveMaker, Inc. All rights reserved.