5.2 Form Component Controls & Specialized UX Elements
Key Takeaways
- The Form Component Control renders a fully interactive Main Form of a related entity directly inline on a host record form, enabling simultaneous cross-table CRUD editing.
- Form Component Controls bind to lookup columns and are defined via form XML parameters specifying the target table and form GUID or name.
- Dataverse strictly enforces a one-level nesting limitation on Form Component Controls: nested form components inside child forms will not render.
- Power Apps Component Framework (PCF) controls replace basic text/numeric inputs with tactile controls including Sliders, Linear Gauges, Arc Knobs, Toggles, Star Ratings, and Pen Inputs.
- The modern Power Apps Grid control upgrades subgrids with inline cell editing, nested child subgrids, column filtering, aggregations (Sum/Avg), and custom cell renderers across Web, Tablet, and Phone clients.
Form Component Controls & Specialized UX Elements
Delivering high-efficiency user interfaces in Microsoft Dataverse requires minimizing unnecessary navigation and presenting complex data in intuitive, actionable formats. Traditional model-driven forms often suffer from excessive clicks: viewing or editing a parent record requires opening separate tabs or popups, while standard text fields offer plain data entry rather than rich visual input.
To overcome these UX bottlenecks, Power Platform provides Form Component Controls for inline related-record editing and Power Apps Component Framework (PCF) controls for rich visual interactions. Mastering these components is essential for the PL-200 exam and enterprise application architecture.
1. Form Component Control Architecture & Inline Editing
In standard model-driven forms, Quick View forms allow users to view read-only data from a related parent record. However, when users need to modify that parent data (e.g., updating a Contact's mobile phone while logging a Case), they previously had to navigate away to the parent record.
The Form Component Control solves this problem by embedding a complete, fully interactive Main Form of a related lookup table directly inline inside a section on the host form.
+-----------------------------------------------------------------------------------+
| FORM COMPONENT CONTROL INLINE EDITING |
| |
| [HOST FORM: Case (Incident)] |
| +------------------------------------------------------------------------------+ |
| | Ticket Title: Server Connectivity Failure | |
| | Priority: High | Status: Active | |
| | | |
| | +-- SECTION: Customer Details (Form Component on 'Customer' Lookup) -------+ | |
| | | Account Name: Contoso Enterprises | | |
| | | Main Phone: +1 (555) 019-2834 [Editable Inline] | | |
| | | Primary Email: support@contoso.com [Editable Inline] | | |
| | | Billing Tier: Enterprise Gold [Editable Inline] | | |
| | +--------------------------------------------------------------------------+ | |
| | | |
| | Description: Customer reported switch offline since 08:00 AM... | |
| +------------------------------------------------------------------------------+ |
| | |
| +---> Single [Save] button commits changes to BOTH Case & Account! |
+-----------------------------------------------------------------------------------+
Key Capabilities
- Full CRUD Editing: Users can modify parent record columns directly inside the host form section without navigating away.
- Unified Transactional Save: When the user clicks Save on the host form, Dataverse validates and saves changes on both the host record and the embedded form component record synchronously.
- Business Logic Execution: Business Rules, Form Scripts (JavaScript), and PCF controls configured on the embedded child form execute normally within the embedded section.
Configuration Mechanics
To configure a Form Component Control:
- Open the host table form in the modern Form Designer or classic solution explorer.
- Select the Lookup Column pointing to the target entity (e.g.,
parentcustomeridorprimarycontactid). - In the column properties, add the Form Component Control (
MscrmControls.Form.FormComponentControl). - Configure the XML parameter specifying the target table name and form unique identifier:
<FormsDisplay>
<NativeForms>
<Form id="a1b2c3d4-e5f6-7890-abcd-ef1234567890"
entityName="contact"
formMode="edit"
name="Contact Inline Edit Form" />
</NativeForms>
</FormsDisplay>
Critical Restrictions & Governance Rules
[!CAUTION] Strict 1-Level Nesting Limit: Dataverse supports only one level of Form Component nesting. If Form A embeds Form B via a Form Component Control, and Form B contains a Form Component Control for Form C, Form C will NOT render inside Form A. Multi-level recursive nesting is blocked to prevent circular rendering loops and performance degradation.
- Polymorphic Lookups: Multi-table lookups (such as
Customer, which can link to either anAccountor aContact) require specific multi-form XML mappings to handle both target entity types dynamically. - Read-Only Enforcements: If a user lacks edit privileges on the related record via Dataverse Security Roles, the embedded form component renders as read-only for that user automatically.
2. Power Apps Component Framework (PCF) Overview
Power Apps Component Framework (PCF) empowers developers and functional consultants to replace standard HTML textboxes and dropdowns with rich, responsive UI elements built on modern web standards (HTML5, TypeScript, React, and Fluent UI).
+-----------------------------------------------------------------------------------+
| PCF CONTROL BINDING ARCHITECTURE |
| |
| [Dataverse Column / Field] <====== Two-Way Property Binding ======> [PCF UI] |
| - Whole Number (Rating: 4) <-------------------------------------> [Star UI] |
| - Boolean (Value: True) <-------------------------------------> [Toggle UI] |
| - Multiple Lines (Base64) <-------------------------------------> [Pen Input] |
| - Multiple Lines (HTML) <-------------------------------------> [Rich Text] |
| |
| [Form Factor Targeting] |
| - Web Browser: Enabled - Tablet Client: Enabled - Mobile Phone: Enabled |
+-----------------------------------------------------------------------------------+
Client Form Factor Targeting
Every PCF control can be targeted independently across three client endpoints:
- Web: Desktop web browsers running modern model-driven app shells.
- Tablet: Power Apps mobile client optimized for tablet screen dimensions.
- Phone: Power Apps mobile client optimized for compact smartphone viewports.
3. Core Out-of-the-Box PCF Controls
Dataverse includes a robust suite of native, out-of-the-box PCF controls that require no custom code or external solution imports.
+-----------------------------------------------------------------------------------+
| SPECIALIZED PCF CONTROLS OVERVIEW |
| |
| [TOGGLE SWITCH] [STAR RATING] [PEN INPUT] |
| Active: [ (O) ON ] Rating: [ * * * * o ] Signature: [ ~JohnDoe~] |
| (Two Options / Boolean) (Whole Number 1-5) (Signature / Base64) |
| |
| [NUMBER SLIDER] [ARC KNOB] [RICH TEXT EDITOR] |
| Volume: [---|-----] 65% Dial: ( 75% ) [B] [I] [U] [Link] |
| (Whole / Decimal Number) (Numeric Percentage) Formatted HTML text... |
+-----------------------------------------------------------------------------------+
1. Rich Text Editor (RTE)
- Bound Column Type: Multiple Lines of Text (Plain Text / Rich Text format).
- Features: Provides a full WYSIWYG formatting toolbar with bold, italics, underline, bullet/numbered lists, font sizing, hyperlinks, table insertion, and inline image pasting.
- Configuration Web Resource: Behavior can be customized by linking a JSON configuration web resource to configure custom toolbars, specify allowed HTML tags, and define font whitelists.
- Storage: Stores content internally as sanitized HTML markup within the Dataverse text column (up to 1,048,576 characters).
2. Pen Input / Signature Capture
- Bound Column Type: Multiple Lines of Text or Image column.
- Features: Provides a smooth drawing canvas for capturing digital signatures, sketches, and handwritten notes on touchscreens and mobile devices.
- Storage: Encodes the drawing as a Base64 PNG image string or stores it natively in the Dataverse image blob store.
3. Toggle (Flip Switch)
- Bound Column Type: Two Options (Boolean: Yes/No, True/False).
- Features: Replaces classic radio buttons or checkboxes with modern iOS/Android-style sliding toggle switches, dramatically improving touch-device usability.
4. Star Rating
- Bound Column Type: Whole Number (Integer values 0 through 5).
- Features: Renders interactive 5-star visual rating controls. Clicking a star immediately updates the underlying integer value (1 to 5).
- Use Cases: Customer satisfaction (CSAT) surveys, lead grading, and performance evaluations.
5. Number Input Slider, Linear Gauge & Arc Knob
- Bound Column Type: Whole Number, Decimal Number, or Floating Point.
- Features: Provides draggable slider bars, linear gauges, or circular rotary dials with configurable minimum, maximum, and step intervals (e.g., min: 0, max: 100, step: 5).
4. Subgrid Controls: Power Apps Grid Control vs. Classic Editable Grid
Displaying and manipulating child records inside a parent form is a frequent functional requirement. Model-driven apps provide modern grid controls to enable rapid inline data entry.
+-----------------------------------------------------------------------------------+
| POWER APPS GRID CONTROL FEATURES |
| |
| +------------------------------------------------------------------------------+ |
| | [+] New Item | [X] Delete | [Filter] | Columns: [Name, Qty, Unit Price, Total] | |
| +------------------------------------------------------------------------------+ |
| | > Line 1: Industrial Widget A | Qty: [ 10 ] | Price: [$150.00] | $1,500.00 | |
| | +-- [Nested Child Grid: Serial Numbers / Sub-assemblies] ------------------+ | |
| | | Serial #SN-9012 | Inspected: True | Warehouse: Seattle-01 | | |
| | +--------------------------------------------------------------------------+ | |
| | > Line 2: Heavy Duty Cable B | Qty: [ 25 ] | Price: [ $40.00] | $1,000.00 | |
| +------------------------------------------------------------------------------+ |
| | TOTAL AGGREGATIONS: Total Quantity = 35 | Grand Total = $2,500.00 | |
| +------------------------------------------------------------------------------+ |
+-----------------------------------------------------------------------------------+
The Modern Power Apps Grid Control
The Power Apps Grid Control represents the state-of-the-art subgrid and view control in Dataverse, superseding the legacy Classic Editable Grid:
- Inline Cell Editing: Users edit text, numeric, date, and lookup values directly within grid rows without opening individual forms.
- Infinite Scrolling: Eliminates legacy 50-row pagination buttons, delivering smooth infinite scrolling through large datasets.
- Nested Grids: Supports expanding a row to reveal a hierarchical child subgrid (e.g., expanding an Order Line to view associated Serial Numbers).
- Column Aggregations: Computes and displays column-level totals (Sum, Average, Min, Max, Count) in a dedicated footer bar.
- Custom PCF Cell Renderers: Allows embedding custom PCF visualizers inside individual grid cells (e.g., rendering priority as colored badges or ratings as stars inside the grid).
| Grid Feature | Read-Only Grid (Default) | Classic Editable Grid | Modern Power Apps Grid Control |
|---|---|---|---|
| Inline Data Editing | No (Double click opens form) | Yes | Yes (Fluent UI optimized) |
| Infinite Scrolling | No (Page buttons 1-50) | No (Page buttons 1-50) | Yes |
| Nested Child Subgrids | No | No | Yes |
| Footer Aggregations | No | No | Yes (Sum, Avg, Min, Max, Count) |
| Custom Cell Renderers | No | No | Yes (PCF custom cell controls) |
| Accessibility | Standard | Legacy | Full WCAG 2.1 Compliance |
5. PCF Control Configuration & Best Practices
| Control Name | Bound Data Type | Configurable Properties | Primary Enterprise Use Case |
|---|---|---|---|
| Form Component | Lookup Column | Target Entity, Form ID, Form Mode | Inline editing of parent Account/Contact on Case/Order form. |
| Rich Text Editor | Multiple Lines (Text) | Custom Configuration Web Resource | Rich formatted emails, knowledge articles, case resolution notes. |
| Pen Input | Multiple Lines / Image | Output Format (PNG/Base64), Stroke | Mobile field service signature sign-off and inspection acceptance. |
| Toggle | Two Options (Boolean) | On/Off Labels, Display Mode | Touch-friendly status flags (e.g., "VIP Customer", "Active"). |
| Star Rating | Whole Number (1-5) | Max Stars (Default: 5) | Customer feedback scores, lead qualification ratings. |
| Number Slider | Integer / Decimal | Minimum, Maximum, Step Value | Percentage discounts, progress tracking, volume thresholds. |
| Power Apps Grid | Subgrid / View Dataset | Enable Editing, Enable Filtering, Nested Grid | Order line items, project milestone tracking with inline edits. |
A functional consultant is configuring a Case management form in a model-driven app. Customer Service Representatives need to view and update the primary Contact's job title, direct phone number, and preferred contact method directly from the Case form without opening the Contact record in a new window. When the representative clicks Save on the Case form, all changes must be committed in a single operation. How should the consultant configure the form?
A field service organization deploys model-driven apps to technicians using rugged tablet and smartphone devices. When technicians complete an on-site equipment inspection, they must capture the customer's handwritten signature on the touchscreen and assign an overall customer satisfaction score from 1 to 5 stars. Which out-of-the-box PCF controls should the consultant bind to the respective columns?
A company requires an Order Processing form where operators can add and modify Order Line Items rapidly. The business requirements mandate inline cell editing, dynamic calculation of the Total Amount sum in the grid footer, and the ability to expand any Order Line row to view a nested subgrid of allocated Serial Numbers. Which control should the consultant configure on the Order Lines subgrid?
A consultant configures a Form Component Control on the Account lookup of a Work Order form (Form A) to edit Account details (Form B). On Form B, another Form Component Control is configured on the Primary Contact lookup to edit Contact details (Form C). When a user opens Form A in the model-driven app, what will be rendered in the Contact section?