New Power Apps Designer & Collapsible Groups

Microsoft just keeps rolling out new features as part of 2021 Release Wave 2 and this is another one that I am very excited about. With this release Microsoft created a new Power Apps designer that will make it even easier for app makers to configure existing apps and create new apps from scratch! Now keep in mind, this is not a form designer, we will still design our forms in the same place(s), as before, this designer is for the actual Power Apps. Some people that read this headline might think that this new designer is for canvas apps only, but this is not the case! If you are using model-driven apps in your environment(s), then you’ll be able to use this new Power Apps designer as well! Besides everything we were able to do in the legacy power apps designer, we will also get some options that we didn’t have before! Just keep reading and I will tell you all about it!

Accessing the new Power Apps Designer

Previously you would be able to access the (legacy) Power Apps designer by navigating to the app switcher and clicking on the ellipse (…) of an app that you wanted to configure or edit. The new experience will be available from https://make.powerapps.com. (Make sure you’re in the correct environment by viewing the name of the environment on the top bar). On the sitemap on the left hand side of the screen click on ‘Apps’. This will take you to a list of all available apps in the environment. This includes both canvas apps and model-driven apps. Click on the three dots on the right side of the app that you want to edit/configure. You’ll notice the (top) edit button will have an arrow to the right that you can click. Once you click the arrow you’ll notice a button that reads ‘Edit in preview’. Once you click this button you’ll be taken to the new Power Apps Designer.

Editing a Model Driven App

Pages | When you click on ‘Pages’ you’ll (again) notice all the tables that are part of this app. From here you can use the search bar to remove or add additional tables to the app. When you hover over an existing table, you’ll notice the three dots appear again. When you click on the three dots you’ll notice 2 commands that become visible: ‘Edit command bar(preview)’ and the option to ‘Remove account’. When you remove a table, this will remove it from the app. When you expand a table you’ll notice there is a form and view area below the table. This is where you can pick the forms and views that should be available for this table in this app. When you click on the table form below the table you’ll notice a list of forms will show on the right side of the app designer. These are all the forms that are available for this table in this app. When you scroll down and click on ‘Manage Forms’ this will open a small window allowing you to add or remove forms you want to be available in the app. Any forms that are not checked will not show in the form list and will not be available in the app. If you click on the ellipse of a form, this will provide you with the options to either edit or remove the form from the app.
When you click on the view below the table name you’ll notice a list of views on the right side of the screen. These are all the views that are currently available for this table in the app. Just like with the forms, you have the ability to scroll down and click ‘Manage views’ to add or remove views from the app. You can also click on the ellipse of a view to either edit the view or remove it from the app.
When you click on ‘App’ (above all tables) you will be able to change the app name and description. If you want to add a page to an app you can click the ‘+Add Page’ button above the ‘App’ button. The pages could be a table based view, a dashboard or a custom page. Custom pages are currently in preview! If you want to learn more about custom pages check out this announcement! When you create a page with a view, this will also add an related form page where users can view any of the records from the view/list.

Navigation | Previously we didn’t have a lot of ways to change any of the navigation items on the sitemap of a model driven app. Yes we were able to add tables and remove tables by using the legacy app designer and we could move some of these items around, but that was really all we could do from a configuration perspective. Well, that has changed as part of 2021 Release Wave 2! When you click on the Navigation tab on the site map you’ll be able to configure some of the sitemap items. On the top of the navigation section that opens, you’ll see ‘Navigation Bar’. When you click this, you’ll notice on the right side of the screen there are 4 options for configuration:

• Show Home
• Show Recent
• Show Pinned
• Enable Collapsible Groups

The first three options (Show Home, Recent and Pinned) will allow an app maker to hide these navigation items from the sitemap. The last section ‘Enable Collapsible Groups’ will allow you to collapse the different sections on the sitemap of your app. When you check this box, all the sections will turn into collapsible groups and all of the sections will be auto-collapsed by default. Currently there isn’t a way to pick and choose which sections you want to configure as collapsible nor is there a way to set which of these sections should be expanded or collapsed by default.
When you click on the ‘+Add’ button below the search bar you’ll notice you can add navigation groups or subareas from here. In order to move a subarea or group you can click the three dots on the right side of the area or group name and select ‘move up’ or ‘move down’. Unfortunately there is no drag and drop functionality here.

Data | When the Power App designer opens, you’ll notice there are 3 different items on the sitemap (left side of the screen): Pages, Navigation and Data. The ‘Data’ tab shows all the tables that are stored in the app. If you scroll far enough down, you’ll also see a section that will show you all the tables in the entire environment. This is for viewing only, there is no way to add tables to the app from here. When you hover over a table you’ll notice three dots appear on the right side of the table. When you click on these dots, a menu item will show allowing you to edit the table. When you click this button it will open another screen and will take you to the actual table where you can make changes if needed.

I hope you enjoyed this article! Be sure to check in again next week for a new article or subscribe here to never miss another post!