My previous article focused on custom controls for grids & sub-grids. This time were going off-the-grid and exploring some Power Apps Component Framework (PCF) themed grids & sub-grids. Again I have focused the steps in the post in the classic designer as its much more consistent behaviour for custom controls and PCFs, some are available in the new design studio but for ease of demonstration I default to classic of this kind of thing (for now). This is just a few of my favourite picks from PCF Gallery [1] but there are HEAPS of options for grids on there so I really encourage you to check it out!

Smart Grid

This one brings a whole new meaning to the term ‘quick create’ and its something all those spreadsheet fanatics will love. ‘Smart grid’ [2] doesn’t really do it justice as a name I would go for something more like ‘Quick add grid’. Think of this like a gateway drug to model driven apps for those users who cannot let of of their beloved spreadsheets! I have used quite a basic example for adding contacts to accounts but I can see so many customer specific examples of how this could be useful for quickly adding records from one place.

The solution file is very well hidden so check the link below [3] for a direct link to there. It’s a bit tricky to set up as you need to know the logical name of the lookup field for the relationship and the entity set name of the current entity where the subgrid is added which isn’t so easy to find from face value. I highly recommend you download the ‘Level Up for Dynamics 365/Power Apps’ chrome add in [4] and use the ‘All Fields’ and ‘Open Record in Web API controls to help you find this info for your chosen grid/entity set up.

Attachments Grid

This one is a little tricky as it doesn’t have a pre built solution zip file [5] for you to grad and install but there are two ways around this one.

Option 1 - Check out the course ‘Zero to PCF’ [6] and learn how to deploy a PCF component that doesn’t have a pre-packaged solution, it does involved downloading some code libraries and Visual Studio code which can be very overwhelming but this course walks you through all that and if an ABC coder like me can manage it - you definitely can!

Option 2 - something I have been guilty of (with great success!) in the past - drop the creator of the PCF a nice message on their social media channels mentioned and ask if they could possibly package it for you, they might be able to help you or point you to someone who else who can.

Anyway back to the sexy stuff - a screenshot wouldn’t do this justice so time to get your GIF on - check it out!

Credits to Ben Bartle & Josh Hetherington

Make sure the entity has attachments enabled & supposedly you can bind the control to any field on the form but I found it didn’t show on a multi line of text field so I would recommend a single line of text field. It doesn't really matter what the field is, its just so the control can find the entity id and logical name to work it’s magic.

Google Maps Grid

Ahhh my beloved google maps grid [7]. This is one I have used with great delight before in my social media monitoring apps when plotting twitter locations [8] this control maps records on a map using the longitude and latitude. It’s beautiful!

Add this to any view using the below settings. I had a few teething issues that Jason kindly helped me out with this one when using it so here is a few things to save you the learning curve:

You do need to set up a google API key but its free for a developer account
The longitude/latitude fields must be Decimal Numbers which allow up to 10 decimal places and set the man/min value as high/low as possible
Use the full logical name for the longitude/latitude fields on the control

Hover Card

This one is great to allow your users to see more about the record without having to leave the screen [9]. This is ideal for showing the details in those long description fields such as those used on a task, appointment, contact or account. Nice!

HoverGrid Set Up.png — Set up is super simple, you just need to provie the name of the field you would like to show the hover card for - easy.

There are lots more controls available in the gallery, some are much more specific to a use case while some like these are flexible to different user scenarios. This is just a taste of what we can do with grids by going off-the-grid. Why not leave a comment below to share your favourite grid control? I would love to discover more of these.

Finally a shout to David Yack for his course ‘Zero to PCF’ [6] which taught me how to deploy a PCF component that doesn’t have a pre-packaged solution available - YAY!

[1] PCF Gallery option sets - https://pcf.gallery/categories#optionset

[2] Smart Grid PCF - https://pcf.gallery/smart-grid/

[3] Direct link to Smart Grid PCF zip file - https://github.com/nijos/SmartGrid/blob/master/SmartGrid/smartGridPCF/bin/Debug/smartGridPCF.zip

[4] ‘Level Up for Dynamics 365/Power Apps’ chrome add in - https://chrome.google.com/webstore/detail/level-up-for-dynamics-365/bjnkkhimoaclnddigpphpgkfgeggokam?hl=en

[5] Attachments grid - https://pcf.gallery/attachments-grid/

[6] Zero to PCF https://365.training/courses/detail/zerotopcf?DiscountCode=Powerfuldevs

[7] Google maps grid- https://pcf.gallery/google-maps-grid/

[8] Twitter and google maps grids - https://www.ameyholden.com/articles/model-driven-power-apps-pcf-social-media-analytics

[9] Hover Card Grid - https://pcf.gallery/hovercard-details-list/