# PCF Fluent UI DetailsList Control

## Introduction 

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.


## Prerequisites

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

- Node.js and npm installed. You can download them from [nodejs.org](https://nodejs.org/).
- PowerApps CLI installed. You can download it from [Microsoft Power Platform Tools](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/tools/download).

## Getting Started

1. **Clone the repository**:
    ```sh
    git clone https://github.com/itweedie/PCF-Dataset-React-calculate-Elapsed-Time.git
    cd PCF-Dataset-React-calculate-Elapsed-Time
    ```

2. **Install dependencies**:
    ```sh
    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:

```sh
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**:
    ```sh
    npm start watch
    ```

2. **Open the test harness**:
    - Navigate to [http://localhost:8181](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](LICENSE) file for details.