Building Enterprise Apps with Unity — Separating our UI elements from the information pages.

Currently, our UI is a part of the search screen and we need to separate it so we can create new screens that will utilize it. We’ll create a new panel called Border_Panel and remove its image component. While we’re renaming things, let’s rename Find_Case_Panel to Search_Panel.

Next, we’ll move the White Borders, Logo, Home Button, Arrow buttons, and menu buttons and drag them into the Border_Panel.

And we’re done! Now we can turn the borders off at the menu screen, and back on during the information/interaction screens.

Now to create the next panel which is ‘select case’.

We’ll turn off the search panel and create a new panel called “Select Panel” and remove the image component.

To make things easier, we’ll duplicate the gray background from the search panel and drag it into the select panel.

Next we’ll add a new UI Image and call it Gray_Divider, and drag the Grey line into it. click perserve aspect, anchor stretch center, 0 it out, bring it to the upper part of the screen and pad it around 30.

add a new text element and place some temporary infomation in. change vertical overflow to overflow and make the font bigger like around 18. Also center both horizontal and vertical, and place it near the top under the grey divider.

Speaking of dividers, duplicate it, and place it below the text.

Create a new button, add the button image for the source, anchor center stretch, 0 it out, preserve aspect, pad around 50 and for the text, change it to ACCEPT, change the color to white and make it bigger.

We want our bottom button to be in the same spot, 145 at the top seems to be a good number, so we’ll copy the buttons transform component and paste it into the search buttons panel.

Next we’ll make the case overview panels, It’s a little more complex so we’ll go over it tomorrow! See you then!