カスタム リスト

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

The ThisRow keyword to represent each row of the custom list data

To bind values from the Data source to individual controls within the Custom List, use the ThisRow keyword. For details, refer to Examples.

制限事項

• Due to performance considerations, sevral controls cannot be included within a Custom List:

  • 編集グリッド

  • 表

  • カスタム リスト

  • カスタム HTML

  • タブ

  注:

  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 ThisRow keyword) become invalid outside the Custom List.

Optimal Custom List creation

The optimal method for working with a Custom List is as follows:

1. Design your custom list using a design tool such as Figma.

2. In the App Studio, once you have added the Custom List control, create a layout using containers and controls for each list element.

3. Create a sample row that includes a text description.

4. Replace the text description with expressions.

5. Add rules to events.

6. Adjust the control style according to the design file.

7. Preview the 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.

イベント

カスタム リスト

• Row selected - Configure what happens when the app user selects a row (that is, a control within a template) in the Custom List. Configure what happens when the value is changed.

テンプレート

• クリック時 - テンプレートがクリックされた際の挙動を設定します。

スタイル

カスタム リスト

• コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。

  注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
• 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.

  注:

  • In a Horizontal layout, Width is set in pixels and Height in pixels, %, em, or auto.
  • In a Vertical layout, Height is in pixels and Width can be pixels, %, em, or auto.

  • In a Grid layout, both Height and Width are in pixels.

• 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
  To set minimum or maximum values, click the three dot icon (...).

テンプレート

• コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。

  注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。

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

  • 横方向/縦方向 - コントロールの向きです。
  • 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.

• 枠線 - コントロールの枠線です。枠線の太さ、色、半径を設定できます。

• 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.

• 詳細設定 - コントロールの flex プロパティを表示します。

  • Flex basis - Flex 項目の元のサイズを設定してから、余分なスペースを均等に割り付けるか、除去します (px、%、em、auto)。

  • 伸び率 - 余分なスペースがある場合、flex 項目を、他の項目を基準にしてどれだけ拡大するかを指定します。

  • 縮み率 - 十分なスペースがない場合、flex 項目を、他の項目と比較してどれだけ縮小するかを指定します。

    詳しくは、Mozilla Developer Network のドキュメントをご覧ください。

VB のプロパティ

プロパティ名	データ型	Access permissions	例
無効	Boolean	Read/Write	-
非表示	Boolean	Read/Write	-
SelectedItem	Union of the Data Source type and the list of controls inside the Custom List	Read/Write	Say your Data Source is an entity To access the entity row: MainPage.CustomList.SelectedItem.data Say you have a Date Picker in your Custom List. To access the value of the Date Picker control: MainPage.CustomList.SelectedItem.Datepicker.value
SelectedItemIndex	Integer	Read only	Returns the index of the currently selected row: MainPage.CustomList.SelectedItemIndex
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.

Data binding examples for Custom List elements

Data source is an Entity

Say you reference an entity in the Data source field. This entity has a column named cvxz"FirstName".vcc

To bind this column to a Textbox control within the Custom List, you can use the following expression:

ThisRow.Firstname

Data source is a DataTable

Say you reference a DataTable argument of a process in the Data source field.

The type of ThisRow is DataRow, and its value can be extracted as follows:

ThisRow("FieldName")

Ensure to cast it to the appropriate type.