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.
    TitleURL
    Aardvarkhttps://en.wikipedia.org/wiki/Aardvark
    Shrewhttps://en.wikipedia.org/wiki/Shrew
    Dolphinhttps://en.wikipedia.org/wiki/Dolphin
    Emuhttps://en.wikipedia.org/wiki/Shrew
    Doghttps://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)
Note: If you want more than one column to show in your Feed List add a second Text component and size it to fit side by side.
  • 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

A feed source from another web organization can be used. The content could simply be CSV data or RSS data (XML in a particular format) or complex XML data.
  • 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

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

Set 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 List thats size will be maintained across devices.

Data Binding

Setting up links to Umajin Cloud data feed.

Feed ID

Browse icon takes you to a Feed Picker which will have the Feeds listed that you have created.

These Feeds can be from content you have entered in the Umajin Cloud or links to WordPress blogs, Facebook or Twitter. 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 List and updates it.
Data URLYou can type or paste a URL link in here.
Custom feed parametersAdvanced functionality for custom feeds. This allows you to set the parameters for the 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 information/feeds stored in the Umajin Cloud.

Appearance

Setting up the look of the Feed List.

Resize to Content

Checkbox. 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.

FrictionSet friction on scroll bar movement. Sliding scale from 0.01 to 1.
Scroll verticallyCheckbox for vertical scrolling. Default is horizontal scrolling.
Grid modeCheckbox. Check if grid mode is required.
Vertical Spacing(mm)Alter vertical spacing where Scroll Vertical checkbox is checked, in .5 mm increments.
Horizontal Spacing(mm)Alter horizontal spacing where Scroll Vertical checkbox is not checked, in increments of .5mm.
Top Padding/End Padding(mm)

When the Scroll Vertical checkbox is checked this panel alters the Top Padding in increments of .5mm.

When the Scroll Vertical checkbox is not checked then this panel changes to alter the End Padding in increments of .5mm.

Resize mode
Note: We recommend you leave this setting set to to “Fit”, with feed list masters having 100% width and a physical height.This setting controls hows the feed list sizes each item from the master when the master is sized in percentages. If the master uses physical (mm) sizes for width or height, then this setting will not affect sizing.
  • Fit stretches the items to the width, and adjusts height to keep the same aspect ratio.
  • Stretch stretches the items in both width and height to match their percentage in the master. This allows you to define how many items will show in a feed list at once. For example, if the master is 25% of page height, then a Feed List using “stretch” will always show 4 items.
  • None just uses the master as-is, clipping off the sides and keeping the height the same. This is the simplest to understand, but requires you to size the master manually to fit in the feedlist.

Scroll Bars

Set the look of the scroll bar.

Show scrollbarsCheckbox.
Scrollbar sizeSlider to set size of scrollbar.
Scrollbar default imageSelect image from Image folder for the resting state of scrollbar.
Scrollbar down imageSelect image from Image folder for the activated state of the scrollbar.
Nine slice valuesPreserve the rounded edges of the scrollbar as required .

Popup Messages

Set popup message.

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

Events that can Trigger an Action on the Feed List Component

On PressAction occurs when component is pressed
On EmptyAction occurs when there are no items in the list
On ItemsAction occurs on each item in the list.
On Pull to RefreshAction occurs when the list is pulled downwards.