Yesterday, June 8th, Microsoft announced the public preview availability of the new Model-Driven App Designer (or Modern App Designer). You can read about the announcement on the Microsoft Power Apps blog in the link below:
https://powerapps.microsoft.com/en-us/blog/introducing-the-modern-app-designer-preview/
With the new app designer, it is now easier and faster to build model-driven apps. With just a few clicks, you can build views and forms in the maker portal, and preview your app changes within the same designer. In order to access the modern app designer, we need to navigate to https://make.preview.powerapps.com/ and in order to start creating a new app, click on the “+ New app” command bar button and select Model-driven from the drop down menu.
This will pop up the create model driven app from blank window, where we can select to use the Modern app designer (preview) or the Classic app designer. To start with the Modern app designer, select that choice, and click Create.
Next we will need to give the app a name, and an optional description, and click on the Create button.
After a few seconds the new app will be created, and we can start adding pages. Let’s start and review what we see on the screen once we created a new app. In the Command bar we have 7 buttons. These are Back, New Page, Settings, Switch to classic, Save, Publish and Play. Most of these are pretty obvious.
The New Page allows us to create a new page for our app, which can be either table based or dashboard. The Settings allows us to change the app name and description that we entered before, and specify whether the app will be available offline.
When you select a page type of type table-based, you will be able to select one or more tables to add to the app, and also add them to the navigation (site map).
When you click on the add button, you will be able to see a preview of your app directly from the designer window, basically a preview of what you app would look like. The image below shows you the preview window. You will notice that the center area is the preview, and on the left hand side we see the tables that were added to the app.
The preview area, not only shows you the way the app looks, but allows you to change the layout so that you see how the app will look in responsive design for different devices.
You will also notice the collapsed section to the left that is expanded to show the data tables, which contain two additional links. The first link is Pages. This link shows you the tables you have selected and the different forms and views that you have access to edit.
The next link is navigation. This is basically your site map. By default the site map will contain a single Area, Group and Subarea, and any additional tables that you have added to the app, either automatically when selecting the entities or manually. You have the ability to rename the areas and the groups, as well as remove any of the existing items (such as the default Subarea1, which is not necessary once you added new tables). The image below shows the navigation that is available once the new tables are created.
The main thing to notice that when setting up the new app, this is all live data. As you click through the views and the forms, you will be able to switch between them and view the live data of the different views and forms. You will also be able to see which forms and views are enabled for the app, and navigate to edit each of these and edit them from the designer directly.
When you are in your apps view, and see the list of all your existing apps (the ones created using the new Modern experience or old ones, the edit button will now have a drop down option to edit the app using the new Modern design
As this is still work in progress, not all existing apps will be editable in the modern designer, but the new apps that you create can be editable from there. Not sure yet if this is a bug, or future enhancement.
There are still some limitations to the new Modern app designer that will probably be addressed by the time this become available to the general public, or at a later data and features that are missing. You can see those by navigating to the link below:
https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/app-designer-overview