Feed List

A Feed is a great way of changing content in you project like menus or product information without having to rebuild it each time.

Create or manage Feed content for you project in the Umajin Cloud. Alternatively, have a Feed source and filter other feeds from the web for your project. These can be csv, xml, rss, jsn, product_list, Twitter, Facebook Posts or Facebook Events.

There are three parts to a feed:

1. The feed content (Cloud): rows of information like a spreadsheet
2. A Master (Editor/project): a layout template that will hold a row of data e.g, title, description, image, price. A master is reusable and can be deployed on different pages
3. A page for your feed.

Setting up a Feed List

• Open you project in the Editor and add a page calling it “my feed example”
• Add a “Feed List” component to the page using the (+) button from the left menu.
• We need to tell it what feed to use but we need to make one in the Cloud first. In the Properties Inspector under the Data Binding heading click the diagonal arrow “Edit feed online”. This opens to the Cloud feed section of your project in a browser
• Click the ‘plus’ button to add a new Feed. Name the new feed ‘Fav animals’ and SAVE.
• The Feed has columns and rows just like an excel spreadsheet. Right click on a table cell to insert/delete rows and columns.
• We can copy and paste from an excel spreadsheet or even from a table in a webpage. Mark and copy the table below. In the table of your feed right-click the table cell “header 1” and paste to fit your content.
  

  Title	URL
  Aardvark	https://en.wikipedia.org/wiki/Aardvark
  Shrew	https://en.wikipedia.org/wiki/Shrew
  Dolphin	https://en.wikipedia.org/wiki/Dolphin
  Emu	https://en.wikipedia.org/wiki/Shrew
  Dog	https://en.wikipedia.org/wiki/Dog

• Return to Umajin Editor and select the “my feed example” page we just added. Click on the Feed List component in the Scene tree and in the Properties Inspector under the Data Binding heading click the browse folder and select the ‘Fav websites’ feed from the Feed Picker.
• Add a new Master. Name the Master ‘favsites’. Add a Text component to the Master and make both it and the Master around 6mm as it is only going to contain a single word. (the website name)

• Return to Umajin Editor and finish binding our Dashboard data to the Feed List. We have already picked the feed, so now we need to select the ‘favsites’ Master from the drop down and then map Name to the Text 1 component. We are not going to show the URL on the List so we do not need to map it.
• Click refresh and the names of our websites display on the page.
• To use the URL we are going to add an Action to the Feed List component so that when we press any item on the Feed List we will automatically link to the URL. Select the Feed List component in the Scene tree and in the Properties Inspector hit the ACTION tab.
• Click the ‘plus’ icon beside ‘On Press’ and select and insert the ‘Show webpage’ action. In the dropdown under URL we are going to type in the column heading from our excel spreadsheet, using square brackets either side  [URL]. The action will then use the information in that column to show the appropriate URL when its name is pressed.

Cloud: feed content tools and pickers

The cloud offers some content assistant tools. These are handy if your table content may be images you store in your Cloud Media Uploader, HTML markup or dates.

Assign the picker to a column of your table by right-clicking the blue icon above each column header. You will see the pickers you can use at the bottom of the pop-up menu. Try using the “Type Image (cloud)” on a column of your feed.  If fitted correctly the blue icon changed to indicate a picture.

To use a picker simply double-click any cell in its column. For images the “Umajin File Picker” should appear. Drag any files into the picker to add them to your projects cloud collection. Double click any image to select it for your table cell. In the Editor, if you are using images in your project’s feed put an Image Component into your master. On the page with the feed map your cloud feed image to your master image.

Cloud: using an external feed source

• Source URL: “https://cloud.umajin.com/testing/rss_feed_example.xml”
• Source Type: rss
• Click “Save and Refresh JSON from URL”

This will populate the columns and rows according to a standard RSS feed. If the data doesn’t match the RSS standard it is considered to be empty.

If the XML data is not according to the RSS standard we can try to read it with a transformation rule.

• Source URL: “https://cloud.umajin.com/testing/plants.xml”
• Source Type: xml (selecting this will make the transformation tool visible)
• Click the button “Edit with tool”
• Follow the instructions of the tool.
• In most cases you’ll have to select a deeper level of the data
• Pick the data to display.
• Use “Create Transform Rules” button then close the tool
• Click “Save and Refresh JSON from URL”

Setting up a Twitter feed using “source URL”

• • 1. Add a new page to your Project and add a Feed List component to it.
    2. In the Properties Inspector for the Feed List component, use the diagonal arrow under the Data Binding heading to go to the Dashboard and use the ‘plus’ button to create a new Feeds entry, give it a name (eg Sushi Twitter) and save it.
    3. Go to Twitter.com and find the Twitter screen name you want to get the data from, it is typically the @somename . In this case we are using the demo Sushi House Twitter feed we have set up – @Umajin_Sushi)
    4. In the Source URL field enter the screen name including the @ symbol. You can copy and paste.
    5. Set the Source Type = twitter
    6. Set the Source Auto Refresh Interval = hourly / daily /weekly. This is how often you want the Dashboard to check for new data. We are going to use daily in this instance.
    7. Ignore the transform rules in this case.
    8. Click ‘Save and Refresh URL’. This tells the Dashboard to go and gather the twitter data and to bring it into the Dashboard, turning it into JSON format and giving us text, image, URL, screen name and real name columns of data.
    9. Now that we have the data we need to go back into the Umajin Editor to create a Master/container to hold and display the text and the image from our twitter feed.
    10. Add a new Master with an Image component at the top and a Text component below. Resize all 3 elements so that we can fit 3 tweets on the page and set heights to mm. Set the crop mode for the image component to ‘Fill’.
    11. Return to the page and select the Feed List component. In the Properties Inspector under the Data Binding heading click the folder icon and select the Sushi Twitter fed we have just made and the Master we have just made. Map text to Text 1 and image to image.
    12. When we hit ‘play’ the Twitter feed will show and then adjustments can be made to text or image properties as required.
    Note: There are a couple of optional fields you can fill in if you want to limit the number of
    returned tweets.
    • “RSS Top Items”, if this is greater than 0 then it will limit the number of tweets to just this number.
    • “RSS include matching”, if this contains text then it will limit the tweets to only those that contain this text. Useful for matching a #hashtag.
    • Example of use : These parameters could be useful if you tweet a daily special which includes the text #dailyspecial and want the feed to only show the latest special, so set “RSS Top Items”=1  and “RSS include matching”=#dailyspecial

Automatic Mapping

Properties for Feed List Component

Data Binding

Setting up links to Umajin Cloud data feed.

Appearance

Setting up the look of the Feed List.

Scroll Bars

Set the look of the scroll bar.

Popup Messages

Set popup message.

Events that can Trigger an Action on the Feed List Component