Create a Model Driven App
In this exercise, we will learn how to create a model-driven app by using one of the standard entities that is available in our Microsoft Power Apps environment.
Note: The model-driven app can be built using Standard and custom tables.
To create a Model-driven app, follow the following steps:
Step 1: Sign in to Power Apps by using the organizational account.
Step 2: Select the environment, or go to the Power Apps admin center to create a new one.
Step 3: On the Home page, select Blank App.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-01.webp)
Step 4: On the Create screen, select Blank app based on Dataverse, and click Create.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-02.webp)
Or we can click on Apps, and then select Model-driven from the + New app dropdown menu.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-03.webp)
Step 5: On the New model-driven app page, enter a name and description for the app. (For example, enter My first model-driven app for the name, and This is my first model-driven application for the description.)
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-04.webp)
Step 6: After a few minutes, our new app will appear.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-05.webp)
Add Account table to the app We can add pages to the app by using the App Designer.
Step 1: If necessary, using the navigation on the left, select the show or hide menu names button (looks like 3 horizontal lines) to show the menu names.
Step 2: Select Navigation.
Note: We use the term Site maps which defines the manner by which users move between tables in a model-driven app. This is nothing but called Navigation.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-06.webp)
Step 3: Select the Group1 text. On the right-hand side of the screen change the Title to Customers. By doing we are customizing the name of the Group which is by default Group1.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-07.webp)
The name of the Group is changed as shown in the image below.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-08.webp)
Step 4: Under the Customers group, select Subarea1.
Step 5: On the right-hand side of the screen set the Content type field to Table.
Step 6: On the Table field that appears, select Account.
Step 7: Set the Title field to Accounts, to change the name of the subarea.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-09.webp)
Alternatively, to add the Account table add to the app we can follow the following steps:
Using the command bar at the top, select the + Add Page button.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-10.webp)
On the New Page dialog box, select Dataverse table, then select the Next button.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-11.png)
On the New Page dialog box, select Account then select the Add button.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-12.webp)
Here the Account table is added to the model-driven app.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-13.webp)
Here the My Active Accounts view and the Account form that is automatically created when our Dataverse instance is initialized.
Add forms and views to the app
Now that we have added a table to our app, we are going to specify which Account forms and views should be used with the application.
Step 1: Using the navigation on the left, select Pages.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-14.webp)
Step 2: Expand Account and select Account form.
Step 3: Turn off the toggle saying “Include all forms in the app” at the bottom.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-15.webp)
Click on Turn off on Turn this off? dialog box to confirm.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-16.webp)
Step 4: On the right-hand side of the screen, from the list of Forms that appears, select ellipses on the Account and select +Add from the menu.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-17.webp)
Step 5: Remove Information form.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-18.webp)
Step 6: Similarly for the view, under Pages on the left, select Account view.
Step 7: On the right-hand side of the screen, turn off the toggle saying “Include all views in the app” at the bottom.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-19.webp)
Step 8: Select the ellipses on My Active Accounts view and select + Add.
Step 9: Repeat the same process for Active Accounts and Inactive Accounts view.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-20.webp)
Remove all other views from “In this app” section, when we remove, they are added to the “Not in this app” section. If we accidently delete some view then we have the option to readd them again from the Not in this app section.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-21.webp)
Add Contact page to the app
Next, we are going to add another table to our application. In this case we are going to add the Contacts table since a customer could be either an account or a contact.
Step 1: On the command bar at the top, select the Add Page button.
Step 2: On the New page dialog box, choose Dataverse table, then select the Next button.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-22.webp)
Step 3: In the Search field, enter Contact, then select the Contact table.
Step 4: Select the Add button.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-23.webp)
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-24.webp)
Save and publish the app
To save and publish the application follow the following steps:
Step 1: At the command bar at the top select the Save button.
Step 2: After saving the application, click on the Publish button. After publishing the app, it is ready for us to run or share with others.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-25.webp)
Step 3: To test the application, select the Play button on the command bar.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-26.webp)
We can add some data to the table by clicking on + New.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-27.webp)
Select the Show Chart.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-28.webp)
Command bar
We will learn how we can create a moderns commands control using Power Fx.
Open the command designer to edit a command bar
Step 1: Select any table from the Pages area in the app designer.
Step 2: Select the three dots (...), and then select Edit command bar.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-29.png)
We can see a list of option to choose from which is nothing but the choices of a command bar to edit.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-30.png)
There are four command bars illustrated each one below:
• Main Grid:
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-31.png)
• Main form:
When we open any specified record.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-32.png)
We can see the command bar which is known as Main form command bar.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-33.png)
• Subgrid view
We can see the subgrid command bar in the sub grids.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-34.png)
• Associated view
If we click on Related then click on any related table.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-35.png)
The command bar then we see is known as Associated view command bar.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-36.png)
Step 3: Choose Main grid and then click on Edit. We reach to the following screen.
When we click on + New dropdown it gives us four options Command, Dropdown, Split button, and Group.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-37.png)
Let’s suppose we select Command, then a dialog box is shown which ask for the language we are going to use to create a control.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-38.png)
Select Power Fx and then Continue.
After this a new control is created.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-39.png)
We can give the name and the various power formula can be written.
Here we have changed the name to MyCustomControl.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-40.png)
We can also use the icon and specify the action to be performed when it is invoked.
• Label (optional): Enter a label that will be displayed on the command button.
• Icon: Select an icon for the command button.
• Visibility: Select whether to Show the command button or to Show on condition from formula.
When we select “Show on condition from formula” the Visible property is shown and we can write power formula for that.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-41.png)
• Tooltip title (optional): Enter a tooltip title. The title appears to the user when they hover their mouse over the command.
• Tooltip description (optional): Enter a tooltip description. The description appears for the user below the tooltip title when they hover their mouse over the command.
Change the formula on the OnSelect property of the command, if we don’t change this nothing happened when we click on the control.
Power Fx
We can drag and drop the command to the desired location. To save and publish click on Save and Publish.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-42.png)
After Save and publish click on Play.
We can see our control in the command bar. When we click on the control, the function which is written on the control executes.
![Model-Driven Power Apps Model-Driven Power Apps](media/model-driven-app-43.png)