microsoft / powercat-code-components

The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power apps.

Power CAT code components

The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power apps.

These code components are available as part of Creator-Kit and can be downloaded from latest release.

There are two types of components:

• User interface components - controls that have a user interface and are styled using properties.
• Utility components - controls that have no user interface, but provide functionality such as keyboard shortcut handling.

The following table provides an index to the code components in this repository:

Code component	Type	Overview	Fluent UI	Canvas apps	Custom pages	Model-driven apps	Power Apps Portal
Auto width label	User interface	This code component acts similar to the standard canvas app label, but will expand dynamically in width to accommodate the text. This functionality is currently not supported in canvas apps today.	⬜	✅	✅	⬜	⬜
Breadcrumb	User interface	This code component provides a wrapper around the Fluent UI Breadcrumb control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Calendar	User interface	This code component provides a wrapper around the Fluent UI Calendar control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Command Bar	User Interface	This code component provides a wrapper around the Fluent UI Command Bar control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Context Menu	User Interface	This code component provides a wrapper around the Fluent UI Context Menu control bound to a button for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
DetailsList	User Interface	The DetailsList code component allows using of the Fluent UI DetailsList component from inside canvas apps and custom pages.	✅	✅	✅	⬜	⬜
Elevation	User Interface	Fluent UI elevation support with mouse hover events.	✅	✅	✅	⬜	⬜
Facepile	User interface	This code component provides a wrapper around the Fluent UI Facepile control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Icon	User Interface	Fluent UI Font Icon/ Icon Button & Action Button with custom styling.	✅	✅	✅	⬜	⬜
Keyboard shortcuts	Utility	Registers key press event handlers to allow keyboard short cuts to be used inside canvas apps.	⬜	✅	⬜	⬜	⬜
Masked TextField	User Interface	This code component provides a wrapper around the Fluent UI Customizable Masked TextField control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Nav	User Interface	This code component provides a wrapper around the Fluent UI Nav Menu control bound to a button for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
PeoplePicker	User Interface	Fluent UI PeoplePicker control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Persona	User Interface	Fluent UI Persona control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Picker	User Interface	Fluent UI Tag Picker support with custom item styling to allow for color/icons tags.	✅	✅	✅	⬜	⬜
ProgressIndicator	User Interface	The DetailsList code component allows using of the Fluent UI ProgressIndicator component from inside canvas apps and custom pages.	✅	✅	✅	⬜
Pivot	User Interface	This code component wraps the Fluent Pivot control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Resizable text area	User interface	A text area control that can be resized by the user using handle on the bottom right corner. Can be styled to look like either the classic, fluent or model-driven text field controls.	⬜	✅	✅	✅	⬜
SearchBox	User Interface	Fluent UI SearchBox control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Shimmer	User Interface	This code component wraps the Fluent Shimmer control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
Spinner	User Interface	This code component wraps the Fluent Spinner control for use in canvas & custom pages.	✅	✅	✅	⬜	⬜
SubwayNav	User Interface		✅	✅	✅	⬜	⬜
TagList	User Interface	This code component provides a Tag List that provides flexible width rendering bound to a collection.	✅	✅	✅	⬜	⬜

Building & Deploying

You may want to build and deploy the components using your own solution publisher. You can follow the steps below to build an deploy each code component to your environment so that it can then be added to your unmanaged solution for deployment, ideally as a managed solution.

First, you will need to decide on which solution publisher prefix you want to use. This is very important since once deployed, a code component cannot be changed to a different solution publisher prefix.

Pre-Requisites

To build and deploy the Resizable Text Area control you will first need to install the pre-requisites:

1. Visual Studio Code (VSCode)

   • Ensure the Add to PATH option is selected:

2. node.js

   • Installing the LTS (long term support) version is recommended:
   • You do not need to check the Automatically install the necessary tools option on the Tools for Native Modules step:

3. Microsoft Power Platform VS Code extension

   1. Open Visual Studio Code (VSCode).
   2. Select Extensions icon from the Activity panel (Ctrl+Shift+X).
   3. In the search bar, enter Power Platform Tools.
   4. Select Install. Once the installation is finished, restart your Visual Studio Code to see the extension within the Terminal window.

4. The .NET 5.x SDK - Select the most appropriate version for your development workstation. Important: If you have any existing VSCode terminal sessions open, you must close them before the dotnet sdk will be available.

Unit Testing the code components with code coverage

Each code component has a set of unit-tests that can be run from inside VS Code:

npm run test

This will run the unit tests and report any failing tests, and the code-coverage metrics. E.g.

The target coverage is the default 80%.

Building and Linting the code components

To build and lint the code component locally you can use:

npm run build

This will first fix any auto-fixable linting issues (reporting others as warnings), and then re-build the code component. If there are any build errors, they will be reported.

You can also, build in watch mode to test using the test-harness using:

npm start watch

You can run the linter using:

npm run lint:fix

Deploying to your environment as an unmanaged component

1. First authenticate against your environment using:

   pac auth create -u <YourOrgUrl>

   E.g.

   pac auth create -u https://org42901917.api.crm4.dynamics.com

2. Deploy the code components using the the correct publisher prefix. This must match the publisher prefix of the solution that you want to add the code component into before exporting into a different environment.

   pac pcf push -pp <YourPublishPrefix>

   E.g.

   pac pcf push -pp cat

   In the above example, your solution publisher would need the publisher prefix of cat:

3. Each time you deploy, you will need to increment the build (3rd component) of the control version in the ControlManifest.Input.xml file.

More information : Code component application lifecycle management

Deploying to your environment as a managed solution

You can build and package the code component as a managed solution directly if required using a Solution Project. More information - https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls

Testing checklist

This list contains the aspects that should be tested for each component:

1. Run-time behavior vs maker studio behavior
2. Custom Pages vs Canvas Apps behavior
3. Accessibility - tab order & aria labels
4. Dynamic sizing behavior using responsive containers
5. Upgrade experience when components are updated

powercat-code-components's Issues

Protecting the beta branch

I suggest that the beta branch is protected with the PR Validation Workflow so that any issues are trapped before they are merged into main. What do you think?
cc @Ramakrishnan24689

Tests are misleading

Hi,
most of the tests have incorrect data, since there is not enough documentation here for these components, I tried creating the inputs based on the tests. But it is not working as expected. Example of Pivot component. Where the Icons are not rendering.

Items as follows:

Table(
    {
        ItemKey: "item1",
        ItemDisplayName: "Item 1",
        ItemIconName: "Open",
        ItemIconColor: "blue",
        ItemEnabled: true,
        ItemIconOnly: false
    },
    {
        ItemKey: "item2",
        ItemDisplayName: "Item 2",
        ItemIconName: "New",
        ItemIconColor: "blue",
        ItemEnabled: false,
        ItemIconOnly: true
    },
    {
        ItemKey: "item3",
        ItemDisplayName: "Item 3",
        ItemIconName: "Save",
        ItemIconColor: "green",
        ItemEnabled: false,
        ItemIconOnly: true
    },
    {
        ItemKey: "item5",
        ItemDisplayName: "Item 5",
        ItemIconName: "New",
        ItemIconColor: "blue",
        ItemEnabled: false,
        ItemIconOnly: true,
        ItemParentKey: "commandNew"
    },
    {
        ItemKey: "item6",
        ItemDisplayName: "Item 6",
        ItemIconName: "Save",
        ItemIconColor: "green",
        ItemEnabled: false,
        ItemIconOnly: true,
        ItemParentKey: "commandSave"
    },
    {
        ItemKey: "item7",
        ItemDisplayName: "Item 7",
        ItemIconName: "New",
        ItemIconColor: "blue",
        ItemEnabled: false,
        ItemIconOnly: true,
        ItemParentKey: "item1"
    },
    {
        ItemKey: "item8",
        ItemDisplayName: "Item 8",
        ItemIconName: "New",
        ItemIconColor: "blue",
        ItemEnabled: false,
        ItemIconOnly: true,
        ItemParentKey: "item2"
    }
)

based on:

powercat-code-components/Pivot/Pivot/__tests__/datasetmapping.test.ts

Lines 9 to 72 in 9841c04

	const items = [
	new MockEntityRecord('1', {
	[ItemColumns.Key]: 'item1',
	[ItemColumns.DisplayName]: 'Item 1',
	[ItemColumns.IconName]: 'Open',
	[ItemColumns.IconColor]: 'blue',
	[ItemColumns.Enabled]: true,
	[ItemColumns.IconOnly]: false,
	}),
	new MockEntityRecord('2', {
	[ItemColumns.Key]: 'item2',
	[ItemColumns.DisplayName]: 'Item 2',
	[ItemColumns.IconName]: 'New',
	[ItemColumns.IconColor]: 'blue',
	[ItemColumns.Enabled]: false,
	[ItemColumns.IconOnly]: true,
	}),
	new MockEntityRecord('3', {
	[ItemColumns.Key]: 'item3',
	[ItemColumns.DisplayName]: 'Item 3',
	[ItemColumns.IconName]: 'Save',
	[ItemColumns.IconColor]: 'green',
	[ItemColumns.Enabled]: false,
	[ItemColumns.IconOnly]: true,
	}),
	// Sub Items First Level
	new MockEntityRecord('5', {
	[ItemColumns.Key]: 'item5',
	[ItemColumns.DisplayName]: 'Item 5',
	[ItemColumns.IconName]: 'New',
	[ItemColumns.IconColor]: 'blue',
	[ItemColumns.Enabled]: false,
	[ItemColumns.IconOnly]: true,
	[ItemColumns.ParentKey]: 'commandNew',
	}),
	new MockEntityRecord('6', {
	[ItemColumns.Key]: 'item6',
	[ItemColumns.DisplayName]: 'Item 6',
	[ItemColumns.IconName]: 'Save',
	[ItemColumns.IconColor]: 'green',
	[ItemColumns.Enabled]: false,
	[ItemColumns.IconOnly]: true,
	[ItemColumns.ParentKey]: 'commandSave',
	}),
	// Sub Items Second Level
	new MockEntityRecord('7', {
	[ItemColumns.Key]: 'item7',
	[ItemColumns.DisplayName]: 'Item 7',
	[ItemColumns.IconName]: 'New',
	[ItemColumns.IconColor]: 'blue',
	[ItemColumns.Enabled]: false,
	[ItemColumns.IconOnly]: true,
	[ItemColumns.ParentKey]: 'item1',
	}),
	new MockEntityRecord('8', {
	[ItemColumns.Key]: 'item8',
	[ItemColumns.DisplayName]: 'Item 8',
	[ItemColumns.IconName]: 'New',
	[ItemColumns.IconColor]: 'blue',
	[ItemColumns.Enabled]: false,
	[ItemColumns.IconOnly]: true,
	[ItemColumns.ParentKey]: 'item2',
	}),
	];

`Icon Component` : Missing OnSelect Property

Icon Component does not have OnSelect

I can see the implementation here: onSelect at index.ts and also here: onClick prop on RenderButtonAs. But for some reason the prop is not present.

Used Version 1.0.19
Used on Canvas App

DetailList support for complex data type

I am using trying to use the DetailList to list out the data from a sharepoint data source. And I found that there is no way to just access the properties in the collection, liked Requestor.DisplayName, compared to the Data Table control.

[DetailsList] List filtered by comboboxes in custom page not working in run-time

I am building a custom page where I am using the DetailsList. I am filtering the items of the DetailsList based on the selection of several comboboxes.

When I am building the app in in the maker studio the DetailsList is filtered as expected, and showing the items/records.

However, when I run custom page in the model-driven app, the item/records are not loading:

Are there any known limitations regarding this or is this a bug?

(SearchBox) Add DelayOutput property

The standard textbox control has the ability to only update the output text property after a debounce delay controlled by the DelayOutput property.
This is important when performing searches as the user types to prevent events from being fired too frequently.

DetailsList does not honor CurrentSortColumn or CurrentSortDirection inputs on Dataverse table

Component Version: 1.0.22

I have a DetailsList Component configured as follows:

• Dataverse table as the source, no filters or sorting set in the Items property
• CurrentSortColumn property set to the logical name of the column I want to sort by (Autonumber column)
• CurrentSortDirection set to 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending ("1")

This configuration does not sort the list by the set column, it defaults to sorted Ascending by the Primary column on the table.

I've tried specifying a view on the Table that sorts by the desired column, but this doesn't seem to make a difference.

Is this a bug, or have I misunderstood how these properties are supposed to work?

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Components not appearing in Canvas App

Only 4 components are available to import in canvas app.
For example, Details List is not there.

Sharepoint list People field not display properly

My fluent detail list is connected to sharepoint list. I am not finding a way to show display name of assigned user
It shows a messed up data instead

Contribute / Extend the code components

Hi there,

first of all I want to thank the whole team for alle the effort you put into the code components, bridging the gap between fluent ui and the power platform. The outcome is amazing, even if we are just getting started ;)

Our company wants to contribute / extend the existing code components for a project, but getting started developing/contributing is not that easy as using the components, because of the lack of good documentation.

For starters I cloned the repo and tried to get one component (DetailList) up and running. While trying this I'm facing a lot issues like how is the repo intend to be used in form of local development. Starting the test harness results in an empty detail list, trying to use an csv as dataset input is not working and also I were not able to find some mockup data included for development.

After getting in touch with @scottdurow on LinkedIn he kindly asked me to open a request/issue on GitHub.
We would appreciate any help getting started with developing/contributing using this repo. The easiest way would be probably by a teams meeting or chat. It would be nice if someone could contact me there: [email protected]

Thank you guys, and keep up the great work!

Any plans to migrate to the latest fluent-component library?

Hi guys, do you have any plans to migrate to the latest version of fluent library https://react.fluentui.dev/? There are breaking changes in those library.

Incrementing minor version with each release

Currently, the build number is incremented with each release in line with the recommended PCF deployment practices.
The solution is version stamped with the same version as the PCFs.

To make it easier for forks to build/test new versions, what do you think about moving the release increment to the minor version instead? This will make it easier for branches/forks to deploy/test new versions without preventing future import version collisions due to the local version being higher than the new release version.

E.g.

1. Released version -> 1.8.0
2. Forked/branch version deployed to test environment ->1.8.1 -> 1.8.2 etc.
3. New version released ->1.9.0
4. Forked/branch version deployed to test environment ->1.9.1 -> 1.9.2 etc.
5. And so on....

This would need a change to the release workflow, moving the incrementing version to the minor variable, rather than the build version.

Thoughts?