Schritte zur Verwendung von OnOutputChange (Client-API-Referenz)

Microsoft hat uns kürzlich einen neuen Satz von Ereignishandlern vorgestellt, mit denen eine Funktion registriert oder deregistriert werden kann, wenn ein Ausgabeparameter eines PCF-Steuerelements geändert wird. Durch die Verwendung der OnOutputChange-Methode kann eine nahtlose Kommunikation zwischen PCF-Steuerung und Client-API hergestellt werden. Es ist interessant zu wissen, dass dies sowohl mit einer Standard- als auch mit einer virtuellen Komponente funktioniert. Mehr zu einer virtuellen Komponente kann hier überprüft werden.

Sehen wir uns zuerst die Event-Handler an, die eingeführt werden. Sie sind wie folgt –

  • AddOnOutputChange – Dies fügt dem OutputChange-Ereignis des ausgewählten Steuerelements einen Ereignishandler hinzu. Die Syntax ist wie folgt –
var control = formContext.getControl("");
control.addOnOutputChange(myFunction);
  • RemoveOnOutputChange – Dadurch wird der Ereignishandler aus dem OutputChange-Ereignis des ausgewählten Steuerelements entfernt. Die Syntax ist wie folgt –
var control = formContext.getControl("");
control.removeOnOutputChange(myFunction);
  • GetOutputs – Dies gibt alle Ereignishandler zurück, die für das Ausgabeänderungsereignis des ausgewählten Steuerelements registriert sind. Die Syntax ist wie folgt –
var control = formContext.getControl("");
control.getOutputs();

Unten ist, was getOutputs() zurückgibt –

Eine wichtige Sache, die Sie hier wissen sollten, ist, dass der Ausführungskontext automatisch an den Ereignishandler übergeben wird, wenn die Ausgabe im PCF-Steuerelement geändert wird, um den formContext einfach abzurufen.

Schauen wir uns schnell die Demonstration desselben an. Zu Demonstrationszwecken erstelle ich ein PCF-Steuerelement für die Vorname Feld/Spalte der Kontakt Entität/Tabelle, die eine Benachrichtigung auf Feldebene anzeigt, wenn der Vorname aus numerischen Werten besteht.

Wir werden die folgenden Schritte befolgen, um das oben Genannte zu erreichen –

1. Erstellen Sie eine Virtual PCF-Komponente mit dem folgenden Befehl –

pac pcf init – Namensraum – Name – Vorlagenfeld – Framework reagieren

2. Nachdem die Komponente erstellt wurde, installieren Sie npm-Pakete mit

npm installieren.

3. Fügen Sie die Eigenschaften wie die folgenden in ControlManifest.xml hinzu –




4. Nehmen Sie wie unten beschrieben Änderungen an der Datei index.ts vor. Wir lesen den Wert aus dem Textfeld und vergleichen ihn mit einer Regex, die prüft, ob die Eingabezeichenfolge ein numerisches Zeichen enthält. Wir übergeben die Input Changed-Funktion als Callback-Funktion an die Requisiten unserer Hauptkomponente. Und in den getOutputs werden wir die Ausgabeparameter setzen.

public init(

context: ComponentFramework.Context,

notifyOutputChanged: () => void,

state: ComponentFramework.Dictionary

): void {

this.notifyOutputChanged = notifyOutputChanged;

this.currentFieldValue = context.parameters.textField.raw!;

this.isValidString = this.validateStringField(this.currentFieldValue);

}

 

/**

* This function will check the string passed to it and will return if the string contains any numerical value

* @param currentFieldValue value to be checked

* @returns true or false based on regex checking

*/

validateStringField(currentFieldValue: string): boolean {

let isValid:boolean = false;

let checker = new RegExp('^[A-z]*$');

try {

isValid = checker.test(currentFieldValue);

} catch (error) {

console.log(error);

}

return isValid;

}

 

/**

* Called when any value in the property bag has changed. This includes field values, data sets, global values such as container height and width, offline status, and control metadata values such as label, visible, etc.

* @param context the entire property bag is available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions

* @returns ReactElement root react element for the control

*/

public updateView(context: ComponentFramework.Context): React.ReactElement {

const props: IStringChekerProps = {

defaultValue: context.parameters.textField.raw!,

onInputChanged: (event: React.FormEvent, newValue?: string | undefined) => {

this.currentFieldValue = newValue!;

this.isValidString = this.validateStringField(this.currentFieldValue);

this.notifyOutputChanged();

}

}

return React.createElement(

StringCheker, props

);

}

 

/**

* It is called by the framework prior to controlling receiving new data.

* @returns an object based on nomenclature defined in the manifest, expecting object[s] for a property marked as “bound” or “output”

*/

public getOutputs(): IOutputs {

return {

textField:this.currentFieldValue,

isValidValue : this.isValidString

};

}

5. Our main components should look something like this –

import * als React von ‘react’;

import { Label, TextField } from '@fluentui/react';

 

export interface IStringChekerProps {

defaultValue?: string;

onInputChanged: ((event: React.FormEvent, newValue?: string | undefined) => void) | undefined

}

 

export class StringCheker extends React.Component {

public render(): React.ReactNode {

return (



)

}

}
  1. Auch hier müssen wir möglicherweise Änderungen vornehmen d.ts Datei ähnlich wie unten, um die Eingabe- und Ausgabeschnittstellen einzuschließen.
/*

*This is auto-generated from the ControlManifest.Input.xml file

*/

 

// Define IInputs and IOutputs Type. They should match with ControlManifest.

export interface IInputs {

textField: ComponentFramework.PropertyTypes.StringProperty;

}

export interface IOutputs {

textField?: string;

isValidValue?: boolean;

}

7. Von der PCF-Seite sind wir bereit. Bitte fahren Sie fort und geben Sie ein

npm-Run-Build

und sobald der Build abgeschlossen ist, geben Sie ein

pac pcf push –herausgeberpräfix

8. Nachdem die PCF erfolgreich gepusht wurde, werden wir sie zuerst konfigurieren und dann zum JavaScript-Teil wechseln. Die Feldkonfiguration sieht wie folgt aus –

9. In JavaScript fügen wir den Event-Handler zum OnOutputChange-Ereignis des firstname-Steuerelements hinzu. Es sollte ungefähr so ​​​​aussehen –

namespace IKL {

export namespace PCF {

export class RibbonLibrary {

/**

* This function will run onload of form and register validateName to the output change event of firstname

* @param context

*/

onLoad = (context:any):void => {

//get formContext

let formContext = context.getFormContext();

//get control

var control = formContext.getControl("firstname");

//add validator function on output change event

control.addOnOutputChange(this.validateName);

}

 

/**

* This function will check if the firstname has any other values than alphabets

* @param OnOutputChangeContext

*/

validateName = (OnOutputChangeContext?:any):void => {

//get the attribute

let attribute = OnOutputChangeContext.getEventSource();

//get formContext

let formContext = OnOutputChangeContext.getFormContext();

try {

//we've included a switch so that the same function can be used further for other fields

switch (attribute.getName()) {

case 'firstname':

let firstnameControl = formContext.getControl('firstname');

let firstnameControlOutput = firstnameControl.getOutputs();

let isValidFirstname = firstnameControlOutput["firstname.fieldControl.isValidValue"].value;

//if the first name is invalid, show a notification

if(!isValidFirstname){

firstnameControl.setNotification('Firstname should not contain digits','firstnameControlNotification');

}

//else clear it

else {

firstnameControl.clearNotification('firstnameControlNotification');

}

break;

default:

break;

}

} catch (error) {

console.log(error);

}

}

}

}

}

let contactLib = new IKL.PCF.RibbonLibrary();

Hinweis: Aus dem obigen Code können wir sehen, wo die Methode Validierungsname definiert ist, haben wir den Kontext des PCF-Steuerelements direkt erfasst OnOutputChangeContext.

10. Registrieren Sie das Skript beim Ladeereignis des Kontaktformulars und wir sind fertig. Es wird wie folgt in Aktion aussehen –

Fazit:

So können wir das Ereignis OnOutputChange für eine PCF-Steuerung verwenden.

.

Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *