- All of Microsoft
JavaScript Alert Dialogs in Model-Driven Apps Tutorial
Demystify alert dialog creations in model-driven apps using JavaScript in Dynamics 365. Unleash the power of client-side API!
Exploring the Creation of Alert Dialogs in Model-Driven Apps with JavaScript
The blog post by Lewis Baybutt [MVP] effectively delineates the process of creating alert dialogs in Model-Driven Apps using JavaScript, with specific emphasis on Dynamics 365. The topic comes under sharp focus due to its pertinence to producing popup messages triggered by actions such as incomplete validation or selections.
This process doesn't involve the use of canvas pages, but fully exploits the standard UI dialogs, mostly deployed in cases of validation errors. The simplicity of executing this client-side API call to realize these alert dialogs is well demonstrated.
An important component in this process is JavaScript, a crucial driver in the functionality of apps falling under the Model-Driven category. JavaScript is tasked with calling the client API, hence a JavaScript function is integral to this functionality as it acts as the trigger, propelling the specified code into action.
The article further elucidates numerous triggers or events that could spark the specified code into action. The triggers could range from form loading, record saving or even the altering of a specific field value in a form without necessarily saving it. These triggers usher in functionality for numerous elements such as field validations, form notifications and broadcast messages amongst others.
Subsequently, the blog post guides readers on where to position or install this code. In the form editor, the relevant field is selected in this case, the job title field followed by selection of events and the addition of an event handler with the event type set to On Change.
Finally, for further detailed knowledge and use cases regarding Model-Driven App, follow this link.
Learn about dialogs with JavaScript in model-driven apps
The lesson at hand pertains to generating simple alert dialogs within model-driven software applications using JavaScript. Particularly, the focus is on Dynamics 365. Over there, developers are proficient enough to generate pop-up notifications with specific actions when particular events occur, such as incompletion of a validation or selection. These events are not the ones that leverage canvas pages or something similar, but familiar user interface (UI) dialogs for things such as validation errors.
In this tutorial, the mystery of how to create alert dialogs like the aforementioned will be unveiled. We will be using a simple client-side API call to make this realization feasible. Now, to make this functionality perform, some manipulation of JavaScript is in order as it calls out the client API for data-driven developments! In other words, we need to instigate a JavaScript function that performs the latter, based on a precise event. Such events can act as triggers to rosut specified code.
The various triggers we can utilize include form loadings, record savings, or even modifications of a specific field's value on a form preceding its storage. These procedures enable the implementation of various featuress including field validations, form notifications, broadcasting of messages, and more! Now that we understand the preliminary details, it's time to delve deeper.
The event that we are to test is the change in 'job title' field on a form. The general assumption is that people normally wouldn't have a special character in their job titles, hence our example will be an evaluation/validation of the value inputted to observe if it contains a special character. If the answer is affirmative, an alert dialog will pop up inquiring whether the special character was intentional or not.
Following is an analysis of the code developed to realize this effect. There are two main function: launchDialog and hasSpecialCharacters. The former is called upon with the event of change in job title, and the latter evaluates if there are any special characters in the string passed.
- launchDialog starts off by retrieving the 'jobtitle' field value, checks if it contains any special characters, and if the answer is affirmative, then it constructs an alert dialog asking whether those special characters were entered intentionally.
- hasSpecialCharacters is a utility function that tries to match the input string against regular expressions of special characters. This function returns a Boolean value on successful/unsuccessful match, which is then used by launchDialog.
While in the form editor, the relevant field, in this case, 'job title', is selected. An event handler is then added, with the event type set to 'On Change'. The JavaScript file gets uploaded as a library in a Dataverse JS Web Resource. The launchDialog function is specified and both checkboxes are selected, especially the second one, as the execution context is being utilized.
The last step involves saving and publishing the web resource and the form, before you put it to action! Adding a special character to the job title will result in the display of a warning. Unveiling the power of JavaScript within model-based developments can further enhance the user experience by adding several interactive points within the application.
Keywords
JavaScript alert dialogs, model-driven apps, alert dialogs JavaScript, create alert dialogs, simple alert dialogs, JavaScript in model-driven apps, model-driven JavaScript apps, creating JavaScript alerts, JavaScript alert model apps, model-driven alert dialogs.