Navigation on the first screen of the library app

To guide users with the intuitive interface on the first screen

The first screen of the app should be readable for users to directly go to their destination. In this sense, 'Icons' are useful and intuitive to make the composition of the screen. If you have many destinations, it is recommended to use 'Gallery' to allign all the elements and to manage the contents of the menus.

The first screen of ATICON LIBRARY

Functions and properties we will learn on this post.

• Gallery
• Understanding of Items and Table data
• Icon and Navigate

As the app has 7 screens as destination, we use 'Gallery' to make the navigation menu bar with the table data. Gallery is able to embrace many types of data including table structure data. 

Gallery (items and table)

The gallery is composed with 'items' (the selected one is the first item on the picture above). However, you can adjust only the size of the first item not the contents of the items.  

   

To manipulate contents of items, you have to go to 'Items' property of Gallery.

As you can see, all the menus' elements are composed with an icon and text. There is one more data invisble, which is destination name (we will look up this later). 

In the items property, you can input table structure data. The table fuction creates a table from an argument list of records. The table's columns will be the union of all the properties from all the argument records. 

As an item in gallery can embrace multiple data, you can make as many columns as you need. Let's look at our table data as an example.

Table structure is composed with {}. This is callsed brace. We can think of these are single packages in table, and these {} packages can contain multiple data with column names. We have 3 columns which are 'MenuText', 'MenuIcon', and 'ScreenToGoTo'. Once any string or number is recorded after 'column name :', the contents are saved to the equivalent columns. 

You can discriminate columns with ','

For example, 

{

    MenuText: 'PROJECTS',

    MenuIcon: Icon.LevelsLayersItems,

    ScreenToGoTo: byProjects

}

You can determine column names as you want. If data type is string, text should be written in ' ' for the program to understand the type of data. To select icons, Icon.XXX is the way to find icons in PowerApps. byProjects is one of the screen names in our app which is automatically detected by PowerApp system. 

To play with Gallery with table data, you should be familiar with the structure. For beginners, it would be complex to understand table data.

The easiest way to grasp the idea of table data is to draw table sheet in your head. 

   

So, the picture on the left is table data in code, and we visualized the table data in a form of a table sheet. Gallery could understand the table data in the form like the picture on the left as the table sheet like the picture on the right. 

In conclusion, table is useful to store data in package. 

Icon & Navigate (ThisItem~!!)

Here, we will learn how to extract data from gallery. To refer to the individual record in a formula, use 'ThisItem'.

Operator	Applies to	Description
ThisItem	Gallery control EditForm control Display form control	The default name for the current record in a Gallery or form control

In the following Gallery control, the Items property is set with table data with 'MenuText', 'MenuIcon', and 'ScreenToGoTo'. To return a data for the icon property of Icon, you can use ThisItem for the formula for the 'MenuIcon' like the picture below. 

Likewise, the formula for the 'MenuText' also uses ThisItem.

Also, when users click the icons, Navigate operator can help them to reach where they need to go. Since Navigate operator needs a screen name, you can return relevant data typing 'ThisItem.ScreenToGoTo' in the round brackets, (), of Navitage.

As you have noticed, data name in Gallery property is 'Items', when you need these data, you can literally say 'ThisItem.XXX'. Therefore, no matter what data structure is, if data is stored in Item property, remember 'ThisItem' operator.