Model-driven Apps: User Interface Modeling

Introduction to UI Modeling in Model-driven Apps

Model-driven Apps are one of the main interactive application types in the Power Platform, based on Microsoft Dataverse. They are designed to provide consistent, configurable, and adaptive user interfaces that allow users to visualize and manage data through structured components such as sitemaps, forms, views, and dashboards.

UI modeling in a Model-driven App focuses on the logical and visual configuration of the components that define the end-user experience. Each element, from navigation to form fields, is defined within the Dataverse context and can be customized for specific groups or security roles.

The Sitemap: Application Navigation Structure

The sitemap of a Model-driven App is the main navigation structure that allows users to access different functional areas of the application. It is hierarchically organized into areas, groups, and subareas:

• Areas: represent the main sections of navigation (for example, Sales, Service, Marketing).
• Groups: contain sets of related items within an area.
• Subareas: are the individual navigational items that link to tables, dashboards, or other pages.

The sitemap designer, available in the Power Apps Maker Portal, allows visual configuration and real-time testing. Each sitemap entry can be linked to specific Dataverse tables or custom dashboards, ensuring an intuitive navigation experience.

Figure 1 – Hierarchical sitemap structure in a Model-driven App

Table Forms: Designing the Forms

Forms are the main component for viewing and editing records in Dataverse. They enable building structured and consistent experiences for data input and modification. The main types of forms include:

• Main Form: used for creating and editing records; it can include complex controls such as iFrames, web resources, or PCF controls.
• Quick View Form: displays read-only related data from other N:1 tables, useful to provide context to the user.
• Quick Create Form: allows fast record creation with a compact layout.
• Card Form: designed for mobile experiences or interactive dashboards, featuring a minimal design.

Each form can be assigned to one or more security roles, ensuring that each user group accesses only the relevant forms. Forms can also include interactive components like Business Process Flows (BPF) and business rules to automate presentation and validation logic.

Form design is done in the Power Apps Form Designer, where you can add sections, tabs, controls, and conditional logic. You can also insert HTML or JavaScript web resources to extend UI features.

Table Views: Data Visualization and Analysis

Views in Model-driven Apps represent data grids that allow users to explore, filter, and sort records in a table. In Dataverse, there are three main view types:

• System Views: predefined by the system (Quick Find, Lookup, Associated View) and cannot be deleted.
• Public Views: shared among all users and customizable by administrators.
• Personal Views: created by end users for their personal workspace.

Each view can be configured by selecting which columns to show, sort order, and filters to apply. You can also integrate charts and Power BI visuals for advanced data representation.

Views also serve as the starting point for bulk actions, such as mass editing or triggering Power Automate flows. Their design plays a key role in user efficiency and productivity.

Command Bar and Ribbon Workbench

The command bar (formerly known as the “ribbon”) is the set of buttons and commands that let users perform actions on records. It is table-specific and can differ between grid and form views.

The command bar types include:

• Main Grid Command Bar: visible in the main table view.
• Form Command Bar: available within the record form.
• Subgrid Command Bar: used in related subgrids within a form.

Command bar customization can be achieved using the Ribbon Workbench tool, part of the XrmToolBox. With this tool, you can:

• Reorder or hide existing buttons.
• Add new buttons with JavaScript handlers or custom URLs.
• Integrate automation functions using Power Fx or Power Automate.

Recently, Microsoft introduced a low-code method to extend the command bar directly from the Maker Portal, simplifying configuration and reducing the need for custom code.