Erweiterbarkeit der Benutzererfahrung
Entwickler sind häufig involviert, wenn die gewünschte Benutzererfahrung mit einem codearmen Ansatz schwierig oder unmöglich zu erreichen ist. Zwei der gebräuchlichsten Ansätze für Entwickler, um die Benutzererfahrung zu verbessern, sind das Erstellen einer Power Apps Component Framework-Codekomponente oder das Implementieren von Client-Scripting. Mithilfe von Codekomponenten können Sie ein benutzerdefiniertes visuelles Element implementieren, das von Canvas‑ oder modellgesteuerten Apps wie jedes standardmäßige Steuerelement verwendet werden kann. Client-Scripting sollen nicht visuell sein, sondern Geschäftsregeln programmgesteuert implementieren. Client-Scripting gilt nur für modellgesteuerte Apps. Beide Techniken folgen vorgeschriebenen Mustern und Objektmodellen, die Sie bei der Verwendung von beiden zur Erweiterbarkeit berücksichtigen müssen. Im Rest dieses Themas werden wir diese Optionen genauer untersuchen.
Power Apps Component Framework
Codekomponenten werden mit HTML, CSS und TypeScript implementiert. Es ist zwar nicht erforderlich, dass Sie ein bestimmtes UI-Framework verwenden, aber React ist eine beliebte Wahl.
Um eine Codekomponente zu erstellen, müssen Sie eine Schnittstelle implementieren, die eine konsistente Möglichkeit für die Hosting-App bietet, mit Ihrer Komponente zu interagieren. Um mit der Entwicklung einer Codekomponente zu beginnen, die diese Schnittstelle implementiert, verwenden Sie das Power Platform CLI-Tool (Command Line Interface) zum Initialisieren Ihrer Komponentendateien aus einer Vorlage einer Spalte oder eines Datasets. Diese Vorlage enthält Platzhalter für die erforderliche Schnittstellenimplementierung.
Das CLI-Tool erstellt eine Manifestdatei, die beschreibt, aus welchen Dateien Ihre Komponente als Ressourcen besteht. Das Manifest identifiziert auch alle Eigenschaften, die für die Anwendung verfügbar sind, die die Komponente hostet. Im folgenden Beispiel wurde eine Eigenschaft „CompanyName“ definiert.
Wenn diese Komponente von App-Herstellern verwendet wird, haben sie die Möglichkeit, entweder statisch einen Wert für den Firmennamen festzulegen oder ihn dynamisch an eine der verfügbaren Datenspalten in der Anwendung zu binden. Mithilfe von Eigenschaften können die Anwendung und die Komponente über Daten kommunizieren, ohne dass die App die Implementierung der Komponente verstehen muss.
Mit dem Manifest können Sie auch Funktionen aktivieren. Wenn eine Funktion aktiviert wird, indem sie im Manifest als erforderlich markiert wird, kann die Codekomponentenlogik die der Funktion zugeordnete native API verwenden. Wenn Sie beispielsweise die Funktion „Device.captureAudio“ aktivieren, kann die Codesteuerung das Gerätemikrofon aufrufen, um Audio aufzunehmen.
<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>
Die App-Laufzeit verwaltet den Lebenszyklus und die Kommunikation mit der gehosteten Codekomponente. Dies wird durch Ihre Codekomponentenklasse erreicht, die die StandardControl-Schnittstelle implementiert.
export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}
Für diese Schnittstelle müssen Sie die folgenden Methoden implementieren:
init – Wird zum Initialisieren der Komponenteninstanz verwendet. Komponenten können Remoteserveraufrufe und andere Initialisierungsaktionen starten.
updateView – Diese Methode wird aufgerufen, wenn sich ein Wert im Eigenschaftenbehälter geändert hat. Dies umfasst Spaltenwerte, Datasets, globale Werte wie Containerhöhe und ‑breite, Offlinestatus, Komponenten-Metadatenwerte wie Beschriftung, Sichtbarkeit usw.
destroy – Diese Methode wird aufgerufen, wenn die Komponente aus der DOM-Struktur entfernt werden soll. Verwenden Sie sie zur Bereinigung und Freigabe des von der Komponente verwendeten Hauptspeichers.
getOutputs (optional) – Wird vom Framework aufgerufen, bevor eine Komponente die neuen Daten empfängt. Gibt ein Objekt zurück, das auf der im Manifest definierten Nomenklatur basiert und Objekte für die als gebunden markierte Eigenschaft erwartet.
Für Codekomponenten müssen Sie nur das Minimum implementieren, das für eine konsistente Kommunikation und Erfahrung mit der Hosting-App erforderlich ist.
Client-Scripting
Mit Client-Skripten können Sie JavaScript in Power Apps modellgesteuerten Apps zur Implementierung von Geschäftsregeln verwenden. Client-Scripting sollte als Alternative verwendet werden, wenn deklarative Geschäftsregeln die Anforderungen nicht erfüllen. Client-Scripting wird in einem modellgesteuerten Formular als Reaktion auf die folgenden Formularereignisse ausgeführt:
Formular lädt
Daten in einer Spalte ändern sich
Formular wird gespeichert
Darüber hinaus kann eine Befehlsleistenschaltfläche so konfiguriert werden, dass beim Drücken ein Client-Skript aufgerufen wird.
Während Sie Ihre Logik in JavaScript schreiben, ist es wichtig zu beachten, dass Sie den Formularinhalt nicht direkt bearbeiten dürfen, obwohl das Formular nur HTML ist. Client-Scripting bietet einem Objektmodell Methodenaufrufe für die Interaktion mit den verschiedenen Formularkomponenten. Dies stellt sicher, dass Ihre Geschäftslogik vor Änderungen im Layout oder im spezifischen HTML-Code, der beim Rendern des Formulars verwendet wird, isoliert ist.
Das folgende Beispiel zeigt Client-Scripting, das sowohl das Laden von Formularen als auch das Ändern von Spalten behandeln.
// 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);
Sie können der Komplettlösung in diesem Beispiel für Einzelheiten dazu, wie es mit dem Formular verbunden wird, folgen.
Durch die Verwendung von Client-Scripting kann ein Entwickler ein Formular für einen Benutzer zugänglicher machen, indem er entsprechende Spalten ausblendet und anzeigt, Daten validiert und andere allgemeine Aufgaben ausführt, die zur Verbesserung der Benutzererfahrung erforderlich sind.