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:

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.

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.

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%.

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

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

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

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