/pcf-react

:thumbsup: A PowerApps Component Framework React starter kit

Primary LanguageJavaScriptMIT LicenseMIT

pcf-react

A PowerApps Component Framework React starter kit

PCF Installation

Get tooling for Power Apps component framework

Project creation steps

  1. md ProjectName & cd ProjectName
  2. pac pcf init --namespace <> --name <> --template <>
  3. npm i & npm run build
  4. edit tsconfig.json
    • add "noImplicitAny": false to compilerOptions
  5. install npms
    • npm i @types/node @types/jest @types/powerapps-component-framework @uifabric/icons office-ui-fabric-react react react-dom
    • npm i -D @babel/core @babel/preset-env @babel/preset-react @storybook/addon-actions @storybook/addon-jest @storybook/addon-storyshots @storybook/react @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint babel-jest babel-loader babel-plugin-add-module-exports babel-plugin-require-context-hook eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks jest jsdoc prettier react-test-renderer
  6. copy .eslintrc.json, .gitignore, babel.config.js, jest.config.js and jsdoc.json
  7. copy the .jest & .storybook configuration folders
  8. copy test/storyShots.test.js to your test folder
  9. copy stories/jest.stories.js to your stories folder
  10. Copy the scripts section of package.json

Project deploy file creation steps

  1. md deploy & cd deploy (in ProjectName folder)
  2. pac solution init --publisher-name <> --publisher-prefix <>
  3. pac solution add-reference --path ..\
  4. edit deploy\Other\Solution.xml
    • UniqueName
    • LocalizedName description="" languagecode="1033"
  5. msbuild /t:build /restore /p:configuration=Release

Architectural notes

This project views the index.ts as a "wrapper". It only hosts the actual SamplePCF and passes the parameters as props. For more complicated controls, I would recommend using the redux toolkit and expose the appropriate actions. If you are using actions then there is no need to do the ReactDOM.render in updateView. You may however need to consider when setDisabled or setVisible is called on the control. You can get these values from the context object.

  • context.mode.isControlDisabled
  • context.mode.isVisible

Stores

  • XState - JavaScript and TypeScript finite state machines and statecharts for the modern web.
  • Redux Toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
  • MobX - Simple, scalable state management

Web Workers

It is actually very simple to add web workers into pcf. You can use the example in Google Webworker Plugin to test this feature.

  1. npm i -D worker-plugin
  2. edit webpackConfig.js in node_modules\pcf-scripts
    • add at line 2 const WorkerPlugin = require('worker-plugin');
    • add at line 76 plugins: [new WorkerPlugin()]

Core Packages

Design, Documentation, Type Checking & Lint

Testing

References