Collection Component

Purpose

Collection Component is used to render a list of items. It is used to render a list of items in a grid or a list view.

Props

• items (array): The items to be rendered.
• itemName (string): The name of the item. Default is item.
• itemProps (object): Item transformation properties. It is used to transform the item before rendering it.

Simple Example

module:
  name: "Collection Example"
  description: "This module demonstrates how to create a collection component and use it in a list."
  appModuleId: 1816ddbe-eb6f-4a84-b59c-fad08e407f65
  displayName: Collection
  application: System

components:
  - name: "Example/Collection"
    displayName:
      en-US: Collection Example
    platforms:
    - web
    props:
      variables:
        employees:
          - name: John
            age: 25
            addresses:
              - city: New York
                state: NY
              - city: Los Angeles
                state: CA
          - name: Doe
            age: 30
            addresses:
              - city: San Francisco
                state: CA
    layout:
      component: layout
      name: list
      inputs:
      props:
        title:
          en-US: Jobs
        icon: list
        orientation: horizontal
      children:
      - component: collection
        name: collection
        props:
          items: "{{ employees }}"
          itemName: employee
          itemProps:
            name: "{{ name }}"
            age: "{{ age }}"
            addresses: "{{ addresses }}"
            address: "{{ addresses[0] }}"
            city: "{{ addresses[0].city }}"
            state: "{{ addresses[0].state }}"
        children:
        - component: text
          name: name
          props:
            type: h1
            value: "{{ employee.name }} {{ employeeIndex }}"

To access current item index, use {{ [itemName]Index }}. e.g. {{ employeeIndex }}.

Query Example (GraphQL)

Use fromQuery to load items from a query.

component: collection
name: collection
props:
  cols: 1
  items:
    fromQuery:
      name: getCountries
      path: countries.items
  itemName: country
  itemProps:
    name: '{{ name }}'
    code: '{{ countryCode }}'
  queries:
  - name: getCountries
    query:
      command: >-
        query($organizationId: Int!, $filter: String!, $search: String!, $take: Int!, $skip: Int!) {
          countries(organizationId: $organizationId, filter: $filter, search: $search, take: $take, skip: $skip) {
            items {
              countryCode
              name
            }
            totalCount
          }
        }
      variables:
        organizationId: '{{ number organizationId }}'
        search: ''
        take: 20
        skip: 0
        filter: ""
children:
  - component: text
    name: name
    props:
      type: p
      value: 'Name: {{ country.name }}, CountryCode: {{ country.code }}'

Query Example (Workflow)

Use fromQuery to load items from a workflow.

name: collection
props:
  cols: 1
  items:
    fromQuery:
      name: getCountries
      path: outputs.countries
  itemName: country
  itemProps:
    name: '{{ name }}'
    code: '{{ countryCode }}'
  queries:
  - name: getCountries
    workflow:
      workflowId: "0e5ff225-366c-4a3b-80ce-3e2426fdd1fc" #Example / Country / List
      inputs:
        search: "U"
children:
  - component: text
    name: name
    props:
      type: p
      value: 'Name: {{ country.name }}, CountryCode: {{ country.code }}'