Tips and Tricks for new async web client capabilities on model driven apps (malaysia d365 ug)

1. Tips & Tricks for New Async Web Client
Capabilities on Model-Driven-Apps
MALAYSIA DYNAMICS 365 & POWER PLATFORM USER GROUP -
OCTOBER 2021 MEETUP

2. Mehdi El Amri
Business App Consultant @Umanis
Specialize in Microsoft Dynamics CE & Power Platform
Contributor @Community.Dynamics.com
Blogger
Futur Speaker 
https://community.dynamics.com/members/meelamri
https://xrmtricks.com/
@meelamri1
linkedin.com/in/meelamri/

3. Agenda
Intro:
 MDA Client Scripting
 Sync Events vs Async Events
 DEMO (1)
New Async Capabilities
Async OnSave Event
 App Configuration
 DEMO (2)
Async Custom Enable Rule
 How is work ?
 DEMO (DEMO 3)
Async OnLoad Event
 App Configuration
 DEMO (4)
Recap & resources

4. Intro - MDA Client Scripting
 Client Scripting using a RICH JavaScript client APIS.
 Execute JS CODE reacting to events:
 Form Loads
 Form Save
 Column Change
 Process Change …
 Never interact with the DOM directly. Always use
the Microsoft Client API
Supported Events: https://docs.microsoft.com/en-
us/powerapps/developer/model-driven-
apps/clientapi/reference/events

5. Intro - Sync Event
 When a task is executed synchronously, this means that we wait for one task to be completed
before moving on to another  One task depends on the completion of another.
Task 1 Task 2 Task 3
Start Finish
Sync Event: Tasks are executed synchronously

6. Intro - Async Events
 When a task is executed asynchronously, you can directly switch to another task before the
previous has been completed  One task does not depend on the other.
Task 1
(Start)
Task 2
(Start)
Start Finish
Task 1
(Finish)
Task 2
(Finish)
Async Event: Tasks can be executed asynchronously

7. Intro – Async Task in Sync Event (1)
 Sync events are supposed to execute synchronous tasks, but nothing prevents the
implementation of asynchronous tasks.
Task 1
Async Task 2
Start
Task 3
Start Finish
Async Task 2
Finish
Sync Event

8. Intro – Async Task in Sync Event (2)
 Scenario:
 When a column is changed, a function will be triggered that will execute an asynchronous code that
displays a dialog box. The resolution of the asynchronous code will be done in 5 seconds.
 DEMO (1)

9. New Async Capabilities (1)
Historically, the Client API implemented only synchronous events. Developers used
workarounds to synchronize their asynchronous code.
One example is to display a button based on the result of an asynchronous operation:
 To implement this, we use a Custom Enable Rule.
 This kind of code is executed synchronously.
 The Custom Enable Rule returns a value before the execution of the asynchronous operation is finished.
 The idea was to have a global variable to store the result of the asynchronous operation and to execute
the enable rule a second time. At the second execution, we retrieve the value from the global variable
instead of executing the asychronous operation for the second.
 Example: https://butenko.pro/2018/11/13/showing-ribbon-button-based-on-the-result-of-async-
operation/

10. New Async Capabilities (2)
Starting this year, the API client are beginning to support asynchronous events. These are the
following events:
 OnSave Event
 Custom Enable Rules
 OnLoad Event (not yet documented)
These capabilities will help developers to synchronize asynchronous code in an efficient way and
to use the power of the JavaScript to implement quite complex scenarios with less effort !
Please note that the OnLoad event is not yet officially supported. I do not recommend using the
asychronous capability for this event in Production at this time.

11. Async OnSave Event (1)
This event is triggered when a form is saved. This saving can be done manually by a user or
automatically by a JavaScript code.
The client API gives us the ability to implement an asynchronous logic when triggering this
event.
This new capability is not applied by default. Indeed, this behavior is strongly linked to the
application we use. In effect, the MDA must be configured to support this behavior.
This kind of behavior will allow us to easily implement validations using asynchronous
operations. For example, validating an email address or a phone number through a third party
API.
Docs suggests a method that requires manipulation of the app's XML definition to enable
asynchronous capability. I propose an easier and faster way to enable asynchronous capability
for your applications.

12. Async OnSave Event (2)
To enable asynchronous capability for the OnSave event in your app:
 Open the console and type the following script:

13. Async OnSave Event (3)
After the script execution, we can check that the Asynchronous behavior is applied for our app
by using the following query:
 /api/data/v9.2/appsettings?$filter=(contains(uniquename, '%AsyncOnSave%'))

14. Async OnSave Event (4)
Scenario:
 Validate the phone number of the contact before saving.
 Use Power Automate for validation:
 Validation in less than 10 seconds.
 What happens if the flow does not respond after 10 seconds.
DEMO (2):
 Display a dialog message confirming the save after Cloud Flow Validation.
 Cancel the save if the flow does not validate the phone number and display a message
 Display an error if the execution time exceeds 10 seconds.

15. Async Custom Enable Rule
Custom Enables Rules are rules implemented in JavaScript that decide on the display of the
ribbon buttons.
Custom Enables rules support returning a Promise rather than boolean for asynchronous rule.
Scenario:
 Display/Hide a button based on the result of async operation.
DEMO (3):
 We will use the same Cloud Flow as DEMO (2)
 Button is shown when the promise is resolved
 Button is hidden when the promise is rejected
 Code only … I didn’t add the button to my form  !!

16. Async OnLoad Event (1)
This event is triggered when a form is loading.
The client API gives us the ability to implement an asynchronous logic when triggering this
event.
This new capability is not applied by default. This behavior is strongly linked to the application
we use. In effect, the MDA must be configured to support this behavior.
This kind of behavior will allow us to easily implement some asynchronous logic before
displaying a form. For example, we can change the form based on an attribute value.
At the moment, this behavior is not yet documented, so it is not yet supported. We can enable
this behavior in the same way as the Save event.

17. Async OnLoad Event (2)
To enable asynchronous capability for the OnLoad event in your app:
 Open the console and type the following script:

18. Async OnLoad Event (3)
After the script execution, we can check that the Asynchronous behavior is applied for our app
by using the following query:
 /api/data/v9.2/appsettings?$filter=(contains(uniquename, '%AsyncOnLoad%'))

19. Async OnLoad Event (4)
Scenario:
 Display the right form according to the result of an asynchronous operation
 We will mock the asynchronous action with the setTimeout() function
DEMO (4):
 What happen if the Load Event was Synchronous ?
 https://meelamri.files.wordpress.com/2021/05/synconload-event.gif?w=600
 What happen if the asynchronous operation is not resolved after 10 seconds ?

20. Recap & resources
Recap:
 Difference between Sync and Async Event
 Client API support 2 Async Events: OnLoad and OnSave
 OnChange Event is Sychronous !!
 Custom Enable Rules support Asynchronous operations
Resources:
 Docs:
 https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference
 https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/events/form-onsave
 https://docs.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/customize-dev/define-ribbon-
enable-rules?view=op-9-1#custom-rule
 Demos source code:
 https://gist.github.com/melamriD365/a42ff66001285cbdd07d685a6daabbee