Product List Component

Add static and dynamic lists with multiple product levels and formats.

The list of products can be static or held in the Umajin Cloud/Dashboard. The items can be entered in the Products section which sits under the Commerce heading in the Umajin Cloud/Dashboard. These items can then be collated into a Product List.

The product list is called into the Component via the Product List ID and items/information for display are matched to the Master’s Components, using the List Mapper. Our example shows a very simple Product list with 2 items that can be displayed onscreen.

Properties for Product List Component

Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations.You can use millimeters to control aspects of size like width or height in order to create text boxes that will be well positioned across devices.
Data Binding Linking to the Umajin Cloud/Dashboard to bring in the data feed of listed products.
Product List ID Click the folder icon to select the product list you want from the Feed Picker. You will have already entered product lists into the Umajin Cloud/Dashboard. They will have a name and a numerical ID.
The upward diagonal arrow Takes you out of Umajin App Creator into your Umajin Cloud/Dashboard.
Refresh arrows Refresh the feed from the Umajin Cloud/Dashboard.
Master Dropdown to select your Master already created in your Master pages Tab. The Master is like a container that will hold and display your product list.
Mapping The List Mapper accesses and links data feeds stored in the Umajin Cloud/Dashboard to your Master’s components.

Popup Messages

Network error There is a default message to say ‘Network unavailable’ but you can also click the ‘A’ panel to bring up the Text Editor and customize your message.