Creating Menu-Driven Applications for Enterprise Solutions in Unity

Finagling Forms, Function and Flow

My current project is an app for reporting and retrieving insurance claim information. I’ll wait while you contain your excitement.

Contain it!

Okay, so as dry as the topic seems, there’s some fun things to learn here.

What we want to achieve is the ability to navigate seamlessly through each menu of the app using buttons. Eventually, there will be C# logic under the hood handling the data we enter into the forms of the app, but for now we’re going to handle the main program flow using just the Unity Editor.

Let’s go through this step-by-step.

UI Panels

The first thing we need are the various screens. We’ll set these up as UI Panel objects in the Hierarchy, with each progressive panel lower in the Hierarchy than (and therefore rendered on top of) the previous panels.

My panels are made with premade tutorial assets, but you can follow along with this exercise without them. I won’t be covering creating and arranging UI elements themselves — I’ve covered those details in a previous article.

If I look at the navigation flow diagram included with my assets I can see there are two main branches of activity, starting on the home page. I can find a case or create a case.

From there each branch develops linearly on its own before both terminate at the Case Overview, which displays the information requested by the first branch or supplied by the second.

In total, I’ll need 10 panels. The flow diagram shows multiple parts to the Overview, but that’s still all going on one screen so it gets one panel. Likewise, the photo taking process is displayed as multiple parts, but that will all occur on one panel as well.

Since the Overview is the odd-panel-out, let’s take a closer look at how to set up that scroll bar. Start by creating a UI Scroll View object:

You can delete the image component on the Scroll View object, as well as the Scrollbar Horizontal child object. Then, resize the Scroll View to fill the content area.

Now I can put the Case Overview Panel with all its content as a child of the Viewport object within the Scroll View. This will drop the content neatly into the scroll view, and allow the scrollbar to control the position of the content.

When all my panels are created I can disable all of them except the main panel. Then my hierarchy should look like this:

Navigation Button Actions

Now we need to get these buttons working. Select the first button on the main screen — the “find” button. In the Button component, add a new OnClick event. Drag the next panel in the Find A Claim branch into the space provided. In the dropdown, select GameObject > SetActive and check the box for “True.”

I also have some border graphics that appear on all the other menus other than the main menu, so I’ll need to activate that panel as well.

Repeat this process for each panel and navigation button. Don’t worry about the buttons on the bottom of the screen just yet — that will come later.

When you’re ready, test it out and see what you’ve got:

Nice and easy.

I’m going on hiatus while I venture into the deep reaches of a mountain forest. When I get back I’ll be writing about integrating the Google Maps API into the project so we can collect location data.