Card

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

Usage

When to use	When not to use
When you want to provide information about a product, selling items, etc.	Do not use it when you want to display the content related application, system, or the application user.

Card Configuration

The card element consists of the following properties:

• UI Configuration
• Event Configuration

UI Configuration

For the Card element, you can configure the following UI properties:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rules
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	PC 1
Basic	Visible	Allows you to define the default visibility of the UI element.	No	Selected
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	Click this check box to make the element active or inactive. The user can perform the function on the active element.	No	Clear Check box
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
UI Properties	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element	No	Default
UI Properties-Background	Type	Allows you to configure the element?s background. To configure the background, you can choose one of the following options: –> Color –> Image	No	–
UI Properties-Background	Color	Allows you to configure a color as the element’s background. If you click the Color tab, the Color box opens. To configure a color as the element’s background: –> In the Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#FFFFFF	when type = color
UI Properties-Background	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color property, you can also define the opacity in the percentage unit.	Yes	100%
UI Properties-Background	Image	Allows you to configure an image as the element?s background. To configure the image as a background: ?> In the Type area, click the Image tab, and the Image Source list appears. ?> In the Image Source list, you can choose one of the following options: –> None –> URL –> Assets Library	No	–	when type = Image
UI Properties-Background	Image URL	This box becomes visible after you select URL in the Image Source list. In the Image URL box, enter the image’s URL. The application will fetch the image from a URL-based location and then display it as the element’s background.	No		when image source = URL
UI Properties-Background	Select Assets	This box becomes visible after you select Assets Library in the Image Source list. This property allows you to configure an image as the element?s background from the Assets Manager module. To configure the image: –> In the Select Assets box, click the asset library icon (), and the Select Asset dialog box opens. –> In the Select Asset dialog box, select an icon and then click Select, and you successfully configure the image as the background image.	Yes		when image source = Assets
UI Properties-Background	Elevation	Allows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis.	No	8	10
UI Properties-Alignment & Spacing	Padding	Allows you to desirably define padding around each side of the element. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element.	No	Theme Variable (Padding)
UI Properties-Alignment & Spacing	Margin	Allows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.	No	Theme Variable (Margin)
UI Properties-Alignment & Spacing	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
UI Properties-Shape & Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, the element will occupy the available space of the parent layout. Manual:-If you select this option, you can define a specific size of the element.
UI Properties-Shape & Decoration	Height Value	Enter the height of the element in the pixel unit.	No	10%
UI Properties-Shape & Decoration	Width Value	In this box, enter the element’s width in the pixels or percentage unit.	No
UI Properties-Shape & Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Show & Disable
UI Properties-Shape & Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Show & Disable
UI Properties-Shape & Decoration	Border color	Allows you to define the color of the element’s borders.	No	Transparent
UI Properties-Shape & Decoration	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the border’s color, you can also define the opacity in the percentage unit.	Yes	100%

Event Configuration

On the “Card” element, you can configure the following event:

• onClick