Just a repo of controls that might be useful to the community. I'm building out a catalogue of these as I try to get a handle on what the best practices are for building out controls.
Catalogue so far includes:
- Swipe (Swipe detectin on Canvas App)
- Icon Builder (uses Font Awesome Version 4 - supports notification bubbles also)
- Number Button Selector (a simple incrementor that has plus/minus buttons)
- Countdown Timer (a simple countdown timer showing days/hours/minutes/seconds until date)
- Keybinding Example (allows you to create a keyboard shortcut, and assign an action to it)
- Progress Bar (takes a percentage value and represents this as a progress bar)
- Notification - Pulsing (this takes a string, and then pulses the message against a blue background)
- Button Icon Example (an example of how to use an icon within a button using font-awesome and importing external resources)
- Youtube Player (updated to also support Vimeo Videos)
- Main Form Dialog Example (opens an account form without losing context of previously opened record)
Set up your environment as per the following DOCS article: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/create-custom-controls-using-pcf
Download the files contained within the control.. e.g. NumberButtonSelector/ControlManifest.Input.xml, NumberButtonSelector/index.ts, NumberButtonSelector/css/NumberButtonSelector.css
Then open that directory, and execute "npm run build". This transcompilates the TS to normal JS.
Then execute "npm start". This attacheds to the control to a test harness, so you can test the control works.
Set up your publisher information: "pac solution init --publisherName --customizationPrefix "
Reference your solution. "pac solution add-reference --path "
Run the following. "msbuild /t:restore" followed by then "msbuild" (this step needs to be done within Developer Command Prompt for VS) Note: for further information on what this command actually does: https://docs.microsoft.com/en-us/nuget/reference/msbuild-targets#restore-target
It will output a solution file to your publishing directory/out/debug folder
Upload, and use as you would any other control. i.e. goto a form, add an element, click on properties, then control, then add custom control.
-
After deployment, ensure you increment the version number of the solution otherwise the changes won't be reflected within Dynamics. e.g. version="0.0.1" becomes version="0.0.2" in your manifest file.
-
Do not include an img/preview.png at this stage, it will fail deployment. Bug noted.
-
To get the enable/disabled status of a control, this information is available from context.Mode.isControlDisabled.
-
React components aren't supported for framework components yet. This is due to the way React components would get added to the host React app, basically as a disconnected DOM tree which could lead to a lot of unforseen issues. We are actively working on a good solution for React support, and hope to have good news in this area soon. (Greg Hurlman)
-
In the Keybinding example, it will show a js error message "Refused to get Unsafe Headers". This is a known bug with the D365 platform, and being tracked currently (Internal Bug ID: 1339680).
-
Do not build controls that access XRM API (e.g. Xrm.Page.getAttribute("name")), keep the control generic by creating an input variable and passing the value in.