Lowdefy
v3.17.2/list/ControlledList/

ControlledList

areas: content

The ControlledList block renders a content area for all items in the array into the list card and provides easy UI elements to add or remove items in the list. All list blocks create a array in state at their block id. The list content areas are rendered for each index in the array. See the List Concept page for a detailed description on how to work with lists.

No Items

onClick:
- id: pushItem
  type: CallMethod
  params:
    blockId: block_id
    method: pushItem


onClick:
- id: unshiftItem
  type: CallMethod
  params:
    blockId: block_id
    method: unshiftItem


onClick:
- id: removeItem
  type: CallMethod
  params:
    blockId: block_id
    method: removeItem
    args:
      - 1


onClick:
- id: moveItemDown
  type: CallMethod
  params:
    blockId: block_id
    method: moveItemDown
    args:
      - 1


onClick:
- id: moveItemUp
  type: CallMethod
  params:
    blockId: block_id
    method: moveItemUp
    args:
      - 1


id: block_id
type: ControlledList
properties:
button:
Select item
Name of an Ant Design Icon or properties of an Icon block to use icon in button.
Title text on the button.
The button type.
When true, add new items to the front of the list.
Css style object to applied to controlled list footer.
When true, hide the add new item button.
Css style object to applied to controlled list items.
Title to show when list is empty.
Select item
Custom remove item icon properties.
When true, hide the add new item button.
Css style object to applied to content.
Controlled list title.
Todo List

  • Add the noodles.

  • Let it cook for a minute.

  • Add some 🌶.


Todos State Value:
todos:
  - Add the noodles.
  - Let it cook for a minute.
  - Add some 🌶.


id: todos
type: ControlledList
blocks:
  - id: todos.$
    type: TitleInput
    properties:
      level: 4
List of Contacts
No Items

Contacts State Value:
contacts: []


id: contacts
type: ControlledList
blocks:
  - id: contacts.$.first_name
    type: TextInput
    layout:
      span: 12
    required: true
    properties:
      title: First Name
      label:
        span: 10
        align: right
  - id: contacts.$.last_name
    type: TextInput
    layout:
      span: 12
    required: true
    properties:
      title: Last Name
      label:
        span: 10
        align: right
  - id: contacts.$.date_of_birth
    type: DateSelector
    layout:
      span: 12
    required: true
    properties:
      title: Date of Birth
      label:
        span: 10
        align: right
  - id: contacts.$.email
    type: TextInput
    layout:
      span: 12
    required: true
    properties:
      title: Email address
      label:
        span: 10
        align: right
  - id: contacts.$.phone_number
    type: TextInput
    layout:
      span: 12
    properties:
      title: Phone number
      label:
        span: 10
        align: right
  - id: contacts.$.preference
    type: ButtonSelector
    layout:
      span: 12
    properties:
      title: Preference
      label:
        span: 10
        align: right
      options:
        - Phone
        - Email


type: object
properties:
  properties:
    additionalProperties: false
    properties:
      addItemButton:
        description: Custom add item button properties.
        type: object
      addToFront:
        default: false
        description: When true, add new items to the front of the list.
        type: boolean
      footerStyle:
        description: Css style object to applied to controlled list footer.
        type: object
      hideAddButton:
        default: false
        description: When true, hide the add new item button.
        type: boolean
      itemStyle:
        description: Css style object to applied to controlled list items.
        type: object
      noDataTitle:
        description: Title to show when list is empty.
        type: string
      removeItemIcon:
        description: Custom remove item icon properties.
        type:
          - string
          - object
      size:
        default: default
        description: When true, hide the add new item button.
        enum:
          - small
          - default
          - large
        type: string
      style:
        description: Css style object to applied to content.
        type: object
      title:
        description: Controlled list title.
        type: string
    type: object