Power Apps Navigation Menu Component!
Overview:
In this guide, we delve into the creation of a Power Apps Navigation Menu Component tailored for a company’s portal application. This menu simplifies navigation between different sections, such as news, travel, budgets, and more. The article covers everything from the initiation of the app to its testing, with detailed steps and code snippets.
Introduction: The Company Portal App
The company’s dedicated portal application serves as a valuable tool for employees at a technology firm, allowing them to access pertinent information across various categories such as news, travel, budgets, and more. Employees can seamlessly navigate between different sections by simply selecting options from the intuitive navigation menu.
Create a New Canvas App:
- Go to the Power Apps portal and sign in.
- Click on “Create” and select “Canvas app from blank.”
Develop an application titled ‘App Name’ and optimize it for tablet devices in the desired format.
Creating The Component & Properties
Launch Power Apps Studio and initiate the creation of a fresh canvas app with a blank template. Next, navigate to the Components menu and generate a new component, naming it “cmp_compNAV“
Assign a dark blue color to the component’s Fill property using the RGBA value provided below.
RGBA(51, 52 ,74, 1)
Next, create a custom input property named “Items” with the data type “Table.”
The Table property will store details regarding the icon and text to be presented in the menu, as well as the target screen for navigation. Implement this code within the Table property to provide placeholder values for designing the menu.
Table( {Value: "Item 1", Icon: Icon.Waypoint, Screen: App.ActiveScreen}, {Value: "Item 2", Icon: Icon.Waypoint, Screen: App.ActiveScreen}, {Value: "Item 3", Icon: Icon.Waypoint, Screen: App.ActiveScreen}, {Value: "Item 4", Icon: Icon.Waypoint, Screen: App.ActiveScreen}, {Value: "Item 5", Icon: Icon.Waypoint, Screen: App.ActiveScreen}, {Value: "Item 6", Icon: Icon.Waypoint, Screen: App.ActiveScreen} )
Incorporate this code into the ‘Item’ property of the component.
Subsequently, generate four extra customized input properties for storing the menu colors…
Color (Color)
CurrentIndicator Color
HoverFill
SelectedFill
Enter these values into the properties of the component.
Color White
CurrentIndicatorColor ColorFade(RGBA(29,161,242,1),70%)
HoverFill RGBA(255,255,255,10%)
SelectedFill RGBA(255,255,255,10%)
Adding Icons And Text
Utilize a gallery within the side navigation menu to display both icons and descriptive text for each menu option. Insert an empty vertical gallery into the component.
Set the gallery’s Items property using the following code.
cmp_compNAV.Items
Utilize the following code within the OnSelect property to guide the user to the chosen screen…
Navigate(ThisItem.Screen)
…and proceed to complete these remaining properties.
Height: Parent.Height
Width: 80
ShowScrollbar: false
TemplatePadding: 0
TemplateSize: Parent.Height/8.5
Next, add a new icon to the gallery…
…accompanied by the subsequent attributes and their respective settings.
Color: cmp_compNAV.Color
Icon: ThisItem.Icon
Height: 35
Width: 35
X: (Parent.TemplateWidth-Self.Width)/2
Y: 15
Subsequently, include a fresh label below the icon…
…and assign these properties to it.
cmp_compNAV.Color
Text: ThisItem.Value
Align: Center
Size: 10
Width: Parent.TemplateWidth
Height: 25
X: 0
Y: 50
Our component is beginning to resemble a menu!
Current Screen Indicator
When you select a menu item, a slim vertical rectangle will appear alongside it, serving as an indicator of the active screen.
Introduce a fresh custom property named ‘Default’ of the Text type. This property will hold the name of the currently displayed screen.
Place the first menu option’s name into the Default property to provide a value for constructing the component.
"Item 1"
Add an empty label to the gallery.
…and utilize these attributes to specify its dimensions, visibility, and appearance.
Fill: cmp_compNAV.CurrentIndicatorColor
Height: Parent.TemplateHeight
Visible: ThisItem.Value= cmp_compNAV.Default
Width: 5
HoverFill And SelectedFill
When you hover the mouse over a menu item, it should become highlighted. Similarly, when you select a menu item, it should also be highlighted.
Add a label to the gallery with no text content.
…and configure these properties to achieve the intended hover and selection effects.
Height: Parent.TemplateHeight
Width: Parent.TemplateWidth
Fill: If(ThisItem.Value=cmp_compNAV.Default, cmp_compNAV.SelectedFill, Color.Transparent)
HoverFill: cmp_compNAV.HoverFill
PressedFill: cmp_compNAV.SelectedFill
Place the following code within the OnSelect property of the label to initiate screen navigation upon clicking.
Navigate(ThisItem.Screen)
Ultimately, resize the gallery to the specified dimensions.
Height: 700
Width: 80
We are now prepared to test the menu within the app!
Test The Component In An App
The navigation component directs the user to different screens upon clicking. Create the following screens in sequence to test this component effectively:
1. News Screen
2. Science Screen
3. Travel Screen
4. Budget Screen
5. Maps Screen
6. Settings Screen
The menu options will be stored as a table within a variable rather than a collection. This choice is made because these options are not intended to be altered during the app’s runtime. Place the following code in the ‘OnStart‘ property of the app, and then execute the ‘App OnStart‘ action.
Set(sidemen_var,
Table(
{Value: "Item 1", Icon: Icon.Waypoint, Screen:App.ActiveScreen},
{Value: "Item 2", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
{Value: "Item 3", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
{Value: "Item 4", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
{Value: "Item 5", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
{Value: "Item 6", Icon: Icon.Waypoint, Screen: App.ActiveScreen}
)
Place the component on the “News Screen” and utilize `c sidemen_var ` as the Items property.
Configure the Default value as ‘News’ to ensure alignment with the text displayed on the menu option.
"Item 1"
Next, navigate to the science screen
…and configure the Default value as ‘News’ to ensure it aligns with the text displayed in the menu option. Repeat this procedure for all the screens within the menu.
"Item 2"
We now possess a fully functional navigation menu component.
Conclusion:
The Power Apps Navigation Menu Component is an indispensable tool for organizations aiming for a seamless user experience in their portal applications. With an intuitive design, customizability, and ease of integration, this component ensures that users can efficiently access and navigate between different app sections.
