Model-driven apps
Every component of a Power Apps model-driven app, working in your browser. Click through views, forms, lookups, the timeline and dashboards in an app that looks and behaves like the real one, then read when to use each part and what to watch out for.
- 68 componentsFrom the site map to duplicate detection, each with a guide entry and a "Show me" link into the app.
- A mock DataverseTables, relationships, choices, business rules and a process flow. Your changes are saved in this browser; Reset data starts over.
- The real lookThe Fluent 2 "new look" of model-driven apps, built for desktop as the product is.
App shell 6
The frame around every page: header, site map, command bar, search and notifications.
App header
The bar across the top of every page: app name, search, quick create, advanced find, notifications, settings, help and your account.
Show me: App header in the demo appSite map
The left navigation of a model-driven app: groups of pages for tables and dashboards, with an area switcher and a collapsible pane.
Show me: Site map in the demo appHome, Recent and Pinned
Shortcuts at the top of the site map: Home opens the default dashboard, Recent lists what you opened, and Pinned keeps your favourites.
Show me: Home, Recent and Pinned in the demo appCommand bar
The row of buttons above a grid or form with the actions for that page, such as New, Delete and Refresh, with extras under the ellipsis.
Show me: Command bar in the demo appNotifications
A bell in the app header that shows in-app notifications sent to you, with a count, a panel to read them and a way to dismiss them.
Show me: Notifications in the demo appDataverse search
One search box in the header that finds records across many tables at once, with suggestions as you type and results grouped by table.
Show me: Dataverse search in the demo app
Views and grids 11
Lists of records: the grid, its filters and columns, and the view controls that replace it.
Read-only grid
The default list of rows for a table: sort, resize and select rows, run bulk commands from the command bar and page through the results.
Show me: Read-only grid in the demo appColumn header menu
The menu on each column header of a grid: sort A to Z or Z to A, filter by, group by, change the column width and move the column.
Show me: Column header menu in the demo appJump bar
A row of letters A to Z under a grid that filters the rows to names starting with the letter you select.
Show me: Jump bar in the demo appView selector
The drop-down above a grid that switches between system views and your personal views, and lets you save, manage and share views.
Show me: View selector in the demo appEdit columns
A pane on the grid page where you add, remove, reorder and reset the columns of the view, including columns from related tables.
Show me: Edit columns in the demo appEdit filters
A pane on the grid page with an expression builder for filtering the view on several columns, groups and related tables.
Show me: Edit filters in the demo appQuick find
The Filter by keyword box above a grid, which searches the columns defined in the table's Quick Find view and narrows the rows shown.
Show me: Quick find in the demo appEditable grid
A grid where you click a cell to edit it in place, with changed cells marked and Save and Discard buttons at the bottom of the grid.
Show me: Editable grid in the demo appKanban view
A board of cards in lanes that you open with Show As > Kanban, where dragging a card changes its status or stage.
Show me: Kanban view in the demo appCalendar view
A month or week calendar for the rows of a view, opened with Show As > Calendar and driven by a date column.
Show me: Calendar view in the demo appChart pane
A chart shown beside a view with Show Chart, built on the same rows as the grid, where selecting a part filters the list.
Show me: Chart pane in the demo app
Forms 12
How a record opens: the main form, its states and checks, and the smaller forms around it.
Main form
The page for one row: a header card, tabs, and sections of fields in one to three columns, with labels beside or above the fields.
Show me: Main form in the demo appField states
How a field shows that it is required, recommended, locked, read-only or hidden, so people know what they can and must fill in.
Show me: Field states in the demo appQuick create form
A short form in a side panel for creating a row fast, opened from the + button, a lookup's New option or a subgrid's New button.
Show me: Quick create form in the demo appQuick view form
Read-only details of a related record, shown on the form you are working in and driven by a lookup column.
Show me: Quick view form in the demo appCard form
A compact layout that shows each row as a card, used in subgrids and in narrow or mobile views.
Show me: Card form in the demo appForm selector
A drop-down under the record name that switches between the main forms available for the table.
Show me: Form selector in the demo appSave status
The Saved or Unsaved indicator on a form, with Ctrl+S, the leave-without-saving prompt and autosave.
Show me: Save status in the demo appForm notifications
Banners at the top of a form for information, warnings and errors, raised from form scripts with the Client API.
Show me: Form notifications in the demo appField validation
How a form checks a value against the column's range, length, format and required settings before it saves.
Show me: Field validation in the demo appBusiness rules
No-code logic that shows or hides columns, sets values, locks, requires and warns, based on conditions.
Show me: Business rules in the demo appForm assist (Copilot)
A Copilot side pane on the form that answers questions about the current row and helps fill in fields.
Show me: Form assist (Copilot) in the demo appRecord set navigation
Up and down arrows and an n of N counter on a form opened from a list, to move between rows without going back.
Show me: Record set navigation in the demo app
Field controls 26
One control per column type, plus the custom controls you can put on a column.
Single line of text
A one-line text column with formats for plain text, email, phone, URL and ticker symbol, each with its own action.
Show me: Single line of text in the demo appMultiple lines of text
A plain multiline text column for longer notes and descriptions, up to 1,048,576 characters.
Show me: Multiple lines of text in the demo appRich text editor
Formatted text in a column, with a toolbar for bold, lists, links, tables and images, stored as HTML.
Show me: Rich text editor in the demo appWhole number, decimal and float
Number columns shown in the user's own number format, with minimum, maximum and precision set on the column.
Show me: Whole number, decimal and float in the demo appCurrency
A money column that shows the record's currency symbol and keeps an exchange rate and a base currency value.
Show me: Currency in the demo appDuration
A whole number of minutes shown as readable time such as 1.5 hours, with a drop-down of common intervals.
Show me: Duration in the demo appLanguage
A whole number column that stores a language code and shows a searchable list of language names.
Show me: Language in the demo appTime zone
A whole number column that stores a time zone code and shows a list of zones such as (GMT+01:00) Brussels.
Show me: Time zone in the demo appDate and time
Date only and date and time columns with a calendar, a time list and a behaviour setting for time zones.
Show me: Date and time in the demo appChoice
A column with a fixed list of options, shown as a drop-down, with optional colours used in charts.
Show me: Choice in the demo appChoice as buttons
A choice column shown as a row of buttons instead of a dropdown, so every option is visible and one click picks it.
Show me: Choice as buttons in the demo appChoices (multi-select)
A column that holds several options at once, shown as pills with a checkbox flyout, and as semicolon-separated text in grids.
Show me: Choices (multi-select) in the demo appYes/No
A two-option column that can be shown as a toggle, a checkbox or a dropdown, with your own labels for each option.
Show me: Yes/No in the demo appLookup
A reference to one row in another table, with a search flyout that lists recent rows and opens the full row from the pill.
Show me: Lookup in the demo appAdvanced lookup
A dialog for finding rows with search, a view filter, a table switcher and a list of what you selected so far.
Show me: Advanced lookup in the demo appCustomer lookup
A lookup that can point to an account or a contact, with results grouped by table in the flyout.
Show me: Customer lookup in the demo appOwner
The owner of a row, chosen from users and teams, shown with an avatar and presence on the form and in its header.
Show me: Owner in the demo appImage column
A column that stores a picture, with upload and preview on the form; the primary image also appears in the form header.
Show me: Image column in the demo appFile column
A column that attaches one file to a row, with a size limit, a download link and a remove button.
Show me: File column in the demo appSystem columns
Read-only columns that Dataverse fills in for you, such as autonumber, status, created and modified details and the owner.
Show me: System columns in the demo appStar rating
A whole number column shown as clickable stars, so people give a score without typing.
Show me: Star rating in the demo appToggle switch
A Yes/No column shown as a switch that slides on and off, with the labels of the two options.
Show me: Toggle switch in the demo appFlip switch
A deprecated custom control that shows a Yes/No column as a two-sided switch labelled with the column's own options.
Show me: Flip switch in the demo appSlider
A custom control that lets users set a number by dragging a handle between a minimum and a maximum.
Show me: Slider in the demo appLinear gauge
A read-only custom control that draws a number as a filled bar against a minimum and a maximum.
Show me: Linear gauge in the demo appArc knob
A deprecated custom control that sets a number by dragging a handle around a dial-shaped arc.
Show me: Arc knob in the demo app
Dashboards and pages 3
Pages that aren't a view or a form: dashboards and custom pages.
Interactive dashboard
A dashboard of clickable charts, record streams and tiles, where selecting a chart part filters everything on the page.
Show me: Interactive dashboard in the demo appClassic dashboard
A fixed grid of charts and lists from several tables on one page, which can also act as the default home dashboard.
Show me: Classic dashboard in the demo appCustom page
A canvas app page that sits inside a model-driven app, for free-form screens that forms and views cannot give you.
Show me: Custom page in the demo app
Commands and dialogs 6
What the commands open: settings, assign, share, delete, state changes and duplicate detection.
Personalization settings
A personal dialog for time zone, rows per page and number, date and time formats, which applies to every grid and form.
Show me: Personalization settings in the demo appDeactivate and activate
Commands that move a row between active and inactive status, asking for a status reason and locking the row while inactive.
Show me: Deactivate and activate in the demo appAssign
The Assign command and dialog that change the owner of one or more rows to yourself, another user or a team.
Show me: Assign in the demo appShare
A dialog that gives other users or teams access to a single row with chosen rights, without changing its owner.
Show me: Share in the demo appDelete
A confirmation dialog for removing rows, where the table relationships decide what happens to related rows.
Show me: Delete in the demo appDuplicate detection
A warning dialog on save that lists existing rows matching a published duplicate detection rule, so users can stop or continue.
Show me: Duplicate detection in the demo app
No component matches your search.