Tips and Tricks for new async web client capabilities on model driven apps

Tips and Tricks for new async web client capabilities on model driven apps

• 1.
  Tips & Tricksfor New Async Web Client Capabilities on Model-Driven-Apps MALAYSIA DYNAMICS 365 & POWER PLATFORM USER GROUP - OCTOBER 2021 MEETUP
• 2.
  Mehdi El Amri BusinessApp 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 ClientScripting  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 - MDAClient 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 - SyncEvent  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 - AsyncEvents  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 – AsyncTask 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 – AsyncTask 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 EnableRule 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