PCF Fluent UI DetailsList Control

This repository contains a PowerApps Component Framework (PCF) control that utilizes Fluent UI's DetailsList component to display a dataset in a tabular format. The control also calculates and displays the elapsed time between rows based on the createdon field.

Table of Contents

• Prerequisites
• Getting Started
• Project Structure
• Building the Control
• Testing the Control
• Usage
• Contributing
• License

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js and npm installed. You can download them from nodejs.org.
• PowerApps CLI installed. You can download it from Microsoft Power Platform Tools.

Getting Started

1. Clone the repository:

   git clone https://github.com/itweedie/PCF-Dataset-React-calculate-Elapsed-Time.git
   cd PCF-Dataset-React-calculate-Elapsed-Time

2. Install dependencies:

   npm install

Project Structure

• src/: Contains the source code for the PCF control.
  • index.ts: Entry point for the control.
  • pcfName.ts: Main class for the control.
  • DatasetExample.tsx: React component for rendering the dataset using Fluent UI's DetailsList.
• generated/: Contains the manifest and type files generated by the PowerApps CLI.
• build/: Output directory for the built control.
• test/: Contains test data and scripts for testing the control.

Building the Control

To build the control, run the following command:

npm run build

This command uses the PowerApps CLI to compile the TypeScript code and generate the necessary files in the build/ directory.

Testing the Control

1. Serve the control locally:

   npm start watch

2. Open the test harness:

   • Navigate to http://localhost:8181 in your web browser.
   • This will open the PCF test harness where you can test your control with sample data.

Usage

To use this control in your Power Platform applications, follow these steps:

1. Add the control to a form:

   • Open the form designer in your Power Platform environment.
   • Add a new field or column to the form.
   • In the field properties, click Components, then click Add Component.
   • Select the PCF control from the list and configure it as needed.

2. Configure the dataset:

   • Ensure the dataset includes the createdon field for elapsed time calculations.
   • Bind the dataset to the PCF control.

Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes. Ensure your code follows the project's coding standards and includes appropriate tests.

License

This project is licensed under the MIT License. See the LICENSE file for details.