Extensibilité de l’expérience utilisateur
Les développeurs sont généralement impliqués lorsque l’expérience utilisateur souhaitée est difficile ou impossible à obtenir en utilisant une approche low-code. Deux des approches les plus courantes pour un développeur souhaitant améliorer l’expérience utilisateur consiste à créer un composant de code Power Apps Component Framework ou à implémenter des scripts client. Les composants de code permettent d’implémenter un visuel personnalisé qui peut être utilisé par des applications pilotées par modèle ou des applications canevas, comme n’importe quel contrôle prêt à l’emploi. Les scripts client ne sont pas destinés à être visuels, mais à implémenter des règles métier au moyen d’un programme. Les scripts client s’appliquent uniquement aux applications pilotées par modèle. Les deux techniques suivent des modèles normatifs et des modèles d’objet que vous devez connaître lorsque vous les utilisez à des fins d’extensibilité. Dans le reste de cette rubrique, nous explorerons en détail ces deux options.
Power Apps Component Framework
Les composants de code sont implémentés en HTML, CSS et TypeScript. Bien que vous ne soyez pas obligé d’utiliser une infrastructure d’IU spécifique, React est fréquemment utilisée.
Pour créer un composant de code, vous devez implémenter une interface qui permet à l’application d’hébergement d’interagir systématiquement avec votre composant. Pour commencer à développer un composant de code qui implémente cette interface, utilisez l’outil d’interface de ligne de commande (CLI) Power Platform pour initialiser vos fichiers de composants à partir d’un modèle de colonne ou de jeu de données. Ce modèle contient des espaces réservés pour l’implémentation de l’interface requise.
L’outil CLI crée un fichier manifeste qui décrit les fichiers constituant votre composant en tant que ressources. Le manifeste identifie également toutes les propriétés disponibles pour utilisation par l’application hébergeant le composant. Dans l’exemple suivant, une propriété companyName a été définie.
Lorsque ce composant est utilisé par les créateurs d’applications, ces derniers ont la possibilité de définir statiquement une valeur pour le nom de l’entreprise ou de la lier de manière dynamique à l’une des colonnes de données disponibles dans l’application. Les propriétés permettent à l’application et au composant de communiquer au sujet des données sans que l’application ait besoin de comprendre l’implémentation du composant.
Le manifeste permet également d’activer des fonctionnalités. Lorsqu’une fonctionnalité est activée en étant marquée comme obligatoire dans le manifeste, la logique du composant de code peut utiliser l’API native associée à la fonctionnalité. Par exemple, l’activation de la fonctionnalité Device.captureAudio permet au contrôle de code d’appeler le microphone de l’appareil pour enregistrer l’audio.
<feature-usage> <uses-feature name="Device.captureAudio" required="true" /> <uses-feature name="Device.captureImage" required="true" /> <uses-feature name="Device.captureVideo" required="true" /> <uses-feature name="Device.getBarcodeValue" required="true" /> <uses-feature name="Device.getCurrentPosition" required="true" /> <uses-feature name="Device.pickFile" required="true" /> <uses-feature name="Utility" required="true" /> <uses-feature name="WebAPI" required="true" /> </feature-usage>
Le runtime de l’application gère le cycle de vie et la communication avec le composant de code hébergé. Cette opération est réalisée par la classe de composant de code implémentant l’interface StandardControl.
export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}
Cette interface vous oblige à implémenter les méthodes suivantes :
init : permet d’initialiser l’instance de composant. Les composants peuvent lancer des appels de serveur distant et d’autres actions d’initialisation.
updateView : cette méthode est appelée lorsqu’une valeur du conteneur de propriétés a changé. Ce dernier comprend les valeurs de colonne, les jeux de données, les valeurs globales telles que la hauteur et la largeur du conteneur, le statut hors connexion, les valeurs de métadonnées des composants telles que l’étiquette, visible, etc.
destroy : cette méthode est appelée lorsque le composant doit être supprimé de l’arborescence DOM. Vous pouvez l’utiliser pour le nettoyage et la libération de mémoire utilisée par le composant.
getOutputs (facultatif) : méthode appelée par le framework avant qu’un composant reçoive les nouvelles données. Renvoie un objet basé sur la nomenclature définie dans le manifeste, et attend des objets pour la propriété marquée comme liée.
Les composants de code vous obligent uniquement à mettre en œuvre le minimum nécessaire pour permettre une communication et une expérience cohérentes avec l’application d’hébergement.
Scripts client
Le script client permet d’utiliser JavaScript dans des applications pilotées par modèle Power Apps, pour la mise en œuvre de règles d’entreprise. Les scripts client doivent être utilisés comme alternative lorsque les règles métier déclaratives ne répondent pas aux besoins. Ils s’exécutent sur un formulaire piloté par modèle, en réponse aux événements de formulaire suivants :
Chargement d’un formulaire
Changement des données d’une colonne
Enregistrement d’un formulaire
De plus, un bouton de la barre de commandes peut être configuré pour appeler un script client lorsque l’utilisateur appuie dessus.
Lorsque vous écrivez votre logique en JavaScript, il est important de noter que même si le formulaire est simplement en HTML, vous n’êtes pas autorisé à manipuler directement son contenu. Le script client offre un modèle objet avec des appels de méthode pour interagir avec les différents composants du formulaire. Cela garantit que la logique d’entreprise est isolée de toute modification de la disposition ou du code HTML spécifique utilisé dans le rendu du formulaire.
Voici un exemple de script client qui gère à la fois le chargement de formulaire et la modification de colonnes.
// A namespace defined for the sample code
// As a best practice, you should always define
// a unique namespace for your libraries
var Sdk = window.Sdk || {};
(function () {
// Define some global variables
var myUniqueId = "_myUniqueId"; // Define an ID for the notification
var currentUserName = Xrm.Utility.getGlobalContext().userSettings.userName; // get current user name
var message = currentUserName + ": Your JavaScript code in action!";
// Code to run in the form OnLoad event
this.formOnLoad = function (executionContext) {
var formContext = executionContext.getFormContext();
// display the form level notification as an INFO
formContext.ui.setFormNotification(message, "INFO", myUniqueId);
// Wait for 5 seconds before clearing the notification
window.setTimeout(function () { formContext.ui.clearFormNotification(myUniqueId); }, 5000);
}
// Code to run in the attribute OnChange event
this.attributeOnChange = function (executionContext) {
var formContext = executionContext.getFormContext();
// Automatically set some column values if the account name contains "Contoso"
var accountName = formContext.getAttribute("name").getValue();
if (accountName.toLowerCase().search("contoso") != -1) {
formContext.getAttribute("websiteurl").setValue("https://www.contoso.com");
formContext.getAttribute("telephone1").setValue("425-555-0100");
formContext.getAttribute("description").setValue("Website URL, Phone and Description set using custom script.");
}
}
// Code to run in the form OnSave event
this.formOnSave = function () {
// Display an alert dialog
Xrm.Navigation.openAlertDialog({ text: "Record saved." });
}
}).call(Sdk);
Vous pouvez suivre la procédure pas à pas complète de cet exemple pour obtenir des détails sur la façon dont il se connecte au formulaire.
Grâce à un script client, un développeur peut rendre un formulaire plus accessible par un utilisateur en masquant et en affichant les colonnes appropriées, en validant les données et en effectuant d’autres tâches courantes requises pour améliorer l’expérience utilisateur.