Feed List Component

Great way to see content from Feeds created in the Umajin Cloud/Dashboard. 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/Dashboard. 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 App Creator 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 App Creator 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.

Video tutorial on adding a filter to a Feed List ( Link )

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 app 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 App Creator 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.
  13. 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 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 a group that will be well positioned across devices.
Appearance Setting up the look of the Feed List.
Scroll vertically Checkbox for vertical scrolling. Default is horizontal scrolling.
Friction Set friction on scroll bar movement. Sliding scale from 0.01 to 1.
Grid mode Checkbox. 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/Left 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 Left Padding in increments of .5mm.
Resize mode Dropdown options for resizing are Fit, Stretch or None.
Scroll Bars Set the look of the scroll bar.
Show scrollbars Checkbox.
Scrollbar size Slider to set size of scrollbar.
Scrollbar default image Select image from Image folder for the resting state of scrollbar.
Scrollbar down image Select image from Image folder for the activated state of the scrollbar.
Nine slice values Preserve the rounded edges of the scrollbar as required .
Data Binding Setting up links to Umajin Cloud/Dashboard 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/Dashboard or links to WordPress blogs, Facebook or Twitter. The numerical ID comes from the Umajin Cloud/Dashboard.
The upward arrow Takes you out of Umajin App Creator to the Umajin Cloud/Dashboard.
Refresh arrows Refreshes the feed from the Umajin Cloud/Dashboard back to your Feed List and updates it.
Data URL You can type or paste a URL link in here.
Master Name of the Master page chosen from the drop down of already created Masters.
Mapping The List Mapper lets you link your components to information/feeds stored in the Umajin Cloud/Dashboard.
Custom feed parameters Advanced functionality for custom feeds. This allows you to set the parameters for the custom feed.
Popup Messages Sets popup message.
Network Error There 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 Press Action occurs when component is pressed
On Empty Action occurs when there are no items in the list
On Items Action occurs on each item in the list.
On Pull to Refresh Action occurs when the list is pulled downwards.