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:
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:
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:
Next, head over to make.powerapps.com. Import the solution file you downloaded in the prior step.
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:
Click on the Controls tab in the window that opens, then click Add Control…
Select Google Address Autocomplete, then click Add at the bottom:
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:
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.
