Multi-Picklist Mapping Grid

A fully configurable Azure DevOps extension that combines a multi-column picklist grid with cross-column mapping, live aggregation, and granular work item field persistence.

Publisher: amanullah-ado

Features

🧩 Multi-Picklist Grid

• Add picklist, decimal, text, read-only, boolean, month (MMM-YY), or identity (people) columns.
• Inline editing directly in the work item form.
• Date / Month columns display as MMM-YY (e.g., Jun-26, Sep-26) with a native month picker while editing.
• Identity / People columns use the Azure DevOps identity picker to search and select people by name.
• Import picklist values from existing Azure DevOps fields via REST.

🔀 Cross-Column Mapping (many-to-many)

• Define rules such as:
  • When Picklist 1 = A → set Picklist 3 = Z and Picklist 4 = Y
  • When Picklist 1 = B → set Picklist 3 = X
• Reactive, cascading updates with cycle detection (max 3 passes).

Σ Aggregation

• Subtotals per picklist value (e.g., A = 15.50, B = 8.20).
• Grand total across all rows.
• Uses decimal.js for exact financial arithmetic (no float errors).
• Live recalculation on every edit.

💾 Granular Field Persistence

• One custom field per picklist value subtotal (Custom.A_Total, Custom.B_Total, …).
• A grand total field (Custom.Grand_Total).
• Optional raw grid JSON backup field (Custom.MPMG_GridData).
• Debounced auto-save + manual "Save to Field".

Architecture

Tech Stack

• Vite + TypeScript
• React 18
• Zustand (state)
• decimal.js (precise arithmetic)
• Azure DevOps Extension SDK

Getting Started

Prerequisites

• Node.js 20+
• tfx-cli (npm i -g tfx-cli)

Install

npm install

Develop

npm run dev            # Vite dev server
npm run typecheck      # Type checking
npm run lint           # Linting
npm run test           # Unit tests

Build & Package

npm run build                          # Production build
npm run package                        # Creates ./out/*.vsix

Publish

echo "<MARKETPLACE_PAT>" > .pat
npm run publish

The release workflow (.github/workflows/release.yml) publishes automatically on v* tags.

Configuration Guide

1. Define columns (Project Settings → Picklist Mapping Grid)

Add picklist columns with their allowed values. Optionally import values from existing ADO fields.

2. Add mapping rules

For each source value, add one or more targets.

3. Configure aggregation

• Choose the decimal column to sum.
• Choose the group-by picklist column for subtotals.
• Set the grand total field and per-value field prefix.

4. Add the control to a work item form

Add the Multi-Picklist Mapping Grid custom control and bind:

• Decimal Column ID
• Grand Total Field
• Value Field Prefix

Field Persistence Notes

• Subtotal/grand-total fields must exist as numeric (Double/Integer) fields on the work item form.
• The raw grid backup field (Custom.MPMG_GridData, plain text) is written only if it exists.

License

MIT — see LICENSE.