Add the best menu bar to get easy and fast access to all your useful browser options and internet products! Everything you need from a browser in one horizontal bar. That includes the File, Edit, View, History, Bookmarks, Window, and Help menu items. And with one single click on the X icon, you hide the horizontal bar. Dec 20, 2016 Partender allows you to build a virtual representation of your bar on your smartphone. Instead of manually writing down your inventory using cumbersome scales or expensive hardware, simply tap where the liquor level is in the bottle and swipe to the next bottle on your shelf. All your bar’s inventory information is stored in the cloud. Mar 31, 2020 Let’s build a very basic React app and store its state data on the electron-store we have created in the previous section. The React app is a basic counter where you can increase or decrease a number by clicking the buttons. Powerapps navigation menu. Add the Gallery control from the “ Insert ” - “ Gallery “. And then choose “ Blank vertical “. Powerapps navigate to another screen. To connect the “Gallery” control to data source Click on “ Add an item from the insert tab and connect to data “.

If you build a PowerApp for mobile devices you are faced with limited space to display information. If you add a menu you will be loose additional space. This post shows how you can build a menu structure that uses a minimum of space.

The minimum of space is used if the menu is not visible and uses a mimimum of space if it is visible.

First of all we need a data structure where the menu structure is defined. I need a Collection of menu items. My definition of a menu item is like that:

I need an Id to identifiy my item, a parent to define the hierarchy, an image for visualisation, an action – a number to determine what should happen if you click the icon, and finally the alternate text (altText).

In my App i I have implemented it in App.OnStart an it looks like this:

ClearCollect(
glbMenueItems,
{id: 1,parent: -1,image: „add“,action: 1,altText: „New“},
{id: 2,parent: -1,image: „filter“,action: 2,altText: „Filter“},
{id: 3,parent: -1,image: „trash“,action: 3,altText: „Deleted“},
{id: 4,parent: -1,image: „message“,action: 4,altText: „Mail“},
{id: 5,parent: 2,image: „person“,action: 5,altText: „My“},
{id: 6,parent: 2,image: „data“,action: 6,altText: „All“}
)

parent = -1: Root level, parent = n: Sub menu of node with id = n

First of all we need a button to show and hide the menu that will be shown on the left hand side. I use a burger icon with code in OnSelect that sets a local flag ctxShownMenue to determine if the menu is visible or not.

UpdateContext(
{
//Flip Menue
ctxShowMenue: Not(ctxShowMenue),
//Reset Action
ctxAction: -1
}
)

The Variable ctxAction will be used for determine which button is pressed. When switching the menu it will reseted to -1.

The menu itself is implemented with a Gallery (Blank Vertical). The items property is set to the glbMenueItems (see above), filtered by parent -1, because its the root level.

Filter(glbMenueItems,parent=-1)

The Visible-Property is set to

ctxShowMenue.

To show something in the Gallery, we have to place some Controls to it. So select the Gallery and click on the small Pen on to upper left corner of the Control.

For the first step, we add an Icon and set the Icon Property to

If(
image = „add“,
Icon.Add,
image = „filter“,
Icon.Filter,
image = „trash“,
Icon.Trash,
image = „message“,
Icon.Message,
image = „person“,
Icon.Person,
image = „data“,
Icon.Database
)

Why that?

To show a different Icon on every menu item, we have to edit the Icon Property. Unfortunatly it’s an Enum so we check the Image-Data of the current Item and set the corresponding Icon.

That’s all to toggle the top level of the menu that should look like that:

Now we want to add some actions. To handle different actions for each menu item, I need a place where i can put some code to handle each action. Thats the first requirement. The second is, that it has to be triggerd by the sender, in our case the Icon.

So i take a simple button named btnMenueActions that can be called with Select(btnMenueActions) by each Icon. To let the Button know what to do, we need the info, given by the Icon. I have decided to put the info into a local context variable named ctxAction.
Do not forget to make the Button invisible in production mode!!

Now go to the Gallery and select the Pen to Edit the Gallery template, select the Icon and select the OnSelect property and put the following code into it:

Now it should looks like that:

The code:

If(
//This button was the last pressed button
ctxAction = ThisItem.action,
//Reset the action
UpdateContext({ctxAction: -1}),
//else put the action to the number, specified in our data structure.
UpdateContext({ctxAction: ThisItem.action})
);
//Call the event handler-Button
Select(btnMenueActions)

When an Icon is pressed, the action will be set to the value, defined in our data structure.

The Button, I have mentioned above, will be selected by the pressed icon, so we have to put some code into the OnSelect property:

//Clear Flyout Datasource
Clear(glbFlyout);
If(
//Button for action 2 is pressed!
//-> Collect all sub menue items
ctxAction = 2,
ClearCollect(
glbFlyout,
Filter(
glbMenueItems,
parent = 2
)
);
)

Now we have a simple and generic menu that can be toggled if necessary. A button works as an event handler to handle actions fired by the menu icons.

We have used a gallery control to build the base level of the menu. So we do the same for the flyout in level 2.

To do so, bring the gallery control to edit mode and place a horizontal gallery control with an icon in it to the item template:

The idea is to get a collection of subitems of of all nodes with parent = id of selected icon. As shown above this code is placed to the button control that works as our event handler. The following snippet is used in btnMenueActions.OnSelect as shown above:

ClearCollect(
glbFlyout,
Filter(
glbMenueItems,
parent = 2
)
);

This Collection, named glbFlyout will be used as a data source for our nested gallery:

If you start your app, you will notice that if you press a button, every nested gallery will display the subitems of the pressed button:

To hide the sub gallery for the unpressed level1 menu items and to show the subitems only once we have to create some conditional formattings:

First of all, we set the gallery to vivible, only if necessary:

If(action=ctxAction,true,false)

That is good, if you have sub items, but looks not so fine if the sub menu is empty:

Build Menu Bar Apps Store

So select the Width property and set the width to 0, if the parent icon is unpressed:

If(ctxAction=action && CountRows(glbFlyout)>0,395,0)

Issue: The gallery control actually has a fixed width wheater there is 1 Icon in it or 5. This has to be made dynamic for the next version.

Thats all for that! 🙂

A last word to the content area.

Whatever content you use, you have to think about the X coordintes. I prefer to place the content area to X=0 if the menu is closed and direct besides the menu icons if it is visible:

Build Menu Bar Apps Free

If you have any comments or ideas to improve that solution, please let me know on twitter (@PapaRiedel) 🙂

Build Menu Bar Apps List

Stefan