Power Happening building highlights

A few days ago with my friend Ben den Blanken we launched our first solution, Power Happening.

This solution is about a Model Driven App that helps you to organize your community events, at first the idea was to offer only this Model Driven App as a first release.

But then we thought what if we add a cool component like a Custom Page, after thinking about that idea we decided to build it to allow the user to create their own event schedule. It sounds cool, isn’t it?

So we started building the Custom Page, but we wanted to make it responsive, yes we could use containers, but then we remembered Creator Kit, so we decided to leverage Creator Kit components.

Also around those days Scott Durow posted some videos on YouTube about his Drag and Drop component for Canvas App. We watched those videos and if you watch them, then you will agree with me that it is really impressive what Scott did with that PCF.

We saw that we could use it on our Custom Page and by using it we could make it even more user friendly and offer a unique drag and drop experience while building the event schedule.

This blogpost is not about how we built the Custom Page, as it can be download it here as an unmanaged solution so you can install it and see by yourself the guts of the Custom Page.

This blogpost is about our experience and findings building it using the Creator Kit and Scott’s PCF.

Creator Kit

The first thing we decided to do was to leverage the Custom Page Template that is included in the Creator Kit, but be aware that this template is not included in the Creator Kit Core solution, but in the References MDA solution.

Therefore, we had to first install the Creator Kit Core solution and then install the References MDA solution:

Afterwards we had to add an exiting Custom Page in our solution, this exiting Custom Page is called “Custom page template”:

We recommend using this template because it already contains multiple containers that make the Custom Page responsive. It’s true that we had to add a couple of more containers, but it was an easy job because we had the base containers from the beginning.

And believe me, trying to set up containers from scratch is not always the easiest job.

This template will make your life easier and on top of that it already contains the command bar, so all you have to do is set it up and use it. You don’t have to waste time adding icons and aligning them.

Finally, just use the “Save As” button and your own customized page will be there in the solution.

In a nutshell, Creator Kit References MDA solution is really handy to start creating a custom page without having to create it from scratch, it saves you a lot of time.

But the cool part is that after you save your own Custom page you can remove the template from your solution:

This step is really important because you won’t need to deploy the Creator Kit References MDA solution in the target environment. And you will agree with me that the less solutions we deploy, the better the job will be.

Finally another component we used from the Creator Kit Core solution is the Fluent Spinner:

We wanted to show a loading spinner with a custom text while the user saves the changes in Dataverse, these small details in the end add a lot of value to the user and the experience will feel natural. To do this simply go to the “Get mode components” option, and in the right side panel select the “Code” option:

Which brings me to the last important point to mention about Creator Kit components, please don’t forget to enable the “Power Apps component framework for the canvas app” feature, if you don’t you will not be able to add Creator Kit solution components.

To do this just go to the Power Platform admin center, choose the appropriate environment and go to settings and then to features:

In the end you need to turn this on for the drag and drop PCF anyway.

Drag & Drop PCF

Now comes the best part (in my opinion). I have always said that without Scott we would not have RibbonWorbench. Scott is one of the best contributors to the community and it’s not the exception this time, because thanks to his Drag and drop component we could give a unique experience to the user.

To be honest at the beginning I wasn’t able to use this PCF for my business case, but it wasn’t because something is off with the PCF, but because I didn’t know how to configure and use it correctly.

So what I did is watch the first video in YouTube:

https://www.youtube.com/watch?v=mlrg0OfF4e8&t=1440s&ab_channel=ScottDurow

And I followed step by step how Scott configured the PCF to enable a very basic drag and drop scenario. This scenario consisted of dragging contacts from one section to another.

I thought it was just add the component and start using it, well it’s not that easy but it’s not rocket science either. That’s why here are some highlights of how I set up the PCF.

First point I want to highlight in my set up is that the component is not linked directly to a Dataverse table but to a collection. And this must be so because at the end we also want to have the ability to control some additional information that is going to be used by this component.

Now the key to understand about the drag and drop component is the concept of zones, because in order to have a drag and drop functionality we have to have minimum two zones to move items to and from.

Therefore, each drag and drop component must have a zone id. So if you select the first component you can go to properties and you will see the property “Drop Zone Id”. The very basic test you can do is to type unassigned in that property. And for the second component you can type assigned in that same property.

And this basically means that, when we are tracking the position of items, the zone Id will tell us where it’s been moved from and to.

And for the data source there is an important concept, and that is when you’re doing drag and drop between zones, it’s always advisable to have the same collection bound to all of your zones.

Yes, you can bind different collections to different zones for more complex scenarios, but for simply moving things between zones, it’s best to have the same items collection. Because what happens is that the component will filter to only show the items based on the zone that they’re assigning to.

So how does it know which zone that each of these items are bound to. Well we have IdColumn and ZoneColumn properties in the component. So the component knows the id of the item so that it can report on the unique identifier so you can use it in your code.

And then also which column it’s going to use to identify the zone that it’s currently residing. And of course you have to create those two columns in the collection so you can use them in the component. This is the basic example for the contacts collection:

Then you have to go to the properties and look for IdColumns and ZoneColumn:

The id it’s recommended to be the GUID of the record and the zone it’s the column we have created before in the collection.

And finally you have to choose which field are you going to use to be shown as the text of each item in the component, for this basic contact example you can use the fullname:

Just bind the same collection to the second component and set the IdColumns and ZoneColumn properties, choose the field to be displayed in each item and there you have it, now you have a drag and drop functionality:

Conclusion

In my opinion nowadays when we want to build a Custom Page or a Canvas App, it is advisable to start using the Creator Kit, it already has components ready to use so you don’t have to waste time building a spinner or a ribbon menu or even trying to configure the containers because the template already has them.

Regarding drag & drop PCF, this component opens up many opportunities for business scenarios where the “nice to have” become easier to deliver. Scenarios like a kanban view or as my example a scheduling dashboard, or assigning owners to tasks, I mean the possibilities are quite high.

I wonder if in the future Power Apps will include some sort of drag and drop functionality by default, but for now Scott’s component is awesome and easy to use and I will use it as much as I can for scenarios like the ones I mentioned.

Hello there! Welcome to my blog!
My name is Wilmer Alcivar and I’m a Power Platform fan

I’d love to share my knowledge, so please do not hesitate to connect!

Categories
Recent posts
Tagged

Leave a Reply

Your email address will not be published. Required fields are marked *