Unity Design Flow: Button Magic
Object: Use Button On Click() to navigate the Insurance App.
Unity has a wonderful way to control the flow of an app using the Button component’s On Click () events. Looking at the hierarchy window, below, the app has eight panels which are used to collect and look at claim information.
The app design flow is shown below and has two work streams depending which button is selected from the Main_Menu_Panel. Both streams converge on the Overview which returns the user to the Main Menu. The Border_Panel is an overlay for all panels, excepting the Main Menu.
The initial screen for the app is the Main_Menu_Panel. This has two buttons which control the app. Select the Find_Case_Button in the hierarchy window and use the On Click() event to add the Search_Panel and Border_Panel and set both game objects to active. This overlays the Border_Panel on top of the Search_Panel, because Border_Panel is at the bottom of the hierarchy. Inactivate any unused panels to avoid raycast issues, in this case set Main_Menu_Panel to be inactive, as shown below.
The Search_Panel has the Search_Button which is used to activate the Select_Panel and inactive itself. The Border_Panel remains active until it is no longer used.
The Select_Panel has an Accept_Button which is used to activate the Overview_Container and inactive itself.
The Overview_Container allows the user to scroll through the claim information and has a Back_Button which is used to reactivate the Main_Menu_Panel and inactive itself and the Border_Panel, which is not used for the Main_Menu_Panel.
The Main_Menu_Panel also has a create a case button, labeled “File New Claim”. Select the Create_Case_Button and use the On Click() event to add the Create_Claim_Panel and Border_Panel and set both game objects to active. Inactivate the Main_Menu_Panel, as shown below.
The Create_Claim_Panel has a Next_Button which is used to activate the Select_Panel and deactivate itself.
The Create_Location_Panel also has a Next_Button which is used to activate the Take_Photo_Panel and deactivate itself.
The Take_Photo__Panel has yet another Next_Button which is used to activate the Overview_Container and deactivate itself.
The Overview_Container was discussed earlier and contains a Back_Button that returns to the Main_Menu_Panel. Unity’s button system allows easy implementation of design flow for the app’s user interface (UI).
