Create a Kanban Board in Power Apps with the Drag & Drop Component

Managing work items visually is a common need in many business apps. With the Power Drag & Drop code component built by Scott Durow, you can add a kanban-like interface to canvas apps without writing complex event handlers. Users can reorder tasks inside a column and move tasks between columns simply by dragging and dropping.

In this tutorial we’ll build a three-column board for a marketing team. Tasks will flow from To Do → In Progress → Completed. You’ll learn how to import the component, configure drop zones, and style each card—all with no JavaScript or custom controls.

Prerequisites

• A Power Apps environment with the Power Apps Component Framework (PCF) enabled for canvas apps.
• The Power Drag & Drop managed solution imported into your environment.
• Familiarity with creating a blank canvas app and working with collections.

Step 1 – Install the Power Drag & Drop Component

The drag‑and‑drop control is not part of the standard canvas toolbox. You must install a managed solution from GitHub.

1. Go to the releases page of the power-drag-drop repository.
2. Download the latest PowerDragDrop_managed.zip file.
3. In make.powerapps.com, navigate to Solutions → Import solution.
4. Select the downloaded zip file and follow the import wizard.

After a short wait, the solution appears in your solution list.

Step 2 – Enable PCF for Canvas Apps

The component is built with the Power Apps component framework. If PCF is not already active, you must turn it on.

1. Go to the Power Platform admin center.
2. Select your environment and open Settings → Products → Features.
3. Find Power Apps component framework for canvas apps and toggle it On.

Now your environment can use the imported code component.

Step 3 – Add the Component to a Canvas App

Create a new blank canvas app. From the Insert menu:

1. Choose Get more components at the bottom of the pane.
2. Switch to the Code tab.
3. Select Power Drag & Drop and click Import.

The component appears under Code components in the Insert pane. You can now drag it onto a screen.

Step 4 – Build the Sample Data

We’ll use a local collection as the data source. Place a Button on the screen and set its OnSelect to:

ClearCollect(
  colMarketingTasks,
  {
      TaskID: 1,
      TaskName: "Draft social media post",
      Status: "To Do",
      OrderNumber: 1,
      Assignee: "Alice",
      Category: "Social",
      Color: "#4CAF50"
  },
  {
      TaskID: 2,
      TaskName: "Review campaign analytics",
      Status: "To Do",
      OrderNumber: 2,
      Assignee: "Bob",
      Category: "Analytics",
      Color: "#2196F3"
  },
  {
      TaskID: 3,
      TaskName: "Finalize email template",
      Status: "To Do",
      OrderNumber: 3,
      Assignee: "Alice",
      Category: "Email",
      Color: "#FF9800"
  },
  {
      TaskID: 4,
      TaskName: "Update landing page copy",
      Status: "In Progress",
      OrderNumber: 4,
      Assignee: "Bob",
      Category: "Web",
      Color: "#9C27B0"
  },
  {
      TaskID: 5,
      TaskName: "Coordinate photo shoot",
      Status: "Completed",
      OrderNumber: 5,
      Assignee: "Charlie",
      Category: "Production",
      Color: "#F44336"
  }
)

The collection includes a TaskID (unique identifier), TaskName (display text), Status (used for zone assignment), OrderNumber (for sorting), Assignee, Category, and a Color for a left border accent.

Step 5 – Add Three Drag & Drop Components

Insert three copies of the DnD component and name them:

• ddToDo
• ddInProgress
• ddCompleted

Each will display only tasks whose Status matches its zone.

Assign the Data Source

For each component, set Items to colMarketingTasks.

Then click Edit fields and add every field from the collection (TaskID, TaskName, Status, etc.). Without this, the component cannot access the field values, even if you don’t visually show all of them.

Step 6 – Configure Drop Zone IDs and Links

Every DnD component needs a unique Drop zone ID. Set them as follows:

This tells each component which other zones it can exchange items with.

Step 7 – Set IdColumn, ZoneColumn, and MasterZone

For all three components, set:

• IdColumn = "TaskID"
• ZoneColumn = "Status"

These are case‑sensitive and must match the collection column names exactly.

Only one component in a group should have MasterZone = true; the rest must be false. This master component orchestrates the drag‑and‑drop events across all linked zones. Set MasterZone to true on ddToDo and false on ddInProgress and ddCompleted.

Once you set these, tasks appear inside the components. Try the app in Preview – you can now reorder tasks within a column and move them between columns.

Step 8 – Style the Cards with ItemTemplate

The ItemTemplate property accepts an HTML string. You can use {FieldName} placeholders to show dynamic values. For a cleaner look, wrap the card in a <div> with inline styling.

Set ItemTemplate on each component to:

<div style="background:#fff; border-left:4px solid {Color}; padding:8px 10px; margin:4px 0; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.12); font-family:Segoe UI;">
  <strong>{TaskName}</strong><br/>
  <span style="font-size:11px; color:#666;">{Assignee} · {Category}</span>
</div>

Remember to escape double‑quotes inside the HTML if you’re writing the string directly in Power Fx (e.g., using single quotes or the character ""). You can also store the template in a variable to keep the app cleaner.

Step 9 – Adding a Reset Button

The DnD component doesn’t expose a standard Reset property. Instead, use its InputEvent property.

Create a button with this OnSelect:

UpdateContext({locResetEvent: "Reset" & Now()})

Then for each DnD component, set InputEvent to locResetEvent. When the button is clicked, the board returns to its original layout.

Performance and Delegation Notes

• The drag‑and‑drop component works with any data source that supports filtering by the ZoneColumn value. For large SharePoint or Dataverse lists, be mindful of delegation limits. The component itself only moves items between zones; actually saving the new status back to a data source requires additional logic (e.g., a Patch call in the OnDrop or other event).
• Because we used a collection, there are no delegation concerns for this tutorial. For production, consider using a filtered collection or a variable to keep the UI responsive.
• If you have many tasks, limit the number of visible items per column by filtering the Items property (e.g., Filter(colMarketingTasks, Status = "To Do")) instead of passing the whole collection and relying on the zone column. This improves performance.

Common Mistakes and Troubleshooting

Final Recommendation

The Power Drag & Drop component is a powerful addition to any canvas app that needs task boards, list reordering, or flexible grouping. It’s lightweight, fully configurable, and works with any data source that Power Apps supports. For a production app, extend the example by saving the status change (using the OnDrop event that the component fires) and adding confirmation dialogs before moving sensitive tasks.

Start simple, then add columns, richer cards, and even multi‑level grouping—the component can handle it all.

References

• Original tutorial by Matthew Devaney: Power Apps Drag & Drop Kanban Tutorial
• Power Drag & Drop GitHub repository: scottdurow/power-drag-drop
• Microsoft Learn: Use code components in canvas apps