Inter-App Communication Tutorial

Overview

The Umajin platform supports communication between a created network of applications. This is particularly useful when creating specialized apps for departments within a larger company, or for individual companies working together to serve a larger entity. In this tutorial, we will demonstrate a simple example involving a tenant in an apartment building and the property manager. We will create two apps that allow the tenant to report an issue, and the property manager to be alerted and take action.

Prerequisites

  1. Umajin App Creator downloaded and installed.
  2. Any text editor.
  3. Completed the registerAction tutorial and the registerFeed tutorial.
  4. Completed the Dynamic Form Customization 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 tenant reporting platform. We will complete the reporting application before moving on to the manager’s platform. For our purposes, we will call this project, “Tenant Tutorial”.

Step 2) The purpose of this app is to allow the tenant to report potential problems within their own apartment. A simple way to do this is to create a Dynamic Form that can feed data back from the tenant to the manager at any time.  Click the big plus (+) button beside your app’s name, go to the Forms tab, and insert a Dynamic Form Component.

Step 3) To get to Cloud Services in order to customize the Form, find the Data Binding heading under the Properties tab, and click on the arrow button pointing to the top right corner of the white box.

Ours will request their name, the date, a brief description of the problem, an inquiry about how long it has been a problem. This step is described in depth in our Dynamic Form Customization tutorial.

Once your Form is completed, make sure that you bind it to the Form ID.

Ours looks like this:

Step 4) Go back into Umajin Cloud Services to save the link to share the form data. First click the Share button.

Now copy the link that appears to your clipboard. We will be using this later.

Step 5) You can test this Form submission process by pressing the Play button, submitting a test form or two, and downloading the CSV response in Cloud Services.

Step 6) Now that you have the tenant report app fully functioning, we will create the Property Manager Platform. Create a new blank app in Umajin App Creator to use as a testing platform for our tenant reporting platform. We will call this project, “PM Tutorial”.

Step 7) This page will simply display the information about each report to the Property Manager in the form of a Feed List. We can set up the page with a basic heading using a Text Component and then a Feed List Component. (Under the Data Driven tab)

Step 8) Create a new JavaScript file in the text editor of your choice. Name it something that relates to your project. Ours will be called “pmtut.js” since it is a Property Management application tutorial.

Make sure that this file is saved in the scripts folder. Open Umajin → Click File → Open Resources Folder → scripts

Step 9) In your JavaScript file, we will want to get the information sent through the Form and map it into a Custom Feed List. First we will register our Feed. This step is explained in detail in our registerFeed tutorial. We set the Feed with a temporary JSON and store the Component in a global variable so we can access it later.

Step 10) Make a Master for your Feed List in the Umajin Platform. We want to display information gathered from the four fields in our Tenant Form, so our Master looks like this:

Go back to your Landing Page and map your Custom Feed to your Master.

Step 11) Now we need to retrieve the data from the Cloud and display it in our Feed. We will first register an Action that will be called when the application is loaded. The url has two unique items in it: the formid and the share_token. Both can be found in Umajin Cloud Services.

Step 12) We need to write the function called when there is an unsuccessful retrieval of data. It is important for the user to know what went wrong, so we will simply print out the error message.

Step 13) Now we will write the function called when there is a successful retrieval of data. This is one function that is broken up into multiple steps.

We need to declare the function and establish two local variables. The first is the data retrieved after it is parsed. The second is the start to the feed that will be displayed in our Feed List.

Now we will make a nested for loop to extract and display the data. If you print out the raw response, you will notice that the Field id number is included in the JSON. To eliminate this, we use a call to switch(k.split) in the inner for loop. Each piece of data is stored in a local variable so that it can then be added to a new JSON.

Now we can construct our new JSON which will be mapped to our Custom Feed. Each report will be represented by a “newJSON” and then added to the Feed. Once the nested for loop is complete and the Feed has all of the report information, we remove the last comma from the JSON and close it off with a square bracket. The Custom Feed is then established with the extracted information.

Step 14) Refresh the Umajin platform and add your Custom Action to the page. Now test out your Property Management app.

Step 15) If you would like to really see how the apps communicate, go back to the tenant application and submit another form or two. Now go back to the property management app and see it appear. Another way to test this is to use multiple devices to simulate the real relationship between tenant and property manager.