Skip to main content
Version: v11.7.1

Cards - Properties, Events & Methods


Properties

info

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.
};