WaveMaker Docs

WaveMaker Docs

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

›Cards

Widgets & Prefabs Library

  • Widgets Library
  • Widgets Composition

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

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

  • Prefabs Overview
  • Create Prefab
  • Prefab with Partials
  • Use Cases - Prefabs
  • Prefabs Directory

    • Youtube
    • Googlemaps
    • QRCode
    • Barcode Scanner Prefab
    • Box Viewer Prefab
    • Entity Extraction Prefab
    • Docusign Prefab

    OAuth

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

Cards - Properties, Events & Methods


Properties

important

Card Widget is contained within a List and as such, you can set the List Properties too.

EventDescription
TitleSet the title for the List. It is bindable.
Sub HeadingThis bindable property defines the subheading or title for the list.
NameThe name is a unique identifier for the list.
Picture
HeightThis property allows you to set the height of the picture, by default set to 200px
SourceThis property specifies the source for the picture, it is bindable.
TitleThis bindable property specifies the title on the picture
Layout
WidthThe width of list can be specified in em, pt, px or % (i.e 50px, 75%).
HeightThe height of list can be specified in em, pt, px or % (i.e 50px, 75%).
Actions
Menu ActionsThis property sets the actions for the widget. To set the data and events see menu widget
Action LabelLabel for menu items. It can be bound to a variable or set to a field from the Dataset Value variable.
Action IconLabel for menu items. It can be bound to a variable or set to a field from the Dataset Value variable.
Action LinkLink for the items. It can be bound to a variable or set to a field from the Dataset Value variable. Note: item link has priority over onSelect actions i.e. when the link is selected the onSelect actions won't get executed.
Action TaskTask for menu items generated dynamically. This is the action that will be triggered when the user clicks on the Menu Item.
User RoleRole for menu items generated dynamically. You can assign a property to 'userrole' which contains comma separated user roles. Each item will be evaluated with given 'userrole' for that item to that of the logged in user roles, from security. If any of the user roles bound to 'userrole' property matches then that menu item will be shown else will be hidden.
Sub ActionsWhen a menu widget is required the sub-items can be mentioned in the children. It can be bound to a variable or set to a field from the Dataset Value variable.
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
AnimationThis property controls the animation of an element. The animation is based on the CSS classes and works only in the run mode.
Graphics
Title Icon classThis bindable property defines the class of the icon that is applied to the button.
Icon UrlYou can give Url of the image.

Events

EventDescription
Mouse Events
On clickThis event handler is called whenever the click event is triggered on the list.
On double clickThis event handler is called whenever the double click event is triggered on the list.
On mouse enterThis event handler is called whenever the mouse enters the list.
On mouse leaveThis event handler is called whenever the mouse leaves the list.
Touch Events
On tapThis event handler is called whenever the tap event is triggered on the list.
On double tapThis event handler is called whenever the double tap event is triggered on the list.
Keyboard Events
Enter Key PressWhen the user hits ENTER/Return while the focus is on the list, execute the specified event handler.
Callback Events
On before data renderThis event handler is called when the data is set using the pagination.
On pagination changeThis event handler is called when the page is changed through navigation controls.
On reorderThis event is triggered when the item in a list is reordered. For this, the Enable Reorder property has to be set.
On selection limit exceedThis event is triggered when selected items cross the value set for the Selection Limit property.

Methods

The card has few methods exposed on widget scope which can be accessed via JavaScript. For the following script samples, we are considering the hrdb Employee table. EmployeeList is bound to the Live Variable corresponding to the Employee table.

Clear list data

Page.Widgets.EmployeeList.clear(); 
//Clear the list items.

Select a list item

Page.Widgets.EmployeeList.selectItem(0); 
//Selects first item , the parameter can be index or object.

Deselect item

Page.Widgets.EmployeeList.deselectItem(0); 
//Deselects first item, the parameter can be index or object.

Change navigation

Page.Widgets.EmployeeList.navigation = ‘Basic’; 
//Changes navigation type to Basic.

Interact with widgets of selected item

Page.Widgets.EmployeeList.selectedItemWidgets[0].Name.caption = ‘Eric’; 
//Changes caption for Name widget of selected item to ‘Eric’.

Modify selected item

Page.Widgets.EmployeeList.selecteditem = 0; 
//selects first item in the list.

Change the value of currentItem

note

currentItem and currentItemWidgets can’t be accessed through the script. But those were given as parameters for events of widgets inside list widget template. currentItem is given as item in the arguments.

item.username = ‘Eric’; //Sets username field value to ‘Eric’;

Change the caption of username widget for currentItem

note

currentItem and currentItemWidgets can’t be accessed through the script. But those were given as parameters for events of widgets inside list widget template. currentItem is given as item in the arguments.

currentItemWidgets.Name.caption = ‘Eric’; 
//Sets caption of Name widget to Eric.

Preserve the reordered list

Enable reorder allows the user to change the order of the items in the List in runtime, but the order after reordering do not persist after refresh. onReorder callback event is triggered when the order of the items in the List is changed. In the script, $data parameter has the complete order after each reorder. This data can be used to make the reorder permanent.

Page.livelist1Reorder = function ($event, $data, $changedItem) { 
        //$data is the newly reordered array of items.
};
Last updated on 11/5/2019 by Swetha Kundaram
← Behavior SettingsUse Cases →
  • Properties
  • Events
  • Methods
    • Clear list data
    • Select a list item
    • Deselect item
    • Change navigation
    • Interact with widgets of selected item
    • Modify selected item
    • Change the value of currentItem
    • Change the caption of username widget for currentItem
    • Preserve the reordered list
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.