- Getting Started
- Before You Begin
- How To
- Notifications
- Using VB Expressions
- Designing your App
- Events and Rules
- Rule: If-Then-Else
- Rule: Open a Page
- Rule: Open URL
- Rule: Close Pop-Over/Bottom Sheet
- Rule: Show Message
- Rule: Show/Hide Spinner
- Rule: Set Value
- Rule: Start Process
- Rule: Reset Values
- Rule: Upload File to Storage Bucket
- Rule: Download File From Storage Bucket
- Rule: Create Entity Record
- Rule: Update Entity Record
- Rule: Delete Entity Record
- Rule: Add to Queue
- Rule: Trigger workflow
- Leveraging RPA in your App
- Leveraging Entities in Your App
- Leveraging Queues in Your App
- Leveraging Media in your app
- Leveraging Actions in your app
- Application Lifecycle Management (ALM)
- Basic Troubleshooting Guide
Custom List
Custom List is a dynamic, template-based control, which incorporates various controls with exceptional flexibility. Far from a standard list control, the Custom List allows even more controls within the layout, making it ideal for tasks such as creating an effective email listing grid.
Custom List has two sets of properties: one for the main control, and one for the template within it.
To toggle between the properties of a Custom List and its Template, simply click on the control in the canvas or select it from the tree view on the left.
ThisRow keyword to represent each row of the custom list data
ThisRow keyword. For details, refer to Examples.
-
Due to performance considerations, sevral controls cannot be included within a Custom List:
-
Edit Grid
-
Table
-
Custom List
-
Custom HTML
-
Tabs
Note:For list-based controls that exceed four items, we recommend using Dropdown controls.
-
-
Directly referencing Custom List controls, such as
MainPage.Header, is not permitted, despite the control name being found by the IntelliSense. -
Dragging controls between the context of a Custom List and other container controls may cause invalid expressions, some visible only when you preview the app. This is because the bindings within the context of the Custom List (using the
ThisRowkeyword) become invalid outside the Custom List.
The optimal method for working with a Custom List is as follows:
-
Design your custom list using a design tool such as Figma.
-
In the App Studio, once you have added the Custom List control, create a layout using containers and controls for each list element.
-
Create a sample row that includes a text description.
-
Replace the text description with expressions.
-
Add rules to events.
-
Adjust the control style according to the design file.
-
Preview the app.
Introduction
This app demonstrates the Custom List functionality.
Demo app - try it yourself
Demo app - instructions to use
-
In UiPath® Apps, create a new app and import the downloaded demo app.
-
You may notice some errors. To fix them, replace the referenced entities "Country", "EmailInbox", "Employees", "Employees2" and "System Users" with entities in your tenant.
-
To interact with the Custom List fields, preview your app.
- Data Source - The data source for the list display. Valid data types are DataTable and Object Array.
- Hidden - If set to true, hides the control during the runtime.
- Disabled - If set to false, app users can interact with the list. If set to true, the list is in a read-only state.
-
Tooltip - Tooltip to be displayed on the template. Use this to provide additional information on the template.
-
Hidden- If set to true, hides the control during the runtime.
-
Disabled - If set to false, app users can interact with the template. If set to true, the template is in a read-only state.
-
Control Alignment - By default, inherits the parent alignment. A different alignment other than the parent can be set. To default back to the parent alignment, deselect the overridden options.
Note: The alignment is dependent on the layout selected for the parent (Vertical vs Horizontal). - Layout - Customize the templates position within the custom list:
- Vertical - templates are arranged vertically
-
Horizontal - templates are arranged horizontally
-
Grid - templates are arranged in a grid format
-
Space between (pixels only) - the spacing between templates, when they are arranged in a Vertical or Horizontal layout.
-
Horizontal / Vertical gap - the horizontal and vertical spacing between templates, when they are arranged in a Grid layout.
-
Template Width - the width of the template.
-
Template Height - the height of the template.
Note:-
In a Horizontal layout, Width is set in pixels and Height in pixels,
%,em, orauto. -
In a Vertical layout, Height is in pixels and Width can be pixels,
%,em, orauto. -
In a Grid layout, both Height and Width must be in pixels. Relative units such as
%,emorautocannot be used.
-
Margin - The margin of the layout. By default, a margin of 4 px is set. Top/Bottom and Left/Right margin properties are combined. These properties can be detached using the Link button at the right side of the Margin section.
- Size - The Width and Height of the custom list, in pixels. Default values:
- In a Horizontal layout: Width 800 px, Height auto
- In a Vertical layout: Width auto, Height 400 px
- In a Grid layout: Width 800 px, Height 400 px
-
Control Alignment - By default, inherits the parent alignment. A different alignment other than the parent can be set. To default back to the parent alignment, deselect the overridden options.
Note: The alignment is dependent on the layout selected for the parent (Vertical vs Horizontal). -
Layout - Determine how the controls within the template are positioned:
- Horizontal/Vertical - The orientation of controls.
- Alignment- The alignment of controls within the template.
- Allow wrapping - If selected, wraps the controls in the template.
-
Allow scrolling - If selected, allows scrolling inside the template. To enable Allow Scrolling, the template must have a fixed height (vertical layout) or fixed width (horizontal layout).
-
Background Color - The background color of the template.
-
Border - The border for the control. Border Thickness, Color, and Radius can be configured.
-
Font - The font family for the template. All the controls within the template share the same font family. By default, the template inherits the font family of the Custom List.
-
Margin- The margin of the layout. By default, a margin of 0 px is set. Top/Bottom and Left/Right margin properties are combined. These properties can be detached using the Link button at the right side of the Margin section.
-
Padding - The padding of the template. By default, a padding of 16 px is set. Top/Bottom and Left/Right margin properties are combined. These properties can be detached using the Link button at the right side of the Padding section.
-
Advanced - Displays the flex properties of the control.
-
Flex basis - Sets the original size of a flex item before the extra space is distributed or taken away (
px,%,em,auto). -
Flex grow - When extra space is available, this values dictates how much a flex item should grow relative to the rest of the items.
-
Flex shrink - When the space is not enough, this value dictates how much a flex item should shrink compared to the other items.
For details, refer to Mozilla Developer Network documentation.
-
|
Property name |
Data type |
Access permissions |
Example |
|---|---|---|---|
|
Disabled |
Boolean |
Read/Write |
- |
|
Hidden |
Boolean |
Read/Write |
- |
|
SelectedItem |
Union of the Data Source type and the list of controls inside the Custom List. |
Read/Write |
Assuming a scenario in which your Data Source is an entity, to access the entity row: Assuming a scenario in which a Date Picker is in your Custom List, to access the value of the Date Picker control: |
|
SelectedItemIndex |
Integer |
Read only |
Returns the index of the currently selected row: |
|
ThisRow |
The same as the Data Source field. |
Read only | Refers to the current record of the Data Source. Use it to configure fields within the Custom List.
|
cvxz"FirstName".vcc.
To bind this column to a Textbox control within the Custom List, you can use the following expression:
ThisRow.FirstnameThisRow.Firstname
