A Framework to Meet Your Needs

PowerApps comes with a wide variety of controls out of the box. However, these controls may not be on-brand or have the desired look and feel, functionality, or style for your app. The PowerApps Component Framework command-line interface tools let you create a custom PowerApps control specific to your individual needs. PCF works this magic by integrating JavaScript libraries into the PowerApps control.

As a primarily JavaScript frontend developer, my normal workflow is project dependent but can be boiled down to utilizing the project framework or library, create a base component, extend the base functionality, and style using CSS. This component can be used as a named module, or if appropriate, the HTML and JavaScript can be rolled into another module. Thankfully, most of this is applicable to PCF. The tutorial I followed centers around the jQuery UI horizontal slider and vanilla CSS, though, the PCF build pipeline allows for CSS preprocessors.

Working with the PCF CLI tools for someone not familiar with the Microsoft Azure ecosystem was quite a hurdle. As a side note, PCF CLI at the time of writing is not cross-platform and only available on Windows 10. During the course of development, I needed to create various entities, build Power Apps model-driven app, and provision environments. Being a complete novice in the environment made these steps confusing and frustrating.

With generous assistance from a seasoned PowerApps developer, I was able to follow the tutorial to create a horizontal slider straight out of jQuery UI that was ready to be customized via CSS. To demonstrate how the new control incorporated CSS, I added color to the slider handle.

Building a Customized PowerApp

During the build process, PCF CLI bundles the JavaScript and CSS into the control. This control is then added to a model-driven app. However, to my knowledge, there is no shared CSS across multiple controls. It is incumbent upon the developer to include the required CSS in each individual PCF control project. Additionally, having never worked in PowerApps prior to this experiment, I’m not familiar with the structure of what a nicely customized app would look like. Following the tutorial, I had successfully incorporated jQuery UI’s horizontal slider and custom CSS. However, it looked woefully out of place when added to a stock PowerApps app.

The exercise I used to publish a custom component in PCF was relatively simple. PCF CLI allows a developer to make something that doesn’t exist in the list of out-of-the-box controls. For example, a map control built with the OpenLayers library, loading a tileset from a selection in a PowerApps form, and then allowing the user to draw geometries on the map control and automatically calculating the land area of the shapes. I would advise using the out-of-the-box controls whenever possible, but when a custom component is necessary, I would suggest the following based on what I learned:

  • Use a CSS pre-processor. They are industry standard and can help simplify all but the least complex styles.
  • Make sure you have a good grasp of the Microsoft ecosystem. It may be a simpler task to add HTML, CSS, and JavaScript to your toolbelt than to get a grasp on PowerApps.
  • Start out simple. Add complexity once you are sure your component builds properly.
  • Make sure to use the CLI testing environment to preview your control. You don’t have to publish the control, add it to a model-driven app, etc. to see it work.