Field vs Dataset PCF Controls in Dynamics 365: A Step-by-Step Developer Guide

💡 Introduction: Why PCF Matters for Developers

The Power Apps Component Framework (PCF) allows developers to extend Dynamics 365 model-driven apps and Power Apps with interactive, modern UI components.

Instead of being restricted to basic text inputs and static grids, PCF empowers developers to create custom React-driven controls that behave and render natively within Dynamics.

There are two main types of PCF controls:

• Field PCF Control → Enhances or replaces a single field.

• Dataset PCF Control → Works with a collection of records, like subgrids or lists.

Choosing the right control type is key to delivering efficient, intuitive user experiences inside Dynamics 365.

🎯 Field PCF Control

🧩 What is a Field PCF Control?

A Field PCF Control is bound to a single field (for example: statuscode, creditlimit, or startdate).

Instead of a plain text box, you can render it as a slider, toggle, progress bar, rating component, or any React-based visualization — giving users a more intuitive interface.

⚙️ Key Features

• Bound directly to a single Dataverse field

• Reads and writes single values

• Works seamlessly inside forms and model-driven apps

• Supports custom formatting and validation

👍 Pros

✅ Enhances user experience with modern, visual inputs

✅ Lightweight and easy to build

✅ Improves data quality with validation logic

👎 Cons

❌ Limited to one field per control

❌ Not suited for complex, multi-record scenarios

💡 Example Use Cases

• Slider for “Probability (%)” in Opportunities

• Toggle Switch for “Active / Inactive” status

• Progress Bar for “Project Completion (%)”

🛠️ Setup: CLI Example

pac pcf init --namespace CloudVerve.Controls --name ProgressBarControl --template field
cd ProgressBarControl
npm install

🗂️ ControlManifest.Input.xml (Field Control Example)

<control namespace="CloudVerve.Controls" constructor="ProgressBarControl" version="1.0.0">
  <display-name>Progress Bar Control</display-name>
  <description>Shows numeric field as a progress bar</description>
  <control-type>standard</control-type>
  <property name="value" display-name="Value" of-type="Whole.None" usage="bound" required="true" />
</control>

💻 React Example Code (Simplified)

import * as React from "react";

interface IProps {
  value: number;
}

export const ProgressBar: React.FC<IProps> = ({ value }) => {
  return (
    <div style={{ width: "100%", background: "#eee", borderRadius: "8px" }}>
      <div
        style={{
          width: `${value}%`,
          background: "#0078d4",
          height: "20px",
          borderRadius: "8px",
          transition: "width 0.3s ease"
        }}
      />
    </div>
  );
};

This simple control dynamically displays numeric field values as a progress bar inside Dynamics 365 forms.

📊 Dataset PCF Control

🧩 What is a Dataset PCF Control?

A Dataset PCF Control is used when working with lists or collections of records (like subgrids or views).

Rather than a plain table, it allows you to create interactive, visual layouts such as Kanban boards, calendars, or card-based views — powered by React or similar frameworks.

⚙️ Key Features

• Works with datasets (views, subgrids, lists)

• Supports paging, sorting, and filtering

• Renders records as cards, tiles, or charts

• Allows inline editing and interaction

👍 Pros

✅ Great for dashboards and subgrid customization

✅ Enables dynamic and visual UI layouts

✅ Can handle large data efficiently

👎 Cons

❌ More complex setup than field controls

❌ Requires additional logic for paging and sorting

💡 Example Use Cases

• Kanban Board for Opportunities (grouped by stage)

• Calendar View for Service Appointments

• Product Catalog with card-based tiles

🛠️ Setup: CLI Example

pac pcf init --namespace CloudVerve.Controls --name KanbanDatasetControl --template dataset
cd KanbanDatasetControl
npm install

🗂️ ControlManifest.Input.xml (Dataset Control Example)

<control namespace="CloudVerve.Controls" constructor="KanbanDatasetControl" version="1.0.0">
  <display-name>Kanban Dataset Control</display-name>
  <description>Shows dataset records in a Kanban view</description>
  <control-type>dataset</control-type>
  <data-set name="records" display-name="Records" required="true">
    <view-attribute name="name" />
    <view-attribute name="statuscode" />
    <view-attribute name="ownerid" />
  </data-set>
</control>

💻 React Example Code (Simplified)

import * as React from "react";

interface RecordItem {
  id: string;
  name: string;
  status: string;
}

interface IProps {
  items: RecordItem[];
}

export const KanbanBoard: React.FC<IProps> = ({ items }) => {
  const stages = ["New", "In Progress", "Closed"];

  return (
    <div style={{ display: "flex", gap: "20px" }}>
      {stages.map(stage => (
        <div key={stage} style={{ flex: 1 }}>
          <h3>{stage}</h3>
          {items.filter(i => i.status === stage).map(i => (
            <div
              key={i.id}
              style={{
                padding: "8px",
                border: "1px solid #ddd",
                margin: "4px 0",
                borderRadius: "6px"
              }}
            >
              {i.name}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

This control visually displays records grouped by stage — perfect for sales or service pipelines.

🚀 Deploying & Publishing PCF Controls

1️⃣ Build the Project

npm run build

2️⃣ Package the Solution

pac solution init --publisher-name CloudVerve --publisher-prefix cv
pac solution add-reference --path ./ProgressBarControl
pac solution add-reference --path ./KanbanDatasetControl

3️⃣ Import & Assign Controls

• Import the .zip solution file into Dynamics 365

• Add the Field PCF to a specific field

• Add the Dataset PCF to a subgrid or view

Once published, your users will experience modern, interactive visuals — directly inside Dynamics 365.

🧠 Conclusion: When to Use Which?

Both PCF types empower developers to create React-driven, intuitive, and high-performance user experiences inside Microsoft Dynamics 365.

💼 CloudVerve Technologies

At CloudVerve Technologies, we specialize in:

✅ Building custom PCF controls (Field & Dataset)

✅ Crafting React-based UI experiences for Dynamics 365

✅ Developing Kanban boards, dashboards, and Power Apps integrations

Whether you need to modernize your CRM interface or build new interactive controls, our Dynamics 365 experts can help.

📞 Free Consultation:

Let’s discuss your PCF requirements and build solutions that drive productivity and better user adoption.