Introduction

This article explains how the Ordered Collection Properties sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer. You can also download it from this page in the Intuiface Examples catalog

How it works

This experience was built to demonstrate the ordered collection properties introduced in Composer 6.4.0. 

This includes

• Autoscroll for all ordered collections (except for Ken Burns Effect and Item Picker)
• "Allow scroll" property for all ordered collections (except for Ken Burns Effect and Item Picker)
• Swap Collection and its various transition animation options

Each scene will demonstrate a usage of these new properties. 

Basic Autoscroll scene

This scene uses the new autoscroll collection Behavior properties. In this example, the properties are set as follows: 

• The collection will start autoscrolling five seconds after entering the scene. 
• If a user touches the collection, it will wait five seconds after the touch to restart auto-scrolling
• Each item will be in focus for three seconds unless it is a video, in which case it will be visible during the entire video length. 

Advanced Autoscroll scene

This scene uses an Excel file as a data feed, where the display duration (in seconds) is specified. This approach enables the use of different display values for each image in the feed. Note this approach would work similarly when replacing the Excel data feed with any data feed from an online CMS. 

The display duration is transferred to the data template using binding. 

Allow & Disable Scroll scene

This scene illustrates how to use the Allow scroll collection behavior property. 

This can be useful for a Quiz scenario, where the user should only be able to see the next question after selecting an answer. 

Swap Collection Transitions scene

This scene illustrates the updated Swap collection with its various transition animation options for moving from one item to the next.