pcf-start

| Harness for PCF (PowerApps Component Framework) controls | |--- |--- |--- |--- |--- |

Overview

This package contains the scripts required to test and debug a custom PowerApps Component Framework (PCF) control for Microsoft PowerApps on your local development PC. The scripts are designed to be used in conjunction with the Microsoft PowerApps CLI tool, which is separately available via an MSI installer.

Please visit the publicly available documentation for the Microsoft PowerApps CLI tool to learn more. You can also install the PowerApps CLI via its MSI installer.

Without Microsoft PowerApps CLI tool this package should only be used for reference purposes.

Build, Debug and Test

Typical inner developer loop can be done in Visual Studio Code.

• do a clean build:

cd src\pcf\pcf-start
npm run rebuild

• do a normal inner loop build:

npm run build

• run all jest tests

// you do not have to build pcf-start before running updated tests
npm test

// or simply
jest

• run a single jest test suite

jest [test_file_name]

• run a single jest unit test

jest [test_file_name] -t "[unit test name]"

• pack the new bits to drop folder at drop\pcf\pcf-start

// a build is required before running pack
npm run pack

• debug jest tests

  • Set up launch.json
  • Inside jest.config.js file, change collectCoverage attribute to false

Local E2E testing with a real PCF project

• use CLI to create a PCF project

pac pcf init -ns testnamespace -n testcontrol -t field

• point pcf-start dependency to local build outputs

  • open package.json at the root of the PCF project
  • Inside devDependencies field, change the version of pcf-start to "file:[repos]/PowerPlatform-ISVEx-ToolsCore/drop/pcf/pcf-start"

• Install dependencies including local pcf-start

cd [controls/root/directory]
npm install

• Executing/testing local pcf-start on the PCF project

cd [controls/root/directory]
npm start

// or with watch mode
npm start watch

Add a new string for localization

• edit the file src\diagnosticMessages.json
• build the project by doing npm run build
• start using added localized string in code:

import { strings } from './diagnosticMessages.generated';

Release Notes:

1.3.6:

• Support for 'common-property' in ControlManifest and test harness
• Harness now uses default height & width settings, if defined in the manifest

1.3.1:

• Fix crash in debug harness for Boolean/TwoOptions field data

1.2.6:

• Localization updates
• Updated the version of PCF shipped with the debug harness to avoid null reference exceptions that only arise when loading a virtual control in a non-XRM scenario

1.1.6:

• Previous context and data inputs in the test harness now can be preserved across sessions

1.0.6:

• Various accessibility improvements in the control harness
• Control harness supports loading default property values defined by the default-value attribute

0.4.3:

• Added optional watch capabilities to the control harness (use 'npm start watch')
• Added anonymous telemetry to pcf; to opt out use PowerApps CLI, see: PowerApps CLI telemetry
• More accessibility support and fixes

0.3.4:

• Accessibility fixes
• Debug harness supports data-set inputs
• Debug harness can consume CSV for data-set inputs
• Debug harness allows selecting different form factors (Unknown, Web, Tablet, and Phone)
• Debug harness UI is aligned with PowerApps GUI theme

0.2.71:

• Test harness is updated to use the latest version of the PowerApps Component Framework
• PCF UI is localized for: English, French, German, Japanese, Spanish

0.2.59:

• Support dataset controls in the local control harness with default mock data. This enables visualization and debugging of a dataset control outside of CDS environment
• Added initialization of control context attributes with default values in the local control harness

0.1:

• Initial set of capabilities for custom control development using the PowerApps Component Framework (PCF).