- Überblick
- Textfeld (Callout)
- Komplexe Szenarien
- Credentials
- Data Service
- Versionshinweise
- Über das Data Service-Aktivitätspaket
- Projektkompatibilität
- Entitätsdatensatz erstellen
- Entitätsdatensatz löschen
- Entitätseintrag nach ID abrufen
- Entitätsdatensätze abfragen
- Entitätsdatensatz aktualisieren
- Datei in Datensatzfeld hochladen
- Datei aus Datensatzfeld herunterladen
- Datei aus Datensatzfeld löschen
- Mehrere Entitätsdatensätze erstellen
- Mehrere Entitätsdatensätze aktualisieren
- Mehrere Entitätsdatensätze löschen
- Formular
- Versionshinweise
- Projektkompatibilität
- Echtzeitformulare
- Aktualisieren von Formulardaten
- Ausführen von Formularen mit JavaScript
- Anpassen von Formularen mit CSS
- Bedingte Komponenten
- Hinzufügen mehrerer Komponenten in derselben Zeile in „Spalten
- Verwenden der Datentabellenkomponente
- Datei-/Ordnerpfad abrufen
- Lesen von Zellenwerten aus einer Datenrasterkomponente
- Anzeigen von PDF-Dateien
- Anzeigen von Bildern in Formularen
- Scrollen durch Datenraster
- Verwenden von Dev-Tools mit Formularen
- Werte von Formularkomponenten berechnen
- Verwalten von Datumsangaben in Formularen
- Öffnen von Hyperlinks in Formularen
- Anzeigen einer Standardregisterkarte in Formularen
- Anzeigen der vollständigen Beschriftung einer Komponente
- Suche nach langen Zeichenfolgen in Dropdownlisten
- Über Formulare vor 23.4
- Projektkompatibilität
- Echtzeitformulare
- Dynamische Kontrollkästchen
- Bedingte Dropdownmenüs
- Anzeigen einer Standardregisterkarte
- Anzeigen von Bildern
- Anzeigen von PDF-Dateien
- Anzeigen der vollständigen Beschriftung
- Dynamische HTML-Elemente
- Verwalten von Datumsangaben
- Suchen nach langen Zeichenfolgen in Dropdownmenüs
- Anpassen von Formularen mithilfe lokaler CSS-Dateien
- Ausführen des Do-Blocks bei Änderung des Kontrollkästchens
- Anpassen der Spaltenbreite
- Aktualisieren von Formulardaten
- Zurücksetzen der Erfassungsdaten
- Erweiterte Logik
- Ausführen des Do-Blocks bei Änderung der Dropdown-Option
- Lesen von Zellenwerten aus einer Datenrasterkomponente
- Bedingte Komponenten
- Scrollen durch Datenrasterkomponenten
- Verwenden der Rasterkomponente
- Entwicklungstools
- Berechneter Wert
- Dynamische Dropdownmenüs
- Wechseln von Registerkarten mit Schaltflächenklick
- Öffnen von Hyperlinks innerhalb des Formulars
- FTP
- IPC
- Persistenz
- Versionshinweise
- Projektkompatibilität
- Über das Persistenz-Aktivitätspaket
- Massenformulardesigner
- Start Job And Get Reference
- Wait for Job and Resume
- Add Queue Item And Get Reference
- Wait For Queue Item And Resume
- Wait for Form Task and Resume
- Nach Verzögerung fortsetzen
- Assign Tasks
- Create External Task
- Wait For External Task and Resume
- Complete Task
- Forward Task
- Get Form Tasks
- Get Task Data
- Add Task Comment
- Update Task Labels
- App-Aufgabe erstellen
- Wait For App Task and Resume
- Arbeiten mit App-Aufgaben
- Erstellen Ihrer ersten Formularaktion
- Erweiterte Steuerelemente für Dropdownmenüs
- Einbetten von Objekten in Formularaktionen
- Zulassen, dass Benutzer Dateien in den Speicher-Bucket hochladen
- Hinzufügen erweiterter Logik mit Java-Skript
- Festlegen einer Standardregisterkarte
- Entfernen der Schaltfläche „Löschen“ aus dem Bearbeitungsraster mithilfe von benutzerdefiniertem CSS
- Anpassen von Bearbeitungsrastervorlagen
- Verwenden von Schaltflächen zum Auslösen benutzerdefinierter Logik
- Verwenden eines externen Formularlayouts
- Dynamisches Erweitern von Formularkomponenten zur Laufzeit
- Beispielworkflows
- Automation Ops-Pipelines
- System
- Versionshinweise
- Über das Systemaktivitätspaket
- Projektkompatibilität
- RegEx Builder-Assistent
- Ist Textübereinstimmung
- Übereinstimmende Muster finden
- Modify Text
- Modify Date
- Replace Matching Patterns
- Text to Left/Right
- Datenspalte hinzufügen (Add Data Column)
- Datenzeile hinzufügen (Add Data Row)
- Datentabelle erstellen (Build Data Table)
- Datentabelle leeren (Clear Data Table)
- Zeilenobjekt erhalten (Get Row Item)
- Update Row Item
- Datentabelle zusammenführen (Merge Data Table)
- Datentabelle ausgeben (Output Data Table)
- Datenspalte entfernen (Remove Data Column)
- Datenzeile entfernen (Remove Data Row)
- For Each Row in Data Table
- Generate Data Table From Text
- Create List
- Append Item to List
- Read List Item
- Listenelement aktualisieren
- Protokollfelder hinzufügen (Add Log Fields)
- Auskommentieren/Deaktivierte Aktivitäten
- Kommentar (Comment)
- Change Type
- Protokollmeldung
- Protokollfelder entfernen (Remove Log Fields)
- Com-Methode aufrufen (Invoke Com Method)
- Wert formatieren (Format Value)
- Datentabelle nachschlagen (Lookup Data Table)
- Datentabelle filtern (Filter Data Table)
- Datentabelle sortieren (Sort Data Table)
- Doppelte Zeilen entfernen (Remove Duplicate Rows)
- Datentabellen verbinden (Join Data Tables)
- Berichtsstatus
- Zeile anhängen (Append Line)
- Compress/Zip Files
- Datei kopieren (Copy File)
- Copy Folder
- Create Folder
- Datei erstellen (Create File)
- Löschen
- Datei vorhanden (File Exists)
- Folder Exists
- Extract/Unzip Files
- Wait for Download
- Dateiänderungsauslöser (File Change Trigger)
- For Each File In Folder
- For Each Folder in Folder
- Delete File
- Delete Folder
- Datei verschieben (Move File)
- Move Folder
- Rename Folder
- Rename File
- Pfad vorhanden (Path Exists)
- Textdatei lesen (Read Text File)
- Textdatei schreiben (Write Text File)
- Get File Info
- Get Folder Info
- Prozesse erhalten (Get Processes)
- Benutzername/Kennwort abrufen
- Prozess beenden (Kill Process)
- Signal (Beep)
- Umgebungsordner erhalten (Get Environment Folder)
- Umgebungsvariable erhalten (Get Environment Variable)
- Power Shell aufrufen (Invoke Power Shell)
- Eingabedialog (Input Dialog)
- Nachrichtenbox (Message Box)
- Browse for file
- Nach Ordner suchen
- Invoke VBScript
- Process End Trigger
- Process Start Trigger
- File Change Trigger v3
- Trigger-Scope
- Repeat Number Of Times
- Text in Groß-/Kleinschreibung
- Set Environment Variable
- Für jede/n (For Each)
- Break / Exit Loop
- Bereich erneut versuchen (Retry Scope)
- Auf wahr prüfen (Check True)
- Auf falsch prüfen (Check False)
- Workflow Placeholder
- Workflow-Datei aufrufen (Invoke Workflow File)
- Interaktiven Workflow starten (Launch Workflow Interactive)
- Code aufrufen (Invoke Code)
- Continue / Skip Current
- Multiple Assign
- Prozess abrufen
- Run Parallel Process
- While
- Ausführen während (Do While)
- Repeat Number Of Times
- Alarm auslösen (Raise Alert)
- Orchestrator HTTP-Anfrage (Orchestrator HTTP Request)
- Element erhalten (Get Asset)
- Get Credential / Get Orchestrator Credential
- Element einstellen (Set Asset)
- Anmeldedaten einstellen (Set Credential)
- Jobs erhalten (Get Jobs)
- Get Current Job Info
- Job starten (Start Job)
- Job anhalten (Stop Job)
- Warteschlangenobjekt hinzufügen (Add Queue Item)
- Transaktionsobjekt hinzufügen (Add Transaction Item)
- Warteschlangenobjekt löschen (Delete Queue Items)
- Warteschlangenobjekte erhalten (Get Queue Items)
- Transaktionsobjekt erhalten (Get Transaction Item)
- Transaktionsobjekt verschieben (Postpone Transaction Item)
- Transaktionsfortschritt setzen (Set Transaction Progress)
- Transaktionsfortschritt einstellen (Set Transaction Status)
- Soll anhalten (Should Stop)
- Warteschlangenobjekt (Wait Queue Item)
- Massenhaftes Hinzufügen von Warteschlangenobjekten
- Speichertext schreiben
- Speicherdatei hochladen
- Speicherdateien auflisten
- Speichertext lesen
- Speicherdatei herunterladen
- Speicherdatei löschen
- Benutzerdefinierte Eingabe (Custom Input)
- Append Item to Collection
- Build Collection
- Collection to DataTable
- Exists In Collection
- Filter Collection
- Merge Collections
- Remove From Collection
- Reset Timer
- Resume Timer
- Start Timer
- Stop Timer
- Timeout Scope
- Manual Trigger
- When New Item Added to Queue
- Lokale Trigger anhalten
- Lokale Trigger ausführen
- Trigger wiederholen
- Zeit-Trigger
- Lokalen Trigger deaktivieren
- Lokalen Trigger aktivieren
- Benachrichtigung über geänderte globale Variable
- Trigger für globale Variablenänderung
- Text extrahieren
- Suchen und ersetzen
- Zurückgeben
- Extract Date and Time from Text
- Groß-/Kleinschreibung für Text ändern
- Add or Subtract from Date
- Datei von URL herunterladen
- Datum als Text formatieren
- Text aufteilen
- Text kombinieren
- Datenzeile hinzufügen (Add Data Row)
- AddQueueItem
- Transaktionsobjekt hinzufügen (Add Transaction Item)
- Zeile anhängen
- BulkAddQueueItems
- Datentabelle leeren (Clear Data Table)
- ZIP-Dateien komprimieren
- Datei kopieren
- Create File
- Create Folder
- Delete File or Folder
- Delete Queue Items
- Speicherdatei löschen
- Speicherdatei herunterladen
- ExtractUnzipFiles
- Datentabelle filtern (Filter Data Table)
- Element erhalten (Get Asset)
- Anmeldedaten erhalten (Get Credential)
- GetJobs
- Get Queue Item
- GetQueueItems
- Ressource für lokalen Pfad abrufen
- Zeilenobjekt erhalten (Get Row Item)
- Transaktionsobjekt erhalten (Get Transaction Item)
- Prozess abrufen
- Datentabellen verbinden (Join Data Tables)
- Speicherdateien auflisten
- Datentabelle nachschlagen (Lookup Data Table)
- Datentabelle zusammenführen (Merge Data Table)
- Move File
- Orchestrator HTTP-Anfrage (Orchestrator HTTP Request)
- OutputDataTable
- Pfad vorhanden (Path Exists)
- Transaktionsobjekt verschieben (Postpone Transaction Item)
- Speichertext lesen
- Textdatei lesen
- Datenspalte entfernen (Remove Data Column)
- Doppelte Zeilen entfernen (Remove Duplicate Rows)
- Ersetzen (Replace)
- Element einstellen (Set Asset)
- Anmeldedaten einstellen (Set Credential)
- SetTransactionProgress
- Transaktionsfortschritt einstellen (Set Transaction Status)
- Datentabelle sortieren (Sort Data Table)
- Job starten (StartJob)
- Job anhalten (StopJob)
- Update Row Item
- Speicherdatei hochladen
- Warteschlangenobjekt (Wait Queue Item)
- Speichertext schreiben
- Textdatei schreiben
- Tests
- Versionshinweise
- Projektkompatibilität
- Über das Testing-Aktivitätspaket
- Testfallname nicht eindeutig innerhalb des Projekts
- Verstoß gegen Namenskonvention für Testfälle
- Fehlende Überprüfungen innerhalb des Testfalls
- Nicht getestete Workflows
- Test Manager verbunden
- Nicht verwendete Pseudo-Objekte
- Testfall ohne Anmerkungen
- Testfall/Workflow zu komplex
- Testfall enthält zu viele Verzweigungen.
- Projekteinstellungen
- Add Test Data Queue Item
- Adresse
- Attach Document
- Bulk Add Test Data Queue Items
- Delete Test Data Queue Items
- Get Test Data Queue Item
- Get Test Data Queue Items
- Gegebener Name
- Nachname
- Random Date
- Zufällige Zahl
- Random String
- Random Value
- Verify Control Attribute
- Verify Expression
- Verify Expression with Operator
- Verify Range
- Adresse
- Add Test Data Queue Item
- Attach Document
- Bulk Add Test Data Queue Items
- Delete Test Data Queue Items
- Get Test Data Queue Item
- Get Test Data Queue Items
- GivenName
- Nachname
- Random Date
- Zufällige Zahl
- Random String
- Random Value
- VerifyAreEqual
- VerifyAreNotEqual
- VerifyContains
- Verify Expression
- Verify Expression with Operator
- VerifyIsGreater
- VerifyIsGreaterOrEqual
- VerifyIsLess
- VerifyIsLessOrEqual
- VerifyIsRegexMatch
- Verify Range
- Workflow-Ereignisse
- Workflow Foundation
- Über das Workflow Foundation-Aktivitätspaket
- Assign / Set Variable Value
- Verzögerung (Delay)
- Wenn (If)
- Andernfalls wenn
- Sequence / Group
- Umschalten (Switch)
- Flussentscheidung (Flow Decision)
- Fluss umschalten (Flow Switch)
- Flowchart
- Try Catch
- State Machine
- Status (State)
- Übergang (Transition)
- Endzustand (Final State)
- Single Excel Process Scope
- No Persist Scope
- Cancellation Scope
- Zeile schreiben (Write Line)
Erweiterte Logik
Auf der Registerkarte Logik des Formular-Designers können Sie Bedingungen und erweiterte Logikskripts erstellen, die den Status oder das Verhalten der ausgewählten Formularkomponente ändern können.
Mit erweiterter Logik können Sie die Steuerelemente, das Aussehen und das Verhalten einer Formularkomponente dynamisch ändern.
Eine Formularlogik besteht aus zwei Teilen: dem Trigger und der Aktion.
Trigger Der logische Trigger ist die Bedingung, unter der die Actions ausgeführt werden. Möglicherweise möchten Sie beispielsweise ein bestimmtes Formularfeld nur anzeigen, wenn eine Kontrollkästchenoption ausgewählt ist. In diesem Fall ist die Kontrollkästchenoption der Trigger, und das Anzeigen des Formularfelds ist die Actions.
Es gibt vier Arten von Logiktriggern:
Triggertyp |
Beschreibung |
Beispiel |
---|---|---|
Simple |
Sie definieren eine auslösende Formularkomponente und einen Wert. | |
Javascript |
Sie stellen eine JavaScript-Logik für eine Formularkomponente oder Formulardaten bereit. Verwenden Sie die JavaScript-Syntax, um komplexe Logik zu erstellen, z. B. Schleifen- oder dynamisches Verhalten. | |
JSON-Logik |
Sie stellen eine JSON-Logik für eine Formularkomponente oder Formulardaten bereit. Empfohlen in Fällen, in denen JavaScript nicht zulässig ist. Schleifen oder dynamische Verhaltensweisen können nicht unterstützt werden. | |
Ereignis (Event) |
Sie definieren ein Komponentenereignis, das, sobald es von der entsprechenden Komponente ausgegeben wurde, die gewünschte Aktion auslöst. |
Aktion
Die logische Aktion ist das Verhalten der Formularkomponente, das basierend auf den von Ihnen festgelegten logischen Bedingungen (z. B. dem Trigger) erfolgen soll. Sie können beispielsweise eine Schaltfläche für Benutzer eines bestimmten Alters aktivieren. In diesem Fall ist die Altersgruppe der Auslöser und das Aktivieren der Schaltfläche die Aktion.
Es gibt vier Arten von Logikaktionen:
Aktionstyp |
Beschreibung |
Beispiel |
---|---|---|
Eigenschaften |
Der Trigger ändert eine der verfügbaren Komponenteneigenschaften, z. B. Tooltip, Beschreibung, CSS-Klasse usw. Die verfügbaren Eigenschaften hängen vom Typ der auslösenden Komponente ab. | |
Wert |
Der Trigger ändert den Wert der entsprechenden Komponente. Die Aktion muss mit JavaScript-Syntax definiert werden. | |
Komponentenschema zusammenführen |
Der Trigger ändert die Komponentenschemaparameter, die in der Komponenten-JSON gefunden werden. Um die Schemaparameter anzuzeigen, die Sie ändern können, zeigen Sie mit der Maus auf die entsprechende Komponente und klicken Sie auf JSON bearbeiten. Sie können mehrere Parameter innerhalb einer Aktion ändern. | |
Benutzerdefinierte Aktion |
Sie definieren eine benutzerdefinierte Aktion mithilfe von JavaScript-Syntax, genauso wie Sie den JavaScript-Triggertyp definieren würden. |
So konfigurieren Sie eine erweiterte Logik:
- Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
- Ziehen Sie Komponenten per Drag-and-drop in Ihr Formular. Achten Sie auf deren Feldschlüssel, da Sie diese in Ihrer erweiterten Logik verwenden können.
- Navigieren Sie zur Registerkarte Logik der Komponente, die Sie ändern möchten (d. h. der Komponente, für die die Actions stattfinden sollen).
- Klicken Sie auf +Logik hinzufügen. Sie können beliebig viele Logiken hinzufügen.
- Geben Sie einen Namen für Ihre Logik ein.
- Wählen Sie im Bereich Trigger den Triggertyp aus, den Sie in Ihrer Logik verwenden möchten. Die verfügbaren Typen sind Simple, Javascript, JSON Logicund Event. Legen Sie die gewünschten Bedingungen fest, um die Aktion auszulösen.
- Klicken Sie im Bereich Actions auf + Actions. Sie können beliebig viele Actions hinzufügen, die alle von der Logik ausgelöst werden, die sie gruppiert.
- Geben Sie einen Namen für Ihre Aktion ein.
- Wählen Sie den Aktionstyp aus, den Sie verwenden möchten. Die verfügbaren Typen sind Eigenschaft, Wert, Komponentenschema zusammenführenund benutzerdefinierte Aktion. Legen Sie den gewünschten Effekt Ihrer Aktion fest.
- Wenn Sie fertig sind, klicken Sie auf Actionsspeichern.
- Um Ihre Logik zu speichern, klicken Sie auf Logik speichern.
Das obige Verfahren gilt allgemein für jeden Trigger- oder Aktionstyp. Ein detailliertes Verfahren finden Sie in den spezifischen Tutorials, die Beispiele für die einzelnen Trigger- und Aktionstypen enthalten.
- Trigger-Typ: JavaScript und Actions : Wert Dynamisches Summieren von zwei Textfeldern
- Trigger-Typ: Einfach und Actions : Eigenschaft Dynamisches Ausblenden eines Felds
- Trigger-Typ: Einfach und Aktionstyp: Zusammenführen Komponentenschema Dynamisches Ändern der Actions
- Trigger-Typ: Ereignis- und Aktionstyp: Benutzerdefinierte Aktion Festlegen eines Formularfelds auf Standardwert mithilfe von Ereignissen
- Trigger-Typ: JSON Logik und Actions : Eigenschaft Anzeigen einer Komponente basierend auf Benutzereingaben
Triggertyp: JavaScript Aktionstyp: Wert
Diese erweiterte Logik fasst zwei Textfelder basierend auf der Bedingung zusammen, dass der Benutzer mit den entsprechenden Textfeldern interagiert.
- Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
- Ziehen Sie drei Textfeldkomponenten in Ihr Formular.
-
Nennen Sie zwei der Textfeldkomponenten als
A
undB
und die dritte alsTotal
. Achten Sie auf deren Feldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.Optional können Sie die TextfeldkomponenteTotal
als Deaktiviertfestlegen, sodass Geschäftsbenutzer nicht damit interagieren können. - Wechseln Sie zur Registerkarte Logik der Feldkomponente
Total
. - Fügen Sie eine Logik hinzu und nennen Sie sie „dynamische Summe“.
-
Wählen Sie den JavaScript- Triggertyp aus und geben Sie das folgende Skript im Abschnitt Textbereich ein:
result = true; return result;
result = true; return result;Das obige Snippet erkennt Änderungen in den Textfeldern, d. h. der Benutzer interagiert mit den Textfeldern, und löst die Actions aus, um die Felder zu addieren.
- Fügen Sie eine Aktion hinzu und nennen Sie sie „a+b“.
-
Wählen Sie den Aktionstyp Wert aus, und geben Sie das folgende Skript im Abschnitt Wert (Javascript) ein:
result = (+data.a) + (+data.b); return result;
result = (+data.a) + (+data.b); return result;Ersetzen Siea
undb
durch die Feldschlüsselwerte der Textfeldkomponenten. - Speichern Sie die Aktion und die Logik.
- Speichern Sie die Komponente.
A
und B
interagiert, wird das Feld Total
automatisch ausgefüllt und zeigt die Summe von A und B an.
Trigger-Typ: Einfach Actions : Eigenschaft
Child field
) aus, wenn der Benutzer „hide“ in ein anderes Formularfeld (z. B. Parent field
) eingibt.
- Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
- Ziehen Sie zwei Textfeldkomponenten und legen Sie sie ab.
- Benennen Sie eine der Textfeldkomponenten als
Parent field
und die andere alsChild field
. Achten Sie auf deren Feldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden. - Wechseln Sie zur Registerkarte Logik der Komponente
Child field
. - Fügen Sie eine Logik hinzu und nennen Sie sie „Eingabe ausblenden“.
-
Wählen Sie den Triggertyp Einfach aus.
6.1 Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die OptionParent field ({parentField_field_key})
aus.6.2 Geben Sie im Feld Hat den Wert „hide“ ein.
Die obige Konfiguration erkennt, ob der Benutzer die Zeichenfolge „hide“ in das übergeordnete Feld eingibt, und löst die Aktion aus, um das untergeordnete Feld auszublenden.
- Fügen Sie eine Aktion hinzu und nennen Sie sie „hide“.
-
Wählen Sie den Eigenschaftsaktionstyp aus.
8.1 Wählen Sie im Dropdown-Menü Komponenteneigenschaft die Option Ausgeblendetaus.
8.2 Wählen Sie im Dropdown-Menü Status festlegen die Option Trueaus.
- Speichern Sie die Aktion und die Logik.
- Speichern Sie die Komponente.
Wenn der Geschäftsbenutzer zur Laufzeit „hide“ in das übergeordnete Feld eingibt, wird das untergeordnete Feld ausgeblendet.
Trigger-Typ: Einfach Actions : Komponentenschema . zusammenführen
Diese erweiterte Logik ändert die Beschriftungsfarbe einer Textfeldkomponente, wenn der Benutzer die gewünschte Farbe aus einer Liste auswählt. Die Änderung wird mithilfe einer benutzerdefinierten CSS-Datei angewendet.
Voraussetzungen:
Erstellen Sie eine CSS-Datei, die die neue Farbe für die Textfeldbeschriftung enthält, und verweisen Sie in der Aktivität Create Form in der Eigenschaft LocalCSSFilePath darauf .
Das folgende CSS-Snippet enthält beispielsweise eine Klasse, die die Beschriftungsfarbe auf Grün oder Rot festlegt:
.textFieldLabel-green
{
color : green;
}
.textFieldLabel-red
{
color : red;
}
.textFieldLabel-green
{
color : green;
}
.textFieldLabel-red
{
color : red;
}
Nachdem Sie in den Eigenschaften zum Erstellen von Formularen auf die CSS-Datei verwiesen haben, entwerfen Sie Ihr Formular mit den folgenden Schritten:
- Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
- Ziehen Sie eine Textfeldkomponente und eine Radiokomponente per Drag & Drop. Achten Sie auf deren Feldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.
-
Legen Sie auf der Registerkarte Anzeige der Textfeldkomponente eine standardmäßige benutzerdefinierte CSS-Klassefest. Um beispielsweise Rot als Standardfarbe für das Textfeld festzulegen, verwenden Sie die
textFieldLabel-red
-Klasse. Die Klasse muss in der CSS-Datei anhand der oben dokumentierten Voraussetzungen definiert werden. - Für die Komponente Radio fügen Sie zwei Werte für die Farben
green
undred
hinzu. - Wechseln Sie zur Registerkarte Logik der Komponente Textfeld .
- Fügen Sie eine Logik hinzu und nennen Sie sie „Farbauswahl“.
-
Wählen Sie den Triggertyp Einfach aus.
7.1 Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die OptionRadio ({radio_field_key})
aus.7.2 Geben Sie im Feld Hat den Wert „grün“ ein.
Die obige Konfiguration erkennt, ob der Benutzer „Grün“ aus den Optionsfeldern auswählt, und löst die Aktion aus, um die Farbe der Textfeldbeschriftung zu ändern.
- Fügen Sie eine Aktion hinzu und nennen Sie sie „Farbe mit CSS ändern“.
-
Wählen Sie den Aktionstyp Schemakomponente zusammenführen aus und geben Sie das folgende Snippet ein:
return { customClass: "textFieldLabel-green" }
return { customClass: "textFieldLabel-green" } - Speichern Sie die Aktion und die Logik.
- Speichern Sie die Komponente.
Wenn der Geschäftsbenutzer zur Laufzeit das Optionsfeld „grün“ auswählt, wird die Beschriftung des Textfelds grün. Wenn der Benutzer das „rote“ Optionsfeld auswählt, wird die Beschriftung des Textfelds rot.
Triggertyp: Ereignis Aktionstyp: Benutzerdefinierte Aktion
Diese erweiterte Logik ändert den Inhalt eines Textfelds, wenn der Benutzer auf eine Schaltfläche klickt. Die Schaltfläche gibt ein Ereignis aus, auf dessen Grundlage sich der Inhalt des Textfelds in einen Standardtext ändert.
- Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
- Ziehen Sie eine Textfeldkomponente und eine Schaltflächenkomponente per Drag & Drop. Achten Sie auf die Komponentenfeldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.
-
Auf der Registerkarte Anzeige der Schaltflächenkomponente:
3.1. Beschriften Sie die Schaltflächenkomponente alsChange value to "Default"
3.2. Actions als Klick festlegen
3.3. Aktivieren Sie das Kontrollkästchen Für lokales Update verwenden.
3.4 Geben Sie das folgende Snippet im Abschnitt Datenlogik aktualisieren ein. Dadurch wird jedes Mal das EreignisresetTextField
ausgegeben, wenn der Benutzer auf die Schaltfläche klickt.instance.emit('resetTextField', {});
instance.emit('resetTextField', {});3.5. Speichern Sie die Schaltflächenkomponente.
- Wechseln Sie zur Registerkarte Logik der Textfeldkomponente.
- Fügen Sie eine Logik hinzu, und nennen Sie sie „reset“.
- Wählen Sie den Ereignistriggertyp aus.
-
Geben Sie im Feld Ereignisname den Namen des Ereignisses ein, das beim Klicken auf die Schaltfläche ausgegeben wird. (d. h.
resetTextField
).Die obige Konfiguration erkennt, wenn der Benutzer auf die SchaltflächeChange value to "Default"
klickt, und ersetzt den vorhandenen Inhalt des Textfelds durch „Standard“. - Fügen Sie eine Aktion hinzu und nennen Sie sie „Standard“.
- Wählen Sie den Aktionstyp Benutzerdefinierte Actions Actions .
-
Geben Sie das folgende Snippet in den Abschnitt Benutzerdefinierte Aktion (Javascript) ein.
return "Default"
return "Default" - Speichern Sie die Aktion und die Logik.
- Speichern Sie die Komponente.
Change value to "Default"
klickt, wird das Ereignis resetTextField
ausgegeben. Der Trigger überwacht das Ereignis und ersetzt den vorhandenen Textfeldinhalt durch „Standard“.
Trigger-Typ: JSON Logik Actions : Eigenschaft
Diese erweiterte Logik zeigt den Inhalt einer HTML-Komponente (in diesem Fall ein Bild) an, wenn der Benutzer den erforderlichen Text eingibt.
- Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
- Ziehen Sie eine Textfeldkomponente und eine HTML-Elementkomponente per Drag & Drop. Achten Sie auf die Komponentenfeldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.
-
Auf der Registerkarte Anzeige der Textfeldkomponente:
3.1. Beschriften Sie die Textfeldkomponente mit „Type „Show Me““.
3.2. Fügen Sie die Beschreibung „Muss eine genaue Übereinstimmung sein (Groß-/Kleinschreibung beachten)“ hinzu, um anzugeben, dass Benutzer den Text wie erforderlich eingeben müssen.
3.3. Speichern Sie die Textfeldkomponente.
-
Auf der Registerkarte Anzeige der HTML-Elementkomponente:
4.1. Verweisen Sie im Abschnitt Inhalt auf das Bild, das Sie anzeigen möchten. Beispiel:<img href="https://picsum.photos/200/300" />
.4.2. Aktivieren Sie das Kontrollkästchen Ausgeblendet , um das Bild standardmäßig für die Anzeige auszublenden. 4.3. Speichern Sie die HTML-Elementkomponente.
- Wechseln Sie zur Registerkarte Logik der HTML-Elementkomponente.
- Fügen Sie eine Logik hinzu und nennen Sie sie „Benutzereingabe“.
- Wählen Sie den Triggertyp „ JSON-Logik “ aus.
-
Geben Sie das folgende Snippet im Abschnitt JSON-Logik ein und ersetzen Sie
{text_field_component_field_key}
durch den Feldschlüsselwert, den Sie für Ihre Textfeldkomponente festgelegt haben.{ "===": [ { "var": "data.{text_field_component_field_key}" }, "Show me" ] }
{ "===": [ { "var": "data.{text_field_component_field_key}" }, "Show me" ] }Die obige Konfiguration erkennt, wenn der Benutzer eingibt „Zeigen“ und erst dann legt der Wert der Ausgeblendete Eigenschaft des HTML-Elements auf False fest, wodurch der entsprechende HTML-Inhalt angezeigt wird.
- Fügen Sie eine Aktion hinzu und nennen Sie sie „Bild anzeigen“.
-
Wählen Sie den Eigenschaftsaktionstyp aus.
10.1. Wählen Sie im Dropdownmenü Komponenteneigenschaft die Option Ausgeblendetaus.
10.2. Wählen Sie im Dropdownmenü „ Set State “ die Option „ False“ aus.
- Speichern Sie die Aktion und die Logik.
- Speichern Sie die Komponente.
Wenn der Benutzer zur Laufzeit den erforderlichen Text in das Textfeld eingibt, zeigt das Formular den HTML-Inhalt an.
Laden Sie das XAML-Beispielherunter, um den vollständigen Workflow zu überprüfen oder um eine zukünftige Referenz zu haben