M365

6 Model-Driven App Controls and When to Use Them

by Larry Saytee

7 min read

In this article, you will learn about 6 Model-driven app controls. This is an overview of various controls that enhance users’ interaction within Model-driven apps, for a better experience. 

These controls include Toggles, Star ratings, Calendars, Number inputs, and more. They can be configured at both the table and form levels to allow users to visualise and interact with data effectively on various devices. 

Important:

Model-driven app is an approach that starts with a data model. This type of app is data model-focused with predefined, consistent layouts. The app designer allows you to add Components (containing field controls) and arrange data, add dashboards, forms, views, and charts to interact with the data in the form of an app. 

Additionally, Model-driven apps facilitate connecting your tables via relationships, to permit navigation between them and reduce the likelihood of repeating data.

Note:

With Model-driven apps, much of the layout is determined by the Components you add. The emphasis is more on quickly viewing your business data and making decisions instead of on intricate app design. With Canvas apps, the app maker has total control over the app layout.

Using controls in the Form Designer:

To add these controls:

  1. Sign in to Power Apps.
  2. Navigate to Tables in the left navigation pane.
  3. Select the desired table and go to the Forms area.
  4. Choose the main form to edit.
  5. Select the column or section to add the control.
  6. In the properties pane, click + Component to view available controls and select the desired one.
  7. Specify the devices (web, tablet, phone) where the control should appear.
  8. Configure the control's properties as needed.
  9. Click Done to apply the configurations.
  10. Click "Publish Customizations".

In this article, you will learn about 6 Model-driven app controls. We'll review them one by one.

Grid Controls

  • Subgrid: Displays a view of data related to the current record, allowing users to view and open records within the grid.
  • Editable Grid: Enables inline editing of records directly from views and subgrids across web apps, tablets, and phones.
  • Power Apps Grid Control (Preview): The next evolution of grid controls, allowing users to view, open, and edit records from views and subgrids. By default, it is read-only but can be configured to be editable.

Display Controls

  • Calendar: Shows scheduled activities and their details in a calendar format, supporting day, week, or month views.
  • Canvas App: Embeds a canvas app within a Model-driven form, integrating data from various sources alongside Microsoft Dataverse.
  • External Website (iFrame): Integrates content from external websites within a form using inline frames.
  • HTML and Image Web Resource: Displays HTML pages or image files on a form via web resources.

Also read: 5 Dataverse Security Roles for Power Platform and Dynamics 365 Users

Input Controls

  • Checkbox: Allows users to choose between binary values by checking or clearing a check box. It can be configured with Yes/No choice columns.
input controls

Figure 1 - Checkbox - control

  • Number input: The number input control allows users to enter data quickly. Users only have to tap the plus and minus buttons to change a numeric value in increments you set. Users can also type a number directly into the column. This column is only supported in edit mode.
number input

Figure 2 - Number input - control

  • Option set: The Option set control allows users to select from a set of choices when entering data. It is made available by default when introducing a choice column into a form.
  • Pen input: The Pen input control allows users to capture written input such as signatures. The Pen input control can be configured for multiline text columns for use with web, tablet, and phone clients. The minimum recommended Maximum Length specified for the column this control maps to is 15000.
pen input

Figure 3 - Pen input - control

  • Rich text editor: The Rich text editor control provides users a WYSIWYG and editing area for formatting text. The control's input and output format is HTML. The control allows copied rich text, such as from a web browser or Word, to be pasted into the control. It can be configured with text columns. 
  • Toggle: The Toggle control allows users to choose between binary values, such as on/off and yes/no, by toggling the button. It can be configured with yes/no choice columns.
Toggle control

Figure 4 - Toggle - control

Additional "AI Builder" Controls

  • Business card reader: The AI Builder business card reader control allows users to detect business cards and extract their information, such as images and text. You can take photos directly in the component or load images that you've taken. 

Additional "Power BI" Controls

  • Power BI report: The Power BI report control allows users to add a Power BI report on the form. 

Also read: Top Advantages of Connecting MS Forms to SharePoint Online

More Components Controls

  • Form component: The "Form component" control allows users to edit information of a related table record directly from another table’s form. For instance, the form component on a separate tab on the main account form allows the user to edit a contact record without leaving the account form. 
  • Collaboration Controls: The "Collaboration controls" allows users to simplify their workflow collaboration. It allows users to work with approvals, files, meetings, notes, and tasks from M365 and Microsoft Teams without switching the context from app to app. 

Legacy controls (available in classic, mostly):

  • Auto-complete: The "Auto-complete" control allows a user to filter an item list as they type and lets them select a value from the drop-down list. For instance, you can use this control to let users choose from a dropdown list of states or countries/regions. This control maps to a Single Line of Text type column. This control is available in the Classic Interface only.
  • Flip: The "Flip" switch allows users to turn a value on/off, providing a choice between two values. This control is available in the Classic Interface and Modern App Designer.
  • Multimedia: The "Multimedia" control allows users to embed videos and provide a richer customer experience for sales and people on the go. Use this control to map to a URL column that contains the audio or video link to play in the control. Supported media types include: Streaming MP4 files, YouTube videos, Azure media, and Audio streams. This control is available in the Classic Interface only.
  • Linear gauge: The "Linear gauge" control allows users to input numerical values by dragging a slider instead of typing in the exact quantity. The slider provides whole number input and display only. Use this control for any numerical and money columns. This control was, however, deprecated in April 2021. This control is available in the Classic Interface only.
  • Star rating: The "Star rating" provides users with a visual representation of a rating. The maximum number of stars you can set is five. You can use this control with whole number columns. It can’t be used with decimal columns. This control was deprecated in April 2021. This control is available in the Classic Interface and Modern App Designer.
  • Arc knob: The "Arc knob" provides users with a way to enter data by sliding the knob, and shows up on the screen as an arc. The arc knob control provides whole number input and display only. Use this control for any numerical and money columns. You can use touch to change the value, you can also focus on the number and edit it using the keypad. This control is available in the Classic Interface only.
  • Timer control: The "Timer control" shows your users how much time is available to complete an action in the resolution of an active row or how much time has passed since the time to complete the action has passed. This control is available in the Classic Interface and Modern App Designer.
  • News control: The "News control" provides valuable insights from the latest news about your customers, competitors, and contacts. The news control delivers relevant news from Bing News. This control is available only on the Classic Interface. 

Key Takeaways 

In this article, you have learned about 6 Model-driven app controls. 

These controls enhance the functionality and user experience of Model-driven apps by providing interactive and intuitive data visualisation and manipulation tools. You can find more information on "Classic Interface versus Modern App Designer" here.

FAQs

Q: How to add custom control in model-driven app?
To add a custom control, open Power Apps, go to Tables, then Forms. Select a form, choose a field or section, click "+ Component" in the properties pane, and pick a control. Configure settings and target devices, then click "Done" and "Publish Customizations" to apply changes.
Q: Do model-driven apps require Dataverse?
Yes, Model-driven apps are built on Microsoft Dataverse. Dataverse stores and manages the app’s underlying data using standardized tables and relationships, which support consistent layouts and connected experiences across forms, views, and dashboards. It’s an essential part of the Model-driven app architecture.
Q: What is the data source for model-driven app?
The primary data source for Model-driven apps is Microsoft Dataverse. It provides a secure and scalable environment for storing structured business data, enabling relationships between tables, easy integration, and powerful features like role-based access and business logic within the app’s framework.
Larry Saytee
Larry Saytee
Power Platform Developer

Larry is a Power Platform & M365 Solutions Architect, Developer, and Author. He specializes in Power Platform and SharePoint (cloud and on-premises). He writes articles that make complex topics easy to understand with clear steps and visuals. Knowing how hard it can be to learn new technology, he supports better tools to make it simpler.

Expertise
  • Microsoft Power Platform
  • Microsoft Power Automate
  • Power BI
  • Microsoft Team
  • Microsoft Planner
  • +8

Ready to start?

Get in touch or schedule a call.