WaveMaker Docs

WaveMaker Docs

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

›Cards

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

Cards - Configuration


Items per Row

Items per row determine the number to items that can be shown in each row. This can be specified independently for different target devices, from the device tab of the Properties panel.

Grouping & Ordering

Data displayed using Cards can be grouped and ordered.

  1. Group by: Choosing a field from the data source as Group By field, will display together with the card items which have the same value for that field.
  2. Group as: This property defines the group-by behavior. The following options are available:
    • alphabet – grouped based on the first alphabet of the field
    • word – grouped based on the first word of the field
    • TIME – grouped based on TIME: hour, day, week, month, year
  3. Order by: This property will help to order the card items based upon a field from the data source. You can also set the order as ascending or descending – by clicking on the arrows provided on the side of the field name.

Pagination

Pagination is dividing the set of data rows into discrete pages that will allow users to view data in the form of rows across pages. This should allow for easy navigation across pages for viewing and editing of data.

  1. Pagination Type: To make complete use of pagination, the Cards provides five unique types of pagination.
    • Basic – This option gives a next and previous arrow along with the page numbers at the right bottom of the page.
    • Classic - A bar with the total number of pages and number of items in the current page will be displayed along with arrows for pagination.
    • Horizontal Slider – This option gives next and previous arrows on both the sides of the page for pagination, carousel style.
    • Pager – This option gives the next and previous buttons at the bottom of the page which when clicked goes forward or backward one row.
    • Infinite Scroll – In this option on the scroll over the cards will cause the next page to load and display.
    • None - No pagination option will be given, use this when you want to display single-page records.
    • On Demand - allows users to load list items when needed. A 'Load More' button is displayed at run-time, which on click will load next page records. The label 'Load More' can be configured using 'On Demand Message' property.

Message

Messages to be displayed at the time of data loading and in case no data is found can be configured.

Last updated on 10/18/2019 by Swetha Kundaram
← TemplatesBehavior Settings →
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2021 WaveMaker, Inc. All rights reserved.