Im folgenden Beitrag wird die Implementierung eines generischen Popups mithilfe der asynchronen Funktion await und then vorgestellt.

Im Wesentlichen grenzt sich diese Implementierung von der Systemfunktion OpenScreenInPopup() dadurch ab, dass hier ein Übergabewert mitgegeben wird, um den Inhalt des Popup-Fensters je nach Anwendung unterschiedlich zu gestalten.

In diesem Beispiel wird ein Popup erstellt, welches beim Auswählen eines neuen Rezeptes nachfragt, ob das bisherige überschrieben werden soll. Im beigelegten TIA Portal Projekt ist die Beispielanwendung ausprogrammiert, um zu zeigen in welcher Form solch ein Popup verwendet werden kann.

Bild 1: PopUp zur Laufzeit

Nachdem das Bild für das Popup erstellt wurde, muss das Skript für den Aufruf geschrieben werden. Wichtig ist hierbei, dass die Funktion asynchron definiert wird. Dies kann mithilfe der Schaltfläche, gezeigt in folgender Abbildung, eingestellt werden.

Bild 2: Asynchroner Aufruf

Tipp: Auch wenn die return Funktion vor dem Umschalten geschrieben wurde, muss hier das Schlüsselwort async manuell hinzugefügt werden.

Das Skript für den Aufruf des Popups sieht folgendermaßen aus:

Beispiel Skript:

openYesNoPopup

export async function openYesNoPopup(question) {

return new Promise(async function(resolve, reject) {

await UI.SysFct.OpenScreenInPopupAsync('yesnopopup', 'Popup_YesNo', true, '', 0, 0, true, './Screen');

Screen.FindItem('./yesnopopup').WindowFlags = 0;

Screen.FindItem('./yesnopopup/txtQuestion').Text = question;

const timerId = HMIRuntime.Timers.SetInterval(function(){

const resultText = Screen.FindItem('./yesnopopup/txtResult').Text;

if (resultText) {

HMIRuntime.Trace('Result: ' + resultText);

resolve(resultText === 'Yes');

UI.SysFct.OpenScreenInPopup('yesnopopup', 'Popup_YesNo', true, '', 0, 0, true, './Screen');

HMIRuntime.Timers.ClearInterval(timerId);

}

}, 200);

});

}

Als Erstes werden hier zwei generische Objekte, im Beispielfall die beiden Rezeptnamen, übergeben. Die Frage wird mithilfe von Screen.FindItem() (Zeile 5 oben) in das entsprechende Feld im PopUp geschrieben. Anschließend wird auf die Eingabe des Benutzers gewartet, um das Ergebnis zurückzugeben. Weiterhin wird im gleichen Schritt das Popup durch den erneuten Aufruf von OpenScreenInPopup() wieder geschlossen.

Um das Skript über die Schaltflächen auf dem Bild aufzurufen, gibt es zwei verschiedene Möglichkeiten. Diese unterscheiden sich darin, dass die aufrufende Funktion entweder synchron oder asynchron ausgeführt werden soll.

Das Popup kann einerseits mithilfe von await aufgerufen werden:

Beispiel Skript:

txtOption1

export async function txtOption1_OnActivated(item) {

const newRecipe = 'Rezept 1'

const recipe = Screen.Items('ioValue1').ProcessValue;

if(recipe != newRecipe){

const result =await openYesNoPopup(newRecipe, recipe)

if(result){

Screen.Items('ioValue1').ProcessValue = newRecipe;

}

}

}

Bild 3: Asynchroner Aufruf

Wichtig ist hierbei erneut, dass die Funktion über die Schaltfläche als asynchron definiert wird.

Im Wesentlichen wird hier der aktuelle Rezeptname mit dem neuen verglichen und mithilfe des zuvor geschriebenen Skripts wird das PopUp für die Entscheidung zum Überschreiben geöffnet. Der Rückgabewert wird in eine Variable geschrieben und ausgewertet und damit die Entscheidung auf dem Bildschirm angezeigt.

Als zweite Methode kann der Aufruf mithilfe von then erfolgen:

Beispiel Skript:

Button_2

export function txtOption2_OnActivated(item) {

const newRecipe = 'Rezept 2'

const recipe = Screen.Items('ioValue1').ProcessValue;

if(recipe != newRecipe){

openYesNoPopup(newRecipe, recipe).then(function(result) {

if(result){

Screen.Items('ioValue1').ProcessValue = newRecipe;

}

});

}

}

Bild 4: Synchroner Aufruf

Im Unterschied zum Beispiel davor, kann hier eine synchrone Funktion verwendet werden. Der Aufruf erfolgt hier zwar anders, jedoch wird das Ergebnis erneut in einer Variablen gespeichert und diese dann für die Auswertung und Anzeige verwendet.

Hinweis:

Die in diesem Artikel beschriebene Vorgehensweise bezieht sich auf den Zeitpunkt der Erstellung dieses Artikels (Stand: Juli 2024).

Softwarestand: TIA-Portal V19 UPD2

Viele Grüße

Eure Fachberatung Deutschland (JD)