Power Apps

Using PCF Gallery Code Components in Your Environment

Posted by Heidi Neuhauser

What is PCF Gallery?

PCF Gallery is an excellent example of the power of the community. If you’re looking for code components to visualize data in your Power Apps environment, this should be one of your first stops. Microsoft offers some excellent first-party code components (like the calendar control, toggle control, star rating and number input). Beyond these, you can check out http://pcf.gallery to find others that you can implement!

Code Components

The gallery shows you a visualization of each control with name/description. You can drill down by category, search or view by author:

PCF Gallery
Sample controls available in the PCF Gallery

Working with a Control

Next, we’ll talk about what to do once you’ve found a control you love and want to implement in your Sandbox system. I’m going to walk you through how to use the Address Autocomplete Code Component, built by MVP Andrew Butenko.

From the PCF Gallery page, I simply need to click the purple Download button at the bottom:

code component example: address autocomplete

This will take you to GitHub.

The following steps may vary based on your code component author and how she/he packaged the solution. You’re looking for the managed solution download!

In Andrew’s solution, you’ll see a README.md file saying this repository is archived and won’t get updates/fixes, then directs you to a project with multiple solutions included. You can either navigate to that and download the managed solution file, OR download the release file from GoogleAddressAutocomplete here:

gifhub for code component

Next, head over to make.powerapps.com. Import the solution file you downloaded in the prior step.

Import the solution file
Import the .zip file you downloaded.

Apply the Control on a Column (Field)

The last step is to apply the control to the column(s) on the table(s) where you want it to appear. In a Solution file, I will add the table (Account in this example) and the form.

You’ll have to toggle to the Classic Solution Designer to apply this control to your model-driven apps.

Open the Form in Classic Solution Designer.
Add Address 1: Street 1 to your form (if you still have the Address 1 composite field).

Click Change Properties after you click this field on the classic form designer:

Change Properties on the field (Classic Form Designer).
Change Properties on the field (Classic Form Designer).

Click on the Controls tab in the window that opens, then click Add Control…

Add Control
Add Control.

Select Google Address Autocomplete, then click Add at the bottom:

Google Address Autocomplete control
Select the control, then click Add.

Finally, you will need to set scope for this control (Web, Phone, Tablet) and map field values. Fort his control, you’ll also need to supply your Google Api Key:

Set scope and map required fields.
Set scope and map required fields.

Publish the form changes, and then the solution in Sandbox. Test and enjoy this fantastic control supplied by our amazing community! And when you’re ready and your users fall in love with it, promote your changes to Production.

Address Autocomplete
Example of the Address AutoComplete control, from PCF Gallery documentation.

Related Post

Leave A Comment