Building Enterprise Apps with Unity (Part 2: Processing App Data)
In this guide I will cover some of the processes required to collect user data within an enterprise app as well as output relevant information based on the user inputs.
To create a framework for processing data on each of our UI panels, we can create an Interface (IPanel) which will contain our methods to process user info, and have each of our panels be able to inherit from this interface.
Create a new interface called IPanel by creating a new C# script and implementing the following code:
Then we can create a new script for our SearchPanel, attach it to our panel game object, and set the script to inherit from the IPanel interface which requires we add the ProcessInfo() function.
This behavior can be repeated for all panels inside your app that will be processing data. The reason for doing it this way is to avoid clutter in our UIManager by allowing each panel to store the data associated with its own page, which our UIManager can then communicate with.
Store Input / Output Data for each Panel
I’ll begin the process with our first input page, the search panel, which has a single input field. Inside our script we add the UnityEngine.UI namespace and get a handle to the InputField.
We assign the field variable in the inspector to the input field game object on this page and we can now use it to store data. Next we want to create an On Click event to call our Process Info function when the Search button is pressed. We drag our Search Panel game object which contains the script into the event field and select the ProcessInfo() function.
A similar process can be done for our next panel in the Navigation flow, the Select Panel, which will report out the relevant information associated with the input field from the Search page.
In this case we need to get a handle to the text object instead of an input field and assign it in the inspector. This text object contains all data for this page.
Repeat this process for each panel for any data that needs to be collected (InputField) or output to the user (Text Component). Here is one more example for the client input panel which requires both a text output for case number and two inputs for the user name:
Create a Class to Store all User Inputs
Now that our data inputs and outputs are connected via scripts we can set up controls to access and modify that data. For this insurance application the primary piece of data we need to track is the Case. Each case will have strings to represent caseID, name, date, location, location notes, and photo notes as well as a rawimage datatype for a photo.
To set this up we can create a new script for Case which will contain these definitions. This class does not need to inherit from MonoBehaviour.
Create a Singleton UI Manager
We can then create a singleton UIManager to manage data output on our panel scripts.
Inside the UIManager we can now create a public variable for our active case which allows us to store the case information associated with the user’s active case and report it out to our various panels:
This could also be expressed as an array of cases which we can then filter through as needed by using the CaseID:
Create A Function to Begin Writing Data
For now we do not need an array to be populated since we will be allowing our users to create their own case and set it to the active case. Instead, create a new function for CreateNewCase() which will create a new case and assign it to active.
We can then tell our system to run this UIManager function when the Create A Case button is clicked from our main menu via another On Click event:
When the Create button is clicked we can now write data to the activeCase based on the inputs from our user.
Create and Assign an ID, Track ID Across Panels
We also want to create a new caseID at this moment, which can be done as follows:
Then we can update each of the relevant panels by adding this code to an OnEnable() method so that when the panel is activated it will pull in the correct data from our active case:
To ensure the timing is correct and the random caseID is generated before our panel is enabled, we can switch our method for activating the next panel from an OnClick event to our code:
Storing Input Field Data and Checking for Field Completion
Next we have our Create Case Info panel which collects the user’s first and last name. In the ProcessInfo() function for this panel we can check that the user completed both the first and last name fields using an IsNullOrEmpty check and then we can pass the name data to our UIManager activeCase.name:
This will add the name information to the current caseID and move us along the process to the next panel in which we add location data.
That’s it for this guide on processing app data and passing information between panels using a Singleton UIManager. In my next guide I’ll cover adding maps functionality via the Google Maps API. See ya there!
