Collection View

A “Collection View” displays any number of identical parts as a grid. This grid is scrollable and usually covers the entire screen. Single entries (cells) can be tapped optionally. For example, a tap can be used to go from an image overview to an image detail page.

Of course, you can also configure the appearance of the “Collection View”.

appdoo - Elements - Collection View


To show the properties of the Collection View, click the Properties tab (the slider icon) in the upper right sidebar.

Collection View

appdoo - Elements - Collection View (Collection View)

  • Name
    Here you give the element a name. This name is only used within appdoo. For example, you can quickly see in the outline where each Collection View is located. You can also edit the name by double-clicking on the Collection View in the outline. We recommend that you assign unique names when working with Layout Constraints and Data Links.

  • Cells
    Here you specify the number of cells in the Collection View. This value is not used if you have activated the “Use Data Source” checkbox. If this is the case, the number of cells is determined dynamically by the content of the data source.

  • Use Data Source
    Activate this checkbox if the content of the Collection View comes from a data source (RSS 2.0 Feed, Atom Feed, JSON container, …).

    • Data Source List
      If the checkbox “Use Data Source” is activated, there is a list of the Data Sources of your screen below. Select a Data Source from this list by clicking on it. The selected entry is shown inverted.

    • New Data Source
      By clicking on this button, the possible types of a new Data Source are shown and you can create a corresponding new Data Source by clicking on a type. The following types are available:

      • Textual List
      • Atom Feed
      • CSV
      • JSON
      • RSS 2.0 Feed
      • Data Filter
    • Use a Navigation Target
      In addition to displaying values in the Collection View, you may also want to allow the user of your app to navigate further. For example, from an images gallery (this Collection View) to a detail page. To realize this, the checkbox “Use a Navigation Target” must be activated. This will first ask you whether you want to use an existing screen as the target or whether you want a new screen to be created automatically. You will then be offered further settings. For example, you can change the selection for the target screen once again and also specify the effect with which the new screen is to be displayed.

      If you have activated this option, then you can of course reach the selected target screen within appdoo with a single click. The cell itself should not be selected. If the Collection View or nothing is selected and you move the mouse pointer over a cell of the Collection View, a button (circle) with an arrow is displayed on the right side. Clicking on this button takes you directly to the target screen.

      The corresponding data record of the cell is also passed to the next screen with this click and is available there in the list of elements as “Context-sensitive data”.

      • Modal Presentation
        You can choose between different transitions for the transition from the current screen to the target screen:
        • None
        • Push from Bottom
        • Flip
        • Crossfade


appdoo - Elements - Collection View (Layout)

  • Scroll Direction
    Here you can specify whether the user of your app can scroll vertically (default) or horizontally within the Collection View.

  • Margin
    Here you define the outer space of the entire grid. Depending on the value specified here and the width of the screen on which the Collection View is displayed, the number of cells in a row and their spacing from each other varies. The following image (enlarge) illustrates this. On the left side the value 0 was specified and on the right side the value 20 was specified.

    appdoo - Elements - Collection View (Layout - Margin)

  • Cell Spacing
    Here you define the minimum distance that should be around a cell. Around the following image (enlarge) this distance was defined with the value 20. Now the second row of the grid is no longer displayed directly below the first but with a corresponding distance.

    appdoo - Elements - Collection View (Layout - Cell Spacing)

  • Background Color
    Here you define the background color of your Collection View.


All information about this area can be found on the separate Geometry page.

appdoo - Elements - Collection View - Geometry

The following properties of the element can be set using the data links:

  • Hidden
  • Selected Cell (0-Index)
  • Selected Cell (1-Index)

All information about this area can be found on the separate Data Links page.

appdoo - Elements - Collection View - Data Links