This Github repository contains a collection of React-based components that provide extensive functionalities with consistent UI/UX to Power Apps using the Fluent UI Design Language. The components are designed to be easy to use and highly customizable, allowing you to quickly build powerful and visually appealing Power Apps.
The components included in this repository are fully documented with examples and usage guidelines. You can find the documentation in the wiki page of the repository.
- PolyLookup: Multi-select lookup supporting different types of many-to-many relationships.
- Lookdown: Lookup field as a dropdown with advanced features.
- TimePicker: TimePicker only displays the time part of a datetime field and supports quick values from a dropdown.
To use these components in your Power Apps project, you'll need to download the solution_managed.zip
file from the Releases page and import to your environment. The solution contains all components in this repo.
Once you've installed the solution, you can select the components in the form designer.
Thanks for showing your interest in the repo. All contributions are most welcome!
- Share: Give it a star ⭐ and Share the repo with everyone who might be interested!
- Give feedback: Please share your experience and ideas.
- Improve documentation: Fix incomplete or missing docs, bad wording, examples or explanations.
- Contribute to the codebase: Propose new features or identify problems via GitHub Issues, or find an existing issue that you are interested in and work on it!
- Sponsor my work: If you find it helpful, please consider sponsoring the project to keep it going 💪
If you'd like to contribute to the code, please follow these steps:
- Fork this repository
- Create a new branch from a component branch you want to work on
- Make your changes and commit them with descriptive commit messages
- Submit a pull request
I'll review your changes and work with you to merge them into the main repository.
- main: This branch contains the latest features of the components. Please see tags for version specific code
-
open the repo in VS Code
-
in Terminal, navigate to a component folder
cd PolyLookupComponent
for example -
run
npm install
to install all required packages -
run
npm run build
to build the component -
to test the component, because the component needs to load metadata from Dataverse, we can't use the test harness by running
npm run start
.Instead, we need to deploy the component to an environment by running
pac pcf push --publisher-prefix dce
you'll need PowerApps CLI to run
pac
commands, please install it here
when you're ready, you can build a solution package that contains all components in the repo to deploy to a production environment.
-
in Terminal, navigate to folder
cd DCEPCF/solution
-
for dotnet build, run
dotnet build --configuration Release
for msbuild, run
msbuild /t:build /restore /p:configuration=Release
-
you can find a managed solution and an unmanaged solution created in the output folder under
solution/bin/Release