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 (as it says)
- 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 to D365
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.
Tips for New Players
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.