View Structures

When creating a view, there are two different view structures that can be selected for the new view. These include a list view structure and a collection view structure. This page will discuss the different capabilities of these two structures.
List View
The list view structure is the default structure. The root view (the first view that is automatically added when a new application is created) uses a list view structure.
The order of cards in this structure is determined by the order that they are placed into the editor.
This structure is often used in cases where the order of cards is known, or has uniform blocks of cards of the same type. For example:
A list of steps of a workflow that are of the same type (e.g. text-based step information)
A static options or control menu (e.g. a view with Text instructions, Reference photo, Take photo, Input text cards)
Collection View
The collection view structure is used to dictate the card order using the data model. This structure operates with these key differences:
This view itself is bound to a context or the output of an adapter, which should be an array.
A card will be generated in the resulting UX for every item in the view-bound array. Each of these cards will be provided the item as the base context.
As the card inherits item from the view-bound array as its context, the card itself does not specify a context or adapter in its own data binding.
The card to use is specified by a property, known as the card ID selector, in the array item, e.g., a property with a key of type or kind. This selector key is defined by the developer in the Card collection section in the view inspector. In this example, the selector is set to look at the property key named type in the item:
The IDs of the cards in this view should reflect the possible values in the item of the property specified by the selector. For example, the context for the above Card collection settings might look something like the following array:
[
    {
      "type": "textOne",
      "name": "Hello"
    },
    {
      "type": "textTwo",
      "name": "World"
    },
    {
      "type": "image",
      "name": "This is an image card",
      "uri": "<image URI>"
    },
    {
      "type": "textOne",
      "name": "This is another text one card"
    },
    {
      "type": "textOne",
      "name": "This is yet another text one card"
    },
    {
      "type": "textTwo",
      "name": "This view ends with a text two card"
    }
]
The individual cards can data bind to the item that generates them as in the regular list view.
The collection view structure is useful for views that have a dynamic ordering of cards. For example:
Step instructions of a workflow that have a variety of known step types (e.g. a view with three steps, each step having Description text, Image reference, Take photo cards)
Step instructions of a workflow that have unknown step types (e.g. some steps are Text input steps, others are Photo capture steps)
Card Sizing
Event-Driven Logic
Last modified 2yr ago