Feed Item View

This component will open and display one item from a Feed List. Feed Lists are often used to build a product list, such as a menu or list of goods.

The Feed Item View, is a very handy way to drill down from a product list into a detailed view of the product/item.


How to Use the Feed Item View Component

If you have a Feed that has a lot of columns of data and in that Feed List component you just want to display the title but at the same time you want to be able to drill into that list and view details for any particular item you choose – the Feed Item View component is what you will use.

In this video the Feed List displays a list of movies and we want to be able to drill into a movie title and then see its publication date, its description and have a button to link out to a movie website.

Note: This video was created using Umajin version 1.2.0 so there have been UI and naming changes since that version. The basic functionality, however, remains much the same.

  • Templates are now called Masters
  • The CMS is now called the Umajin Cloud
  • The Triple bar menu is replaced with a top File menu
  • The scene tree order is now reversed
  • Components have new icons and categories

Create a List using a Feed list component

  • Our first task is to create a page to display a Feed List of all the movies. Add a new page and name
    it ‘movies’.
  • Add a Dynamic Feed List component to the page and in the Properties Inspector panel, beside FeedID browse the Folder icon and select the IMDB feed from the Feed Picker. This is a list of movies and other details about them that we have already set up in the Umajin Cloud/dashboard.
  • We now need to have a Master container to hold our movie Feed List. It need only be a small one line text container master so we can choose our already created Master – favsites. It is ideal for displaying a long list of movie titles.
  • Now we do the mapping and in this case there is just the Title column from the Umajin Cloud/Dashboard to link to the Text 1 component in the Master.
  • Now when we return to the page and hit play, we can scroll through the list of movies.

Drill into more information about an item on our list using a Feed Item View component

  • Now we want to add the ability to drill down into one item on this movie list to get more information. Add a new page and name it ‘view’.
  • Add a Dynamic Feed Item View Component to this page and in the Properties Inspector panel, beside FeedID browse the Folder icon and select the IMDB rss feed from the Feed Picker.
  • Now we need to create a Master container naming it ‘movie_view’. The Master needs to have components added to it for each of the elements we want to drill down into.
  • Add a Text Component to show the Title of the movie – rename it movie_view – resize for Title.
  • Add another Text Component to show the Publication date of the movie – rename it ‘movie_date’ – resize for date.
  • Add another Text Component to show the Description of the movie – rename it ‘movie_desc’ – resize for description.
  • Add a Button Component and re-label it IMDB. Set an Action on the Button – ‘Show web page’ and in the URL dropdown type in [Link] as this is the name of the web-link column in the Umajin Cloud/Dashboard.
  • Go back to the ‘view’ page and in the Properties Inspector under the Data Binding heading beside Master, select our ‘movie-view’ Master from the dropdown.
  • Map  description to ‘movie_desc’, Title to ‘movie_title, pubdate to ‘movie_date’. This binds our Umajin Cloud/Dashboard data to the right component.
  • Now when we return to the page and hit play, we can hit the button and go out to the web-page link for that movie, but we still need to add Actions so we can access details of other movies on our list.

Add Actions to our Components

  • We want to see more details about any listed movie so that when we click on a movie title in the Feed List it will go to the ‘view’ page and show us the Feed Item View Component which we have set to index the right content from the Umajin Cloud/Dashboard. (namely title, date of publication and description)
  • Return to Umajin Editor and select ‘movies’ page and the Feed List component. In the Properties Inspector choose the Actions tab and add an ‘On Press’ action. Select and insert the ‘Show page’ action and select the ‘view’ page from the drop down.
  • Return to Umajin Editor and select ‘view’ page and the ‘Feed Item View’ component. In the Properties Inspector choose the Actions tab and add an ‘On Press’ action. Select and insert the ‘Set Feed Items Index’ action and set mode to ‘Data bound index’ because we want to index the data bound up in our Umajin Cloud/Dashboard.
  • When we return to Umajin Editor and hit play, we can access the movie details now but we have no navigation to return to the list.
  • Return to Umajin Editor and open the page named ‘view’. Add an Action to the PAGE  – on press  – show page – select ‘movies’ page so that you can see the list of movie titles again.

Set Feed Items Index

The ‘Set Feed Items Index’ Action can help with navigating through and setting the content in your Feed Item View.

By choosing which Feed Item Viewer you want to use from the drop down and changing the set mode, you can navigate through your content in a variety of ways.

  • Show Next increases the Index by 1 to show the next item.
  • Show Previous reduces the Index by 1.
  • Loop shows the next item. When you reach the end of the items it will go back to the first item.
  • Random mode randomly selects an item from the Feed.
  • Data Bound Index allows you to get the index number of the item from a Feed List. For example, if I choose the 6th item in a Feed List it will display the correct index for that item.
  • Custom mode allows you to choose a particular Item from the Feed. Fill out the Custom Index Text Entry box with the number you want to use and it will select that particular item from the Feed.

 


Properties for Feed Item View Component

NameWhen 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 SizeSet 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 a Feed Item View thats size will be maintained across devices.

Data Binding

Setting up links to the Umajin Cloud.

FeedIDBrowse icon takes you to a Feed Picker which will have the Feed Item views listed that you have created.
 
The numerical ID comes from the Umajin Cloud.
The upward arrowTakes you out of Umajin Editor to the Umajin Cloud.
Refresh arrowsRefreshes the feed from the Umajin Cloud back to your Feed Item View and updates it.
Data URLType or paste a URL in here.
Custom feed parametersNot enabled unless you have created a Custom Feed using JavaScript. It will allow you to set the parameters of that Custom Feed.
MasterName of the Master page chosen from the drop down of already created Masters.
MappingThe List Mapper lets you link your components to Feed Item View information stored in the Umajin Cloud.

Display

Show Item indexUse the plus and minus buttons to insert the index number of the Feed Item you want to view in detail from the Feed listing you have entered in the Umajin Cloud.
Resize to ContentCheckbox. When enabled this property is designed to resize incoming data and content.
 
The component automatically resizes (by moving components up or down) according to the data being fed in.

 


Events that can Trigger an Action on the Feed Item View Component

On PressAction occurs when the Component is pressed.
On EmptyAction occurs when the Feed Item View is empty.
On ItemsAction occurs when there are items present in the view.
On ChangeAction occurs when the Item changes.