Using registerFeed to create a custom feed for feed lists.

Overview

The registerFeed API allows you to create your own Custom Feed in the Umajin editor that can make any network or database calls and generate the JSON as you see fit.

Prerequisites

  1. Umajin App Creator downloaded and installed.
  2. Any text editor.

Pro Tip: using Visual Studio Code as your editor will allow you to integrate debugging.

Instructions

Step 1) Create a new blank app in the Umajin App Creator to use as a testing platform for our new Feed Component.

Step 2) Create a new JavaScript document and name it something that relates to your desired Feed. For our example, we will be extracting information of the current stock data for four different corporations. Ours will be named “stocks.js”

Step 3) Now we need to prepare our Feed by registering an Action. This is because we want our Feed to be uploaded and updated by the user. Our Action will eventually be tied to a Button. The Action will get the stock data. Parameters are described in our registerAction tutorial.

Our getStockData function, seen below, retrieves the stock data in real time of four different corporations. This function takes in a Feed as a parameter. We will register this Feed next.

Step 4) We will now register our Feed. This can be achieved by using a call to the built-in registerFeed function that takes in three parameters. The first parameter, callback, will contain the name of the function that will be called. The title is the name that will be displayed to represent your Custom Feed in the Umajin platform. The final parameter is a list of the parameters necessary to complete your function. These can be booleans, strings, numbers, or existing components. Ours will remain empty.

Our Stock Feed Component establishes the base Feed information that will exist before the information is extracted from the URLs. The key variables (t, e, l, and c) represent different properties of the stock, and the values will fill their respective empty spaces.

Step 5) You’ll see in our getStockData function from step 3 that httpGet takes in two functions as parameters along with the URL. The first instructs what to do when data collection is successful, and the other instructs what to do when the collection is unsuccessful.

Let’s begin with the latter, as it is more simple. This takes in a message as a parameter and prints an error statement so that the user can then return and fix the problem area.

If the data is extracted successfully, we need to separate out the information from the JSON, and choose what we want displayed in our Feed. We will choose the ticker, exchange, last price, and change in price of the stock. First, we need to initialize two Global Variables for our example, a new Feed, and a Feed List.

Step 6) At the end of the get_data_success method, we call updateFeed() which allows us to update and maintain the proper format.

Now our JavaScript file is complete.

Step 7) We will now move to the Umajin Platform. Make sure that your JavaScript file is saved under scripts in the Resources Folder. Go to File → Open Resources Folder → scripts. You can see the scripts.js tucked into the scripts folder below.

NOTE: In order for this Component to be available for use, simply reload the page.

Step 8) Insert a new Feed List Component as well as a new Button  Component onto your Umajin Page.

Step 9) Create a new Master that will hold the information for items in your Feed. Our stock Master is shown below.

Step 10) Now we will add the Action Component to our Button. Click on your Button → Actions → On Press → Stock Report.

Step 11) Now we just need to indicate the Feed we are using and map the items to the text. Click on your Feed List Component, in the Properties tab, scroll to the Feed ID, click the folder icon, and select your Feed. We will choose stockFeed.

Step 12) Add the Master to the Feed, so that your information can be displayed properly.

Step 13) Now we can map the Feed information to the placeholders in the Master. Go to map and select which variables you would like displayed for each Component in the Master.

Step 14) Test your Feed and Action Components by pressing the play button on the Umajin platform.