PowerApps PCF TreeView Control

This repository contains a React-based TreeView PCF (PowerApps Component Framework) control for use in PowerApps and Dynamics 365. It is designed for flexibility, supporting hierarchical data from both PowerApps collections and Dataverse datasets.

Project Structure

• TreeViewControl.tsx
  The main React component that renders the tree view. It supports configurable button size, tree size, and font size. The component uses Fluent UI's Tree components and supports expand/collapse all functionality, indentation, and tooltips for each node.

• sampleTreeData.csv
  A sample CSV file containing hierarchical data for testing and demonstration. You can import this file into PowerApps or use it as a template for your own data. The file includes columns: key, label, parentKey, and tooltip.

• dataTransform.ts
  Contains utility functions to transform data from PowerApps collections or Dataverse datasets into the ITreeItem[] format required by the TreeView control. It includes logic to build a tree structure from flat data using the parentKey property.

• index.ts
  The PCF control entry point. It connects the PowerApps context to the React component, transforms incoming data, and passes all relevant properties (such as button size, tree size, and font size) to the TreeView control.

• ControlManifest.Input.xml
  The manifest file that declares the control's properties and dataset schema. Key properties include:

  • items (dataset): The hierarchical data source (with columns: itemKey, itemLabel, itemParentKey, itemTooltip).
  • buttonSize (input): OptionSet for button size (small, medium, large).
  • treeSize (input): OptionSet for tree size (small, medium, large).
  • fontSize (input): SingleLine.Text for configuring the font size of tree nodes (e.g., 16px).

Usage Instructions

1. Configure Data Source

   • Use a PowerApps collection or Dataverse table with columns: itemKey, itemLabel, itemParentKey, itemTooltip.
   • Or, import and use sampleTreeData.csv for testing.

2. Set Properties in PowerApps

   • Set buttonSize, treeSize, and fontSize as needed.
   • Example for font size: 16, 18, etc.

3. TreeView Features

   • Expand/collapse all nodes with buttons.
   • Indentation for child nodes.
   • Tooltips for each node.
   • Font size is configurable via the fontSize property.

4. Development

   • Run npm install to install dependencies.
   • Use npm start to build and test locally.
   • Use the Power Platform CLI and follow PCF deployment steps to package and deploy the control.

Example PowerApps Collection

ClearCollect(
    colTreeData,
    { key: "1", label: "Parent 1", parentKey: Blank(), tooltip: "This is Parent 1" },
    { key: "1-1", label: "Child 1-1", parentKey: "1", tooltip: "This is Child 1-1" },
    { key: "1-1-1", label: "Grandchild 1-1-1", parentKey: "1-1", tooltip: "This is Grandchild 1-1-1" },
    { key: "1-2", label: "Child 1-2", parentKey: "1", tooltip: "This is Child 1-2" },
    { key: "2", label: "Parent 2", parentKey: Blank(), tooltip: "This is Parent 2" },
    { key: "2-1", label: "Child 2-1", parentKey: "2", tooltip: "This is Child 2-1" },
    { key: "1-1-1-1", label: "Great Grandchild 1-1-1-1", parentKey: "1-1-1", tooltip: "This is Great Grandchild 1-1-1-1" },
    { key: "1-1-1-1-1", label: "Level 5 Node", parentKey: "1-1-1-1", tooltip: "This is Level 5 Node" },
    { key: "1-1-1-1-1-1", label: "Level 6 Node", parentKey: "1-1-1-1-1", tooltip: "This is Level 6 Node" },
    { key: "2-2", label: "Child 2-2", parentKey: "2", tooltip: "This is Child 2-2" },
    { key: "2-2-1", label: "Grandchild 2-2-1", parentKey: "2-2", tooltip: "This is Grandchild 2-2-1" },
    { key: "2-2-1-1", label: "Great Grandchild 2-2-1-1", parentKey: "2-2-1", tooltip: "This is Great Grandchild 2-2-1-1" },
    { key: "3", label: "Parent 3", parentKey: Blank(), tooltip: "This is Parent 3" },
    { key: "3-1", label: "Child 3-1", parentKey: "3", tooltip: "This is Child 3-1" },
    { key: "3-1-1", label: "Grandchild 3-1-1", parentKey: "3-1", tooltip: "This is Grandchild 3-1-1" }
)

Credits

• Built with Fluent UI React Components
• PCF framework by Microsoft

---

For more details, see the code comments in each file or reach out to the repository maintainer.