Related Service

SharePoint Development

Know more about SharePoint Development

Learn More

Power Apps – Model Driven Apps (Part 2)

Published: Sep 7, 2020

In our last blog of this PowerApps series, we have gone through the below points:

  1. Power Platform

  2. PowerApps

  3. Canvas Apps

Today, Our SharePoint Development Team will will walk you through the second type of Power Apps – Model driven apps. Model driven apps are newly added to Power Apps focusing on building apps with responsive UI which runs in any browser and devices with no code or low code approach required. The apps are useful as they provide the platform where we can design simple or complex apps. Model driven apps access CDS i.e. Common Data Service which uses entities to store data which is alike to Dynamics 365.

Table of Content

  1. Model driven apps
  2. Run Model Driven apps
  3. Conclusion

Model driven apps

Let’s go through this app creation and its execution through Customer Details Management demo.

Create model driven apps

To create and run model driven apps, Power Apps Plan 2 is required. First login to Power Apps by navigating to link https://make.powerapps.com.

  • Select option ‘Model-driven app from blank’ amongst the three options available.
    Select option Model driven app from blank
  • Click on Create.
  • Enter the App Name, its Unique Name and Description which is optional. Click on Done.
    Enter the App Name
  • After the app is created, it will redirect to App Designer screen.
    App Designer screen

  • Now, the app is created, and we can develop an app using the below 3 stages.

    1. Designing Business Data
    2. Defining business logic
    3. Composing the app

Designing Business Data

The data of model driven is stored in Entities. Entities is like tables where columns are created having different datatypes as per the requirement of app. Follow the below steps to create Entities:

  • Select option Entities under Data in left navigation pane.
    Select option Entities

  • Default Entities list will be displayed.
  • To create new Entity, click on “New Entity” option on top of the page.
    click on New Entity

  • Enter the Entity name, add the primary field of the Entity and click on Create button.
    Enter the Entity name
  • The Entity will be created. Click on the Entity name to view its details. Consider here, Entity named “CustomerDetails” is created.
    CustomerDetails

  • The page will display the default fields of the Entity. Click on “Add field” option to create custom fields required by app.
    Add field

  • Enter the field name, select its datatype and click on “Done” option at the bottom.
    select its datatype

  • Currently, we have created few custom fields with different datatypes as below:
    1. Customer Name → Text
    2. Customer Number → Phone
    3. Order Items → Whole Number
    4. Place Order → Option Set
      Inside Place Order field, we have set the options as Yes and No.
  • Refresh the App Designer to reflect the changes made in the Entity. Add the newly created Entity to the App by clicking the “Entities” option in App Designer pane.
    clicking the Entities
  • Select the custom created Entity from the list of Entities and it will be added under the Entities section.
    Select the custom created Entity

  • Similarly, other Entities as required by the app can be created and added to the App using App Designer pane.

Defining business logic

After the required Entities are created and added to the app, the next step is to create the business logic using those Entities. To create business logic, follow the below steps:

  • In the App Designer pane, click on the Business Process option and select the Create New option.
    Business Process option
  • Provide the name to the process, select the Entity on which the process is to be attached and then click OK.
    Provide the name to the process

  • A designer will open where a default stage is added.
    A designer will open
  • Rename the stage by clicking on it and hit the “Apply” button.
    Rename the stage by clicking

  • A Data Step is included in the stage. Edit it by clicking on “Details” and then click on the Data Step.
    Edit it by clicking on Details

  • A pane will open on right hand side where properties of the Data Step can be changed. Change the name of the Data Step, select the entity field and click on Apply.
    Change the name of the Data Step

Note: You can check the Required attribute as per the requirement.

  • Multiple Data Sets can be added to the Stage. Click on the Stage box and add another Data Step from the top.
    Click on the Stage box
  • Click on the “+” symbol to add a new Data Step.
  • Currently, the stage is defined to add Customer Name and Customer Number.
    the stage is defined to add Customer Name
  • New stage can be added by selecting New Stage option under “+ Add” symbol.
    New stage can be added
  • Click on “+” symbol and new stage will be added. In this example, stage is asking the user to add the Number of Items to order.
    new stage will be added
  • Now to add a condition, select “Add Condition” option under “+ Add” symbol. Set the condition details and click on Apply.
    Now to add a condition
    Here as per the current example, the condition is set to check if “Order Items” entered by the user is greater than 0. If it is greater than 0 then allow user to enter “PlaceOrder” field value. Provided below is the full screenshot of flow.
    Order Items
  • From the top of the designer, click on Validate to check if there are any errors and if there is no error then click on Save.
    click on Save
  • Now after the business process flow is created, the next step is to Activate the flow. Click on “Activate” option and flow will be attached to the App.
  • Inside the App designer, select only one flow that is created.
    select only one flow

Composing the App

After the entities are added and business logic for the flow is decided, the last step is to compose the app i.e. define the views, charts and form structure for the app.

  • Click Forms to design the forms structure for the App. There is a provision where a new form will be created.
  • Click View to select the views for the Entity when app is running. We can select multiple views and a new View can also be created.
  • Similarly, for Charts and Dashboard, new Charts and Dashboard can be created.
  • One important thing to configure is the Site Map. Site Map defines the navigation in our App. Click on the Site Map option and pane will open where we can define Groups, Area and Subarea.
    Click on the Site Map option
  • Select “Group” option under “+ Add” symbol, to add a Group.
    Select Group option
  • Group will be added in the pane. We can also drag and drop the Group, Area and Subarea from the right panel.
    Group will be added in the pane
  • Add Subarea under Group and add the Entity to it.
    Add Subarea under Group
  • These Groups, Area and Subarea will be displayed on the left pane when the App is running.

Run Model Driven apps

Once everything is defined and created for the app, the app is now ready to run.

Click on Publish and then on Play option available on top right corner of the App Designer.

Click on Publish and then on Play option

  • Now its time to add data to the Entity and check business flow.
  • Click on “+ New” icon to add data to Entity.
    add data to Entity
  • Add Details under Basic Details by clicking on Basic Details icon. Here, enter the Customer Number and Customer Number, and then hit on Save.
    Add Details under Basic Details
  • After saving it, again clicking on Basic Details tab will ask to move to Next Stage. Click on Next Stage option.
    Click on Next Stage option
  • Enter Order Items and again click in Next Stage. Here as earlier defined in business process flow, if order items entered is greater than 0 then it will move to next stage else not.
  • If Order Items entered is greater than 0 then it will ask for Place Order in next stage and then click Finish.
    Place Order in next stage
  • Completed message will be displayed once the flow is completed.
    Completed message will be displayed
  • Clicking on the Subarea added on the left page, here it is “CustomerDetails” will display the newly added Customer Details.
    CustomerDetails will display

Conclusion

Through this blog, one can start build a powerful Model driven apps. Based on the requirement, create ones’ simple/complex responsive accessible design running apps. This app type composes the different kind of components likes forms, views, dashboards, charts and various business process with great UI. Don’t wait to give a try to this powerful app and stay tuned for our next topic – PowerApps Portals!!!

More Blogs on Power Apps:
Power Apps + Microsoft Bots = Power Bots
Power Apps – Canvas Apps (Part 1)

Comments

  • Leave a message...

Related Articles

Power Apps – Portals (Part 3)

Sep 15, 2020

HIPAA Compliance Healthcare Software Development

Sep 9, 2020

Power Apps – Canvas Apps (Part 1)

Aug 26, 2020