List

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

This list displays the items vertically by default. You can also configure the vertical list to display the list items in specific order or priority.

Usage

When to useWhen not to use
In the application, use the vertical list to display the list of products, exclusive items, states of country, etc.Do not use the ?Vertical List? component when you want to display the long list of items.

List Configuration

The “List” element consists of the following property:

  • UI Configuration

UI Configuration

For the “List” element/component, you can configure the following UI properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rule
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesList View1
BasicInput SourceThis property allows you to configure the source location from where the data is displayed in the list. It provides two options as follows:
1). Data Source:-
If you select this value, the Input Value box appears. In the Input Value box, you can define the JSON-based location. The list displays the data from the configured JSON path of the element store or entity store.

2). Enumeration:-
If you select this value, the Select Master list appears. In the Select Master list, select the enumeration (list of values) from where the application will display the data in the list.

3). Static:-  
If you select this value, the Input Value box appears. In the Input Value box, enter the static value that you want to display in the list. 
YesList View
BasicInput Value (With application tree ())In this box:
–> Click the application tree icon (), and then select the entity store or element store. 
–> In the entity store or element store, select a JSON path, and then the application will display the data in the list from the selected JSON path.
YesList ViewIf Input Source = Data Source
BasicInput Value (Without application tree)In this box, enter the static value that you want to display in the component.YesIf Input Source = Static
Basic-AxisHorizontalIf you click this tab, the application displays the list items aligned horizontally.
Basic-AxisVerticalIf you click this tab, the application displays the list items aligned vertically.
BasicAllow ScrollThis property allows you to configure the usage of the scroll bar as follows:
Yes: – Select this option to allow the user to scroll through the list items.

No: – Select this option to not allow the user to use the scroll bar.
NoSelected
BasicScroll BarThis property allows you to configure the availability of the scroll bar as follows:
Yes: – Select this option to make the scroll bar available along with the list items for the user.

No: – Select this option to make the scroll bar unavailable in the list.
NoSelected
BasicSeparatorThis property allows you to configure the availability of the separator. The separator is a line that separates the appearance of two adjacent list items in the list. To configure the separator, select any of the following options:

Yes: – Select this option to make the separator available with the list.

No: – Select this option to make the separator unavailable for the list.
No
Apply FilterWhen you click this check box, a Business Rule drop down list comes into view. You can use this property to apply a business rule to display items in the list.NoClear Check box
Business RuleClick this list to select the business rule. After you select the business rule, the app displays items in the list based on the condition defined in the business rule.YesWhen Apply Filter check box is selected
SortingThis property allows you to display the list items in ascending or descending order. Click this list to select one of the following values:
1. Sort Ascending
Select this value to display list items in ascending order.

2. Sort Descending
Select this value to display list items in descending order.
NoSort Ascending
BasicHighlight SelectedThis property allows you to configure highlight effect for the selected list item as follows:
Yes: – Select this option to impart the highlight effect when the user selects the list item.

No: – Select this option to not impart the highlight effect when the user selects the list item.
NoSelected
UI PropertiesStylesAllows 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 elementNo
UI Properties-Background
Background Color
Click the Color box and then select a color to define the background color of the tile.No#161616
UI Properties-BackgroundOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
No100
UI Properties-BackgroundElevationThis property allows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis.
UI Properties-Alignment and SpacingMarginAllows you to desirably define margin around each side of the component. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the component.NoNull
UI Properties-Alignment and SpacingElement’s AlignmentThis 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.
NoLeft
UI Properties-Alignment and SpacingContainer Internal AlignmentThis property offers the following alignment options to align an element in a container element.
1. First List:- It provides the following alignment options:
a. Left
b. Center
c. Right


2. Second List:- It provides the following alignment options:
a. Top
b. Middle
c. Bottom
d. Space Around
e. Space Between
f. Space Evenly
NoLeft, Top
UI Properties-Shape and DecorationTypeUnder 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 and DecorationWidth ValueAllows you to define the width of the element. Enter the width of the element in the pixel unit or percentage unit.NoBlank
UI Properties-Shape and DecorationHeight ValueAllows you to define the height of the element. Enter the height of the element in the pixel unit.NoBlank
UI Properties-Shape and DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoCurrent position along the x-axis
UI Properties-Shape and DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoCurrent position along the x-axis
UI Properties-Shape and DecorationSelect ColorThis property allows you to configure the color of a selected element. The selected element means that the end-user has selected the element. To configure the Select Color properties, see the Border Color property.
UI Properties-Shape and DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
No100
Was this article helpful?
YesNo