Maker Portal: JavaScript/Event Handler configuration now available!
The Power Apps Maker Portal is where Microsoft is migrating the maker experience for model-driven Dynamics 365 apps from the classic Solution Explorer within Dynamics 365. Hopefully most people already know this, because it has so much to offer and will eventually be all that we have. We are slowly seeing Microsoft bring the Maker Portal into parity with the Solution Explorer. This reflects the merging of Dynamics 365 apps and model-driven apps into the same tool. Those of us who work in the Maker Portal regularly have become quite familiar with the infamous "Switch to classic" button, because we frequently have to go to the classic experience in order to do certain things.
I get excited whenever I see a new option as I'm customizing Power Apps. The newest of these and one that I've been waiting for the longest is the ability to add and customize JavaScript libraries and event handlers on model-driven forms. Good news is Microsoft has been diligently working behind the scenes, and we now have this functionality! Now I'm not a developer, but I do find myself wanting to review the JavaScript applied to forms, especially as I configure business rules for additional client-side logic.
I have yet to see any documentation announcing any of this, so let's walk through what this new experience for configuring event handlers looks like. I'll include screenshots to compare the new experience to the classic as we go through.
*** In case you haven't heard, Microsoft changed terminology this week with the platform from Entities to Tables and from Fields to Table Columns, as well as renaming the entire Common Data Service to Microsoft Dataverse. See more details here. I did my best to update this post with the new terminology, but you may see some of the old here and there.
Add a JavaScript Library
Open the new model-driven form designer. Best practice says to do this from within a solution.
Power Apps Maker Portal > Data > Entities Tables > Forms > Edit form
Find and navigate to the newest pane, Form libraries, and click "Add library".
A new window opens for searching libraries that is much more intuitive than the classic search window.
A shift in terminology can be noted, here, as well: "JavaScript Library" is being used versus "Web Resource".
If you need to create a new library, click "New" and a tab will open with the same form used in the classic form designer.
Interestingly, we can create any type of Web Resource, but the only type that can be used from within the new model-driven form designer is a JavaScript library, hence the terminology difference in the previous screenshot.
Upon saving, the tab will close and you're able to select your newly created library to add to the form.
Configure Event Handlers
Now it's time to configure the event handlers.
Whereas before, you could view and configure the different events from a consolidated view (pictured on the right in the below image), you now must navigate to the component for which you'd like to configure an event. For the Form's On Save and On Load events, this means you must select the form from the Tree view pane, because there's no direct way to select it otherwise. This resembles the canvas app experience for configuring an app's OnStart property.
Select the component for which you'd like to configure an event handler, and click the Events tab. You'll see the available events listed here, and I've listed below the options you'll find when selecting various components.
- Form - On Save, On Load (must select from Tree view)
- Tab - On Tab State Change
- Field - On Change
- Header/Footer - none
- Section - none
In order to configure a new event handler, click "+ Event Handler". A new flyout pane appears where you can configure all of the same information for a JavaScript function as in the classic experience (pictured on the right).
- Select the Event Type
- Select the Library you added earlier
- Type the function you'd like to call from the library
- Review the checkbox to "Pass execution context as first parameter
- List any parameters to pass to the function
- Click Done, and that's it.
Select Field Column Dependencies
I see a noticeable difference with this step between the classic and modern experiences. It's best practice to configure field column dependencies when adding JavaScript to a form, because it will prevent the selected dependent fields columns from being removed from the form, thus breaking the JavaScript.
To do this, the dependent fields were selected for each and every Event Handler (see image on the right below). In the new designer, dependent fields are selected for the event itself and apply for all event handlers beneath that. This simplifies things quite a bit for developers.
Another very notable change is that by listing a field as a dependency, you no longer need to add the field to the form. This is huge! I'm surprised I have yet to hear anyone talk about this idea, as it goes against one of the core principles of client-side development. I included the quote below form the Microsoft documentation on web resource dependencies.
"Starting with Model-driven apps, if your JavaScript web resource depends on an entity attribute value that you don’t want to display in the form, you can set the attribute as a dependency for the JavaScript web resource."
Now we've used the new model-driven form designer to add a JavaScript library to a form, configure event handlers for functions from that library, and configure table column dependencies for the events!
I am always happy to see how the Microsoft team will improve the maker experience when rebuilding functionality from the classic Solution Explorer to the new Maker Portal. For this specific feature, I thought they did a great job, and I'll keep looking out for new features to share!
Comments
Post a Comment