Using Master Components for formatting for multiple pages and multiple purposes

Overview

A Master is a visual display container for the data that is being fed from Cloud Services/the Dashboard.

Any Master that you have already created, may be inserted onto a page, the same as any Component, allowing you to quickly replicate common design layouts across multiple pages. Whenever the Master is updated, all the copies you’ve inserted will also be updated.

In this tutorial, we will use a Master for a Feed List Component in order to present the user with information regarding animals at an animal day care.

Prerequisites

  1. Umajin App Creator downloaded and installed
  2. Any text editor
  3. Completed the registerAction tutorial
  4. Completed the registerFeed tutorial

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 Masters.
Step 2) Open up your text editor and create a new JavaScript file. We will call ours “PetFeed.js”. You will want to save this file to the scripts folder in Umajin.

Open Umajin → Click File → Open Resources Folder → scripts

If you want to include images of your pet like we will, add the image files to the image folder in the Resources Folder. Ours are saved under Assets and are attached below.

Step 3) Create the Custom Feed of pet information. For our purposes, we will use information about two fictional pets: Snowflake and Harry. The first step is to register the Feed. Ours will be called petFeed. For a more in depth look at how this works, please see the registerFeed tutorial.

Next, we will write the function representative of our Feed. The JSON containing said information is stored in the variable “feedInfo”. The Custom Feed is then established.

Step 4) Set up your Umajin page for testing. On ours, we have a basic Feed List Component which will use our Master (created in step 5) and our Custom Feed (from step 3).


Step 5) Go to the Masters tab which is next to the Pages tab at the bottom of Umajin App Creator screen. Create a new Master and then add and arrange the Components onto it that will display the information you want. Since we are making a basic app to display pet information. There are 8 Text Components, four of which are labels, and four of which will be mapped to the information from our Feed. There is also an Image Component which will be replaced with an image of the pet.

Step 6) Take care of all of the mappings. Click on your Feed List back on the home page, and scroll in the Properties tab until you find the Feed ID. Open the folder and select your equivalent of petFeed (the name of our function in the JavaScript file). Next select the Master that you have just created.

Once you have done that, you will be able to map the corresponding information from the Custom Feed onto your Master container.

Step 7) Refresh the page to take a look at your information page. Note how the Master allows you to display information for multiple animals in a clear and cohesive way.

An image of our page is attached below. To reveal the hidden information, we can just scroll.