Exploring the Power Apps Toolbar Control: A Game-Changer for App Creation
Microsoft has recently unveiled an extremely useful new modern control in Power Apps canvas apps – the toolbar control. This innovation promises to revolutionize the way developers and power users create and manage their applications within the Microsoft 365 ecosystem. Here’s a closer look and why it’s a game-changer for app design and development.
I’m thrilled to share my insights about the new toolbar control in Power Apps. This post will guide you through its capabilities and how you can leverage it in your apps. There’s even an associated video where I show how it’s done!
Introduction to the Toolbar Control
The toolbar control in Power Apps is designed to simplify the user interface, making it more intuitive for app users to navigate and interact with applications. This control allows for the addition of buttons that can perform various actions, such as navigating between screens, editing items, or initiating item updates.
Getting Started with the Toolbar Control
To begin, make sure that your Power App has modern controls enabled. This is crucial for accessing the toolbar control and other modern controls that enhance app design.
Step 1: Enabling Modern Controls
Go to the Power Apps settings and ensure that the “Modern controls and themes” option is turned on. This setting is foundational for using the toolbar control in your app designs.
Step 2: Inserting the Toolbar Control
With modern controls enabled, you can now insert the toolbar control into your app. Go to the “Insert” menu, search for “Toolbar,” and select it to add it to your canvas.
Step 3: Customizing the Toolbar‘s Appearance
The real power of the toolbar control lies in its customization capabilities. You can add buttons to the toolbar and define their actions. For instance, you might want a button for adding new items, editing existing ones, or navigating to different app screens.
To add a button, navigate to the toolbar’s “Items” property and define the button’s properties, such as its name, icon, and action. This is one example of the syntax for an icon:
{
ItemKey: "delete",
ItemDisplayName: "Delete",
ItemTooltip: "Click here to delete this item",
ItemIconName: "Delete",
ItemDisabled: true,
ItemAppearance: "Subtle",
ItemIconStyle: "Filled"
}- ItemKey – This is the unique name that you give to each icon in your toolbar. This will be important when setting up the button’s actions later.
- ItemDisplayName – This is what the button’s text says, optional.
- ItemDisabled – Boolean true or false, if you’d like the button to be disabled, optional.
- ItemVisible – Boolean true or false, if you’d like the button to be hidden, optional
- ItemTooltip – This is the text that you would like to show when the mouse is hovered over the button, optional.
- ItemIconName – This is the system name for the icon that you would like to be displayed. Here is an icon reference page.
- ItemAppearance – Options are primary, secondary, outline, subtle and transparent. Subtle and transparent look exactly the same to me, here’s an example:
- ItemIconStyle – Regular or filled
In my associated video, see how you can create logic around a button only being disabled under certain conditions, and this can be applied to the visibility of a button as well. There are also some properties, in the property panel of a toolbar. Adjust the alignment, position and color palette here, as well as alignment and style
- Alignment – horizontal or vertical
- Layout – Icon before, icon after, icon above, text only, icon only
Here is an app where I’m using both a vertical toolbar for the navigation, and a horizontal toolbar for the gallery.
Step 4: Defining Button Actions
- For navigation, use the “Navigate” function to direct users to the desired screen.
- For editing items, the “EditForm” function can be utilized to allow users to modify selected items.
- This property uses a switch control. Notice that it is based on the ItemKey property that was defined in the Items property, and is unique for each toolbar item.
Switch(
Self.Selected.ItemKey,
/* Action for Key 'new', go to the form screen and fill out a new form*/
"new",
NewForm(frmPurchase); Navigate('Purchase Request Form'),
/* Action for 'edit', go to the form screen and edit the selected item */
"edit",
EditForm(frmPurchase); Navigate('Purchase Request Form'),
/* Action for 'delete', delete the selected item */
"delete",
Remove('Purchase Requests', varRecord),
/* Action for 'view', go to the form screen and view the item as read-only */
"view",
ViewForm(frmPurchase); Navigate('Purchase Request Form'),
/* Action for 'approve', patch to the SharePoint list to edit the selected item's status */
"approve",
Patch(
'Purchase Requests',
varRecord,
{Status: {Value: "Approved"}}
),
/* Action for 'email' send an email about the selected item */
"email",
Office365Outlook.SendEmailV2(
varRecord.'Created By'.Email,
varRecord.Title & " info",
"This is for you"
),
/* Default action */
Notify("Unrecognized button clicked")
)Use a Collection in a Power Apps Toolbar Control
A useful aspect of the toolbar control, since it uses a table in its items property, is the ability to create a collection when the app starts, to use on all screens, especially for navigation. This is helpful if you need to change or add icons and their visual properties, from a central location. In my toolbar vertically down the left for navigation, here are the steps to change it to a collection. I’ll name my collection colNav
- Copy the entire function from the items property of the toolbar control.
- Go to the app’s OnStart property.
- Type ClearCollect( colNav, PASTE_HERE )
- In the toolbar’s items property, clear it out and only use colNav
- Don’t worry, it’s all in the video, here:
Thanks for reading! I hope you’ll try it out and let me know what you think. There are so many possibilities.
Learning Power Apps? Check out my FREE Power Apps Basics course, and then move up to my immersive Power Apps Advanced Course.