To edit an existing app with the new designer, we click the Edit > 'Edit in preview' menu option from the app list.
The parts that make up the designer
The screenshot beneath illustrates the new designer. Unlike the old model driven app designer, the new designer shows exactly how the app appears at runtime. We can see a preview of the app in the main body of the designer.
Along the left-hand panel of the designer, there are three items:
- Pages - we use this to create and manage the pages in an app
- Navigation - we use this to manage the navigation/menu items in an app
- Data - this section displays the tables that are used in an app
Along the menu bar, we can edit the app settings and we can switch to the old designer by clicking the 'switch to classic' button. The classic designer enables us to access settings that are not yet available in the new designer.
Editing the App Settings
The settings button opens the dialog that's shown beneath. We can use this to set the app name and description. It's currently not possible to set the app icon or welcome page. To do this, we would need to switch back to the classic designer.
From the pages section, we can manage the pages in an app and we can add new pages. A page defines content that a user can access through the navigation menu. There are 2 page types that we can create - 'a table based view and form' page, or a dashboard. Eventaully, we'll be able to add a 'canvas app' page to an app.
To display the contents of a table in a page, we select the 'table based view and form' option. The designer enables us to select the target table. At runtime, a user can view the records in the table, and can edit or add new records through a form.
When the new page appears in the designer, we can use the items beneath the page in the left hand panel to access the data entry form, and to manage the views for displaying lists of records.
Defining the menu items in an app
From the navigation panel, we can manage the navigation/menu items in an app. The add button enables us to add one of two navigation items - a group, or a subarea. These terms match the existing terms in the 'site map' part of the old designer.
A subarea creates a menu item that opens a 'table page' or a dashboard. A group provides a visual grouping of 'subarea' menu items in the navigation menu..
Managing the data in an app
The Data section of the designer shows the tables that are in-use. It also shows all other available Dataverse tables. Against each table, we can click a menu item to edit the table. This opens the table designer in the new browser tab