Data Template for Collections Populated by Interface Assets

    Description

    In IntuiFace, Collections can be bound to a dynamic data source via an Interface Asset. Thankfully, it is not necessary to define the look and feel of each individual element in, say, a list of 50 catalog items. IntuiFace Composer provides a Data Template mechanism just for this purpose.

    The main concept is to create a stand-alone Asset - or Group of Assets - to be representative of one item derived from your content. Once you have performed your skinning and property selections for this reference asset/group, drag-and-drop it on the Data Feed of your dynamic collection in the Scene Structure panel. Each item in the data feed will automatically inherit their appearance from this template.

    Note: You can have different visual representations of the same data feed, as demonstrated in our Real Estate sample. The horizontal Asset Grid and the Map collections are using the same data feed coming from a custom Interface Asset, and each collection has its own data template:

    • Asset Grid: a Group collection comprised of an Image asset, Text assets and Button controls.
    • Map: a Button control using a classic point-of-interest image


    Real-Estate-Search.jpg

    Usage

    Here are the steps for creating a data template for items of a data source.

    • Place your data feed into a collection. You can either:
    • Create your data template
      • Bind assets to various values of the first item of the data source to make your design.
      • If using multiple assets (e.g. Image + Text) to represent your data, place all the assets into a Group collection.
      • In the Scene Structure, drag-and-drop your data template (either one asset or one group of assets) onto the data feed created in the first step.

    Once you've placed your data template onto the data feed, you can directly edit the template in the scene by double-clicking the associated collection.

    Demonstration: How to create a data template

    DataTemplate.gif

    Demonstration: In-scene editing of a data template

    Scene_Edition.gif

    Examples

    To see how Data Templates can be used in an IntuiFace Experience, we recommend you have a look at the following samples found in the Marketplace. All can be downloaded for free using the Marketplace tab in the Experiences panel of both Composer and Player.

    DIY-Shopping-Catalog.png

    Sushi-KB.jpg

    Real-Estate-Search.jpg