Feed List

Great way to see content from Feeds created in the Umajin Cloud. Source types can be csv, xml, rss, jsn, product_list, Twitter, Facebook Posts, Facebook Events, Cloud Folder.

Once you have created a design for your Master to sit on a page, it is easily populated from the data entered into the Feed lists you have created in the Umajin Cloud. Great for showing specials/special deals.


Setting up a Feed List

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

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

In this video we are shown how to create a manual Feed List showing a list of handy websites.

  • Add a new page (Name it Manual Feed) and from the Dashboard tab add a Feed List component to the page.
  • In the Properties Inspector under the Data Binding heading click the diagonal arrow to go to this project’s Dashboard. It automatically takes us to the Feed section where we can click the ‘plus’ button to add a new Feed. Name the new feed ‘Fav websites’ and SAVE.
  • The Feed has columns and rows just like an excel spreadsheet. Right click on the table to insert/delete rows and columns.
  • We are going to copy and paste a 2 column  excel spreadsheet so add another column to the feed. Copy and paste your excel file into the table.  When we paste it moves other information down, delete this, add any other sites manually and SAVE
  • Return to Umajin Editor and select the Manual Feed 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.

Filtering a Feed List


Setting up a Twitter feed

Please Note: This video was created using Umajin version 1.2.0 so there have been UI and naming changes with new versions as listed above. The basic functionality, however, remains much the same.

      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 BindingSetting 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.
AppearanceSetting 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 BarsSet 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 MessagesSet 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.