Custom List

Note:

• When using images, headers, or labels with variable height and width inside a Custom List control, a flickering issue is observed. To fix this, use a consistent height and width for the Image, Header, and Label controls.
• If you encounter flickering issues or if the horizontal scrolling bar is not working properly, make sure to set a fixed height and width container.

While Table control, represents data as rows and columns, Custom List ( previously called Advanced List ) provides flexibility to represent data in the format the user needs them. In the Custom List control, the user can use various controls and position them according to their choice using the Template. A template is nothing but a Container that holds controls and other containers.

Custom List has 2 sets of properties one for Custom List and the other for the Template within it.

Note: You can navigate between Custom List properties and Template properties by clicking on the control in the canvas or from the tree view on the left. Every click toggles the selection between Advanced List and its Template in the canvas.

Custom List Properties

General

• Tooltip - Tooltip to be displayed on the custom list. Use this to provide additional information on the control.
• Data Source - Source for the table control. The valid data types are Data Table, and Object Array.
• Selected Value Binding - Bind the table's selected value in runtime either to an RPA Process argument or to an App field.
• Hidden - If selected, hides the control in the runtime.
• Disabled - If selected, disables the control in the runtime.

Events

• Value changed - Configure what happens when the value is changed.

Style

• Control Alignment - By default, inherits the parent alignment. A different alignment other than the parent can be set. To default to Parent's alignment, toggle the selected alignment icons to switch off the specific alignment.

  Note: Alignment is dependent on Parent's layout ( Vertical vs Horizontal ).
• Layout - Determine how the templates will be shown in the Advanced List. It can be horizontal (side by side) or vertical ( one below the other).
• Space Between - Determine the space between the templates.
• Margin - Sets the margin of the control. By default 4px margin is set. Top/Bottom and Left/Right margin properties are combined. These properties can be unlinked using the unlink button on the right side of the Margin section heading.
• Size - The width and height of the control can be set in the size section. By default, the size is set to Auto. Min Width/ Min Height and Max Width/ Max Height are available under more (...) in the size section.

Template Properties

General

No properties

Events

• Clicked on - Configure what happens when the template is clicked.

Style

• Layout - Determine how the controls within the template are positioned.

  • Direction (Horizontal/Vertical) - Controls are arranged one below the other (vertical) or side by side (horizontal).
  • Alignment - Controls alignment within the template ( Left, Center, Right & Stretch for Vertical direction and Top, Middle, Bottom, Stretch for Horizontal direction).
  • Justify - Top, Middle, Bottom & Distribute for Vertical direction and Left, Center, Right & Distribute for Horizontal direction.

  • Allow wrapping - If enabled, wraps the control in the container if there isn't enough space.

    Note: Allow Wrapping property gets applied when the size ( width or height) is set to a defined value and not Auto.
• Background Color - Sets the background color of the template.
• Border - Sets the border for the control. Border Thickness, Border Color, and Corner Radius can be configured for the border.
• Padding - Sets the padding of the template. By default 8px padding is set. Top/Bottom and Left/Right padding properties are combined. These properties can be unlinked using the unlink icon on the right side of the padding section heading if different padding values needed to set for Top, Bottom, Left, and Right sides.

• Size - The width and height of the control can be set in the size section. Width is inherited from the parent for Vertical layout and cannot be edited. Similarly Height is inherited from the parent for Horizontal layout and cannot be edited. Min Width/ Min Height and Max Width/ Max Height are available under more (...) in the size section.

Note:

Custom lists are better optimized when having a fixed pixel height, which is when Virtual Scroll is enabled.

For a large number of rows in a custom list, there is an option to use virtual scrolling so that the elements in viewport load instantaneously and the upcoming elements are progressively loaded as you scroll. Virtual scroll only works when the custom list height is set to a pixel height.

If virtual scrolling is not used, a custom list with a large number of rows can be slow.

Virtual scrolling enhances the performance by loading only the relevant items in the viewport when in runtime. This only works when a height is configured and not set to auto.

If the Height property is set to auto, the size of the control in runtime and design time may not match. This happens because the control height depends on the number of rows returned in runtime, while in design time, the control is empty.

For any control with dynamic data, such as tables, lists, or custom lists, we recommend configuring a fixed height for improved performance.