Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Referenz zu den Komponenten

In diesem Thema werden die einzelnen Komponenten von App Studio, ihre Eigenschaften und Konfigurationsbeispiele beschrieben.

Allgemeine Komponenteneigenschaften

In diesem Abschnitt werden die allgemeinen Eigenschaften und Funktionen beschrieben, die von mehreren Komponenten im Application Studio gemeinsam genutzt werden. Die spezifischen Implementierungsdetails und Anwendungsfälle für jeden Eigenschaftstyp können je nach Komponente variieren, aber das allgemeine Konzept dieser Eigenschaften bleibt in App Studio konsistent.

Name

Für jede Komponente wird ein Standardname generiert. Sie können ihn jedoch bearbeiten, um jeder Komponente einen eindeutigen Namen zuzuweisen. Sie verwenden diesen Namen, um von anderen Komponenten oder Ausdrücken auf derselben Seite aus auf die Komponente und ihre Daten zu verweisen. Einschränkung: Der Komponentenname darf keine Leerzeichen enthalten. Er darf nur Buchstaben, Zahlen, Unterstriche und Dollarzeichen enthalten. Beispiele: userNameInput, ordersTable, metricCard1.

Primärwert, Sekundärwert und Wert

Viele Komponenten im Application Studio bieten Felder zum Angeben von Werten oder Ausdrücken, die den Inhalt oder die Daten bestimmen, die in der Komponente angezeigt werden. Diese Felder werden je nach Komponententyp und Zweck häufig als Primary value oder einfach Value bezeichnet. Secondary value

Das Primary value Feld wird in der Regel verwendet, um den Hauptwert, den Datenpunkt oder den Inhalt zu definieren, der in der Komponente gut sichtbar angezeigt werden soll.

Das Secondary value Feld wird, sofern verfügbar, verwendet, um neben dem Primärwert einen zusätzlichen oder unterstützenden Wert oder Informationen anzuzeigen.

In dem Value Feld können Sie den Wert oder Ausdruck angeben, der in der Komponente angezeigt werden soll.

Diese Felder unterstützen sowohl statische Texteingaben als auch dynamische Ausdrücke. Mithilfe von Ausdrücken können Sie auf Daten aus anderen Komponenten, Datenquellen oder Variablen in Ihrer Anwendung verweisen und so eine dynamische und datengesteuerte Inhaltsanzeige ermöglichen.

Syntax für Ausdrücke

Die Syntax für die Eingabe von Ausdrücken in diese Felder folgt einem konsistenten Muster:

{{expression}}

Wo expression ist ein gültiger Ausdruck, der den gewünschten Wert oder die gewünschten Daten ergibt, die Sie anzeigen möchten.

Beispiel: Statischer Text

Beispiele: Ausdrücke

Mithilfe dieser Ausdrucksfelder können Sie dynamische und datengesteuerte Inhalte in Ihrer Anwendung erstellen, sodass Sie Informationen anzeigen können, die auf den Kontext des Benutzers oder den Status Ihrer Anwendung zugeschnitten sind. Dies ermöglicht eine persönlichere und interaktivere Benutzererfahrung.

Label (Bezeichnung)

Mit der Label-Eigenschaft können Sie eine Überschrift oder einen Titel für die Komponente angeben. Diese Bezeichnung wird in der Regel neben oder über der Komponente angezeigt, sodass Benutzer ihren Zweck besser verstehen.

Sie können sowohl statischen Text als auch Ausdrücke verwenden, um die Bezeichnung zu definieren.

Beispiel: Statischer Text

Wenn Sie den Text „Vorname“ in das Feld „Bezeichnung“ eingeben, zeigt die Komponente „Vorname“ als Bezeichnung an.

Beispiel: Ausdrücke

Beispiel: Einzelhandelsgeschäft

Im folgenden Beispiel wird das Etikett für jeden Benutzer personalisiert, sodass sich die Benutzeroberfläche besser auf den Einzelnen zugeschnitten anfühlt:

{{currentUser.firstName}} {{currentUser.lastName}}'s Account

Beispiel: SaaS-Projektmanagement

Im folgenden Beispiel werden Daten aus dem ausgewählten Projekt abgerufen, um kontextspezifische Bezeichnungen bereitzustellen, sodass Benutzer sich in der Anwendung besser orientieren können:

Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}

Beispiel: Gesundheitsklinik

Das folgende Beispiel verweist auf das Profil des aktuellen Benutzers und die Informationen des Arztes und bietet so den Patienten ein persönlicheres Erlebnis.

Dr. {{ui.doctorProfileTable.data.firstName}}
       {{ui.doctorProfileTable.data.lastName}}

Placeholder

Mit der Placeholder-Eigenschaft können Sie einen Hinweis- oder Hinweistext angeben, der in der Komponente angezeigt wird, wenn diese leer ist. Dies kann Benutzern helfen, das erwartete Eingabeformat zu verstehen, oder zusätzlichen Kontext bereitstellen.

Sie können sowohl statischen Text als auch Ausdrücke verwenden, um den Platzhalter zu definieren.

Beispiel: Statischer Text

Wenn Sie den Text Enter your name in das Platzhalterfeld eingeben, wird die Komponente Enter your name als Platzhaltertext angezeigt.

Beispiel: Ausdrücke

Beispiel: Finanzdienstleistungen

Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} accountIn diesen Beispielen werden Daten aus dem ausgewählten Konto abgerufen, um relevante Eingabeaufforderungen anzuzeigen, sodass die Benutzeroberfläche für Bankkunden intuitiv ist.

Beispiel: E-commerce

Enter the coupon code for {{ui.cartTable.data.currency}} totalDer Platzhalter wird hier basierend auf dem Inhalt des Warenkorbs des Benutzers dynamisch aktualisiert und sorgt so für ein reibungsloses Checkout-Erlebnis.

Beispiel: Gesundheitsklinik

Enter your {{ui.patientProfile.data.age}}-year-old patient's symptomsMithilfe eines Ausdrucks, der auf das Alter des Patienten verweist, kann die Anwendung einen persönlicheren und hilfreicheren Platzhalter erstellen.

Quelle

Mit der Eigenschaft Source können Sie die Datenquelle für eine Komponente auswählen. Nach der Auswahl können Sie aus den folgenden Datenquellentypen wählen: entityexpression, oderautomation.

Entität

Wenn Sie Entität als Datenquelle auswählen, können Sie die Komponente mit einer vorhandenen Datenentität oder einem Modell in Ihrer Anwendung verbinden. Dies ist nützlich, wenn Sie über eine klar definierte Datenstruktur oder ein klar definiertes Schema verfügen, das Sie in Ihrer gesamten Anwendung nutzen möchten.

Wann sollte die Entitätsdatenquelle verwendet werden:

Auswahl einer Abfrage für eine Entität

Manchmal möchten Sie möglicherweise eine Komponente mit einer bestimmten Abfrage verbinden, die Daten von einer Entität und nicht von der gesamten Entität abruft. In der Entitätsdatenquelle haben Sie die Möglichkeit, aus vorhandenen Abfragen auszuwählen oder eine neue zu erstellen.

Indem Sie eine Abfrage auswählen, können Sie:

Zum Beispiel, wenn Sie in Ihrer Anwendung eine Customers Entität mit Feldern wie NameEmail, und PhoneNumber haben. Sie können eine Tabellenkomponente mit dieser Entität verbinden und eine vordefinierte ActiveCustomers Datenaktion auswählen, die die Kunden nach ihrem Status filtert. Auf diese Weise können Sie nur die aktiven Kunden in der Tabelle anzeigen und nicht die gesamte Kundendatenbank.

Hinzufügen von Parametern zu einer Entitätsdatenquelle

Wenn Sie eine Entität als Datenquelle verwenden, können Sie der Komponente auch Parameter hinzufügen. Diese Parameter können verwendet werden, um die in der Komponente angezeigten Daten zu filtern, zu sortieren oder zu transformieren.

Zum Beispiel, wenn Sie eine Products Entität mit Feldern wieName, DescriptionPrice, und habenCategory. Sie können einer Tabellenkomponentecategory, die die Produktliste anzeigt, einen benannten Parameter hinzufügen. Wenn Benutzer eine Kategorie aus einer Dropdownliste auswählen, wird die Tabelle automatisch aktualisiert, sodass nur die Produkte angezeigt werden, die zur ausgewählten Kategorie gehören. Dabei wird der {{params.category}} Ausdruck in der Datenaktion verwendet.

Expression

Wählen Sie Ausdruck als Datenquelle aus, um benutzerdefinierte Ausdrücke oder Berechnungen einzugeben, um die Daten für die Komponente dynamisch zu generieren. Dies ist nützlich, wenn Sie Transformationen durchführen, Daten aus mehreren Quellen kombinieren oder Daten auf der Grundlage einer bestimmten Geschäftslogik generieren müssen.

Wann sollte die Expression-Datenquelle verwendet werden:

Wenn Sie beispielsweise eine Metrics Komponente haben, die den Gesamtumsatz für den aktuellen Monat anzeigen muss, können Sie einen Ausdruck wie den folgenden verwenden, um den monatlichen Umsatz zu berechnen und anzuzeigen:

{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}

Automatisierung

Wählen Sie Automation als Datenquelle aus, um die Komponente mit einer vorhandenen Automatisierung oder einem Workflow in Ihrer Anwendung zu verbinden. Dies ist nützlich, wenn die Daten oder Funktionen für die Komponente als Teil eines bestimmten Prozesses oder Workflows generiert oder aktualisiert werden.

Wann sollte die Automatisierungsdatenquelle verwendet werden:

Zum Beispiel, wenn Sie eine Stepflow-Komponente haben, die Benutzer durch einen Bewerbungsprozess führt. Die Stepflow-Komponente kann mit einer Automatisierung verbunden werden, die die Einreichung von Bewerbungen, Hintergrundprüfungen und Angebotserstellung abwickelt. Während die Automatisierung diese Schritte durchläuft, kann die Stepflow-Komponente dynamisch aktualisiert werden, um den aktuellen Status der Bewerbung widerzuspiegeln.

Durch die sorgfältige Auswahl der geeigneten Datenquelle für jede Komponente können Sie sicherstellen, dass die Benutzeroberfläche Ihrer Anwendung mit den richtigen Daten und der richtigen Logik ausgestattet ist, um Ihren Benutzern ein nahtloses und ansprechendes Erlebnis zu bieten.

Sichtbar wenn

Verwenden Sie die Eigenschaft Sichtbar wenn, um Komponenten oder Elemente basierend auf bestimmten Bedingungen oder Datenwerten ein- oder auszublenden. Dies ist nützlich, wenn Sie die Sichtbarkeit bestimmter Teile der Benutzeroberfläche Ihrer Anwendung dynamisch steuern möchten.

Die Eigenschaft Visible if verwendet die folgende Syntax:

{{expression ? true : false}}

oder

{{expression}}

Wo expression ist ein boolescher Ausdruck, der entweder als oder ausgewertet wird. true false

Wenn der Ausdruck als ausgewertet wirdtrue, ist die Komponente sichtbar. Wenn der Ausdruck als ausgewertet wirdfalse, wird die Komponente ausgeblendet. Der Ausdruck kann auf Werte aus anderen Komponenten, Datenquellen oder Variablen in Ihrer Anwendung verweisen.

Sichtbar, wenn Beispiele für Ausdrücke

Beispiel: Ein- oder Ausblenden eines Passwort-Eingabefeldes auf der Grundlage einer E-Mail-Eingabe

Stellen Sie sich vor, Sie haben ein Anmeldeformular mit einem E-Mail-Eingabefeld und einem Passwort-Eingabefeld. Sie möchten das Passwort-Eingabefeld nur anzeigen, wenn der Benutzer eine E-Mail-Adresse eingegeben hat. Sie können den folgenden Ausdruck Visible if verwenden:

{{ui.emailInput.value !== ""}}

Dieser Ausdruck prüft, ob der Wert der emailInput Komponente keine leere Zeichenfolge ist. Wenn der Benutzer eine E-Mail-Adresse eingegeben hat, wird der Ausdruck wie folgt ausgewertettrue, und das Kennworteingabefeld wird angezeigt. Wenn das E-Mail-Feld leer ist, wird der Ausdruck wie folgt ausgewertetfalse, und das Kennworteingabefeld wird ausgeblendet.

Beispiel: Anzeige zusätzlicher Formularfelder auf der Grundlage einer Dropdownauswahl

Angenommen, Sie haben ein Formular, in dem Benutzer eine Kategorie aus einer Dropdownliste auswählen können. Je nach ausgewählter Kategorie möchten Sie zusätzliche Formularfelder ein- oder ausblenden, um spezifischere Informationen zu sammeln.

Wenn der Benutzer beispielsweise die Products Kategorie auswählt, können Sie den folgenden Ausdruck verwenden, um ein zusätzliches Product Details Feld einzublenden:

{{ui.categoryDropdown.value === "Products"}}

Wenn der Benutzer die Consulting Kategorien Services oder auswählt, können Sie diesen Ausdruck verwenden, um eine andere Gruppe zusätzlicher Felder anzuzeigen:

{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}

Beispiele: Andere

Um die Komponente sichtbar zu machen, wenn der Wert der textInput1 Komponente keine leere Zeichenfolge ist:

{{ui.textInput1.value === "" ? false : true}}

Um die Komponente immer sichtbar zu machen:

{{true}}

Um die Komponente sichtbar zu machen, wenn der Wert der emailInput Komponente keine leere Zeichenfolge ist:

{{ui.emailInput.value !== ""}}

Deaktiviert wenn

Die Funktion „Deaktiviert, wenn“ ermöglicht es Ihnen, eine Komponente abhängig von bestimmten Bedingungen oder Datenwerten bedingt zu aktivieren oder zu deaktivieren. Dies wird mithilfe der Eigenschaft Disabled if erreicht, die einen booleschen Ausdruck akzeptiert, der bestimmt, ob die Komponente aktiviert oder deaktiviert werden soll.

Die Eigenschaft Disabled if verwendet die folgende Syntax:

{{expression ? true : false}}

oder

{{expression}}

Beispiele für if-Ausdrücke deaktiviert

Beispiel: Deaktivierung einer Schaltfläche zum Absenden auf der Grundlage einer Formularvalidierung

Wenn Sie ein Formular mit mehreren Eingabefeldern haben und Sie die Schaltfläche zum Absenden deaktivieren möchten, bis alle erforderlichen Felder korrekt ausgefüllt sind, können Sie den folgenden Disabled If-Ausdruck verwenden:

{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}

Dieser Ausdruck prüft, ob eines der erforderlichen Eingabefelder (nameInput,emailInput,passwordInput) leer ist. Wenn eines der Felder leer ist, wird der Ausdruck wie folgt ausgewertettrue, und die Schaltfläche „Senden“ wird deaktiviert. Sobald alle erforderlichen Felder ausgefüllt sind, ergibt der Ausdruck das Ergebnisfalse, und die Schaltfläche „Senden“ wird aktiviert.

Durch die Verwendung dieser Typen bedingter Ausdrücke in den Eigenschaften Visible if und Disabled ff können Sie dynamische und reaktionsschnelle Benutzeroberflächen erstellen, die sich an Benutzereingaben anpassen und den Benutzern Ihrer Anwendung ein optimiertes und relevanteres Erlebnis bieten.

Wo expression steht ein boolescher Ausdruck, der entweder als wahr oder falsch ausgewertet wird.

Beispiel:

{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.

Layouts für Container

Die Layouteigenschaften bestimmen, wie der Inhalt oder die Elemente innerhalb einer Komponente angeordnet und positioniert werden. Es stehen mehrere Layoutoptionen zur Verfügung, die jeweils durch ein Symbol dargestellt werden:

Ausrichtung

Ausrichtung

Width

Die Eigenschaft Width gibt die horizontale Größe der Komponente an. Sie können einen Prozentwert zwischen 0% und 100% eingeben, der die Breite der Komponente im Verhältnis zum übergeordneten Container oder zum verfügbaren Speicherplatz darstellt.

Höhe

Die Height-Eigenschaft gibt die vertikale Größe der Komponente an. Der Wert „auto“ passt die Höhe der Komponente automatisch an ihren Inhalt oder den verfügbaren Platz an.

Abstand dazwischen

Die Eigenschaft Space between bestimmt den Abstand oder die Lücke zwischen dem Inhalt oder den Elementen innerhalb der Komponente. Sie können einen Wert zwischen 0 Pixel (kein Abstand) und 64 Pixel wählen, mit Schritten von 4 Pixeln (z. B. 4 Pixel, 8 Pixel, 12 Pixel usw.).

Padding

Die Eigenschaft Padding steuert den Abstand zwischen dem Inhalt oder den Elementen und den Kanten der Komponente. Sie können einen Wert zwischen 0 Pixel (kein Abstand) und 64 Pixel wählen, mit Schritten von 4 Pixeln (z. B. 4 Pixel, 8 Pixel, 12 Pixel usw.).

Hintergrund

Der Hintergrund aktiviert oder deaktiviert eine Hintergrundfarbe oder einen Stil für die Komponente.

Diese Layouteigenschaften bieten Flexibilität bei der Anordnung und Positionierung des Inhalts innerhalb einer Komponente sowie bei der Steuerung der Größe, des Abstands und des visuellen Erscheinungsbilds der Komponente selbst.

Datenkomponenten

In diesem Abschnitt werden die verschiedenen Datenkomponenten behandelt, die im Application Studio verfügbar sind, einschließlich der Komponenten Table , Detail, Metric, Form und Repeater. Diese Komponenten werden verwendet, um Daten in Ihrer Anwendung anzuzeigen, zu sammeln und zu bearbeiten.

Tabelle

Die Tabellenkomponente zeigt Daten in einem tabellarischen Format mit Zeilen und Spalten an. Sie wird verwendet, um strukturierte Daten, wie z. B. Listen von Elementen oder Datensätzen aus einer Datenbank, auf organisierte und leicht lesbare Weise darzustellen.

Tabelleneigenschaften

Die Tabellenkomponente hat mehrere gemeinsame Eigenschaften mit anderen Komponenten, wie NameSource, undActions. Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Zusätzlich zu den allgemeinen Eigenschaften verfügt die Table-Komponente über spezifische Eigenschaften und Konfigurationsoptionen, darunter ColumnsSearch and export, undExpressions.

Spalten

In diesem Abschnitt können Sie die Spalten definieren, die in der Tabelle angezeigt werden sollen. Jede Spalte kann mit den folgenden Eigenschaften konfiguriert werden:

Suchen und exportieren

Die Tabellenkomponente bietet die folgenden Schalter zum Aktivieren oder Deaktivieren der Such- und Exportfunktionen:

Zeilen pro Seite

Sie können die Anzahl der Zeilen angeben, die pro Seite in der Tabelle angezeigt werden sollen. Benutzer können dann zwischen den Seiten navigieren, um den gesamten Datensatz anzuzeigen.

Pre-fetch Limit

Geben Sie die maximale Anzahl von Datensätzen an, die in jeder Abfrageanforderung vorab abgerufen werden sollen. Das Maximum ist 3000.

Aktionen

Konfigurieren Sie im Abschnitt Aktionen die folgenden Eigenschaften:

Ausdrücke

Die Tabellenkomponente bietet mehrere Bereiche für die Verwendung von Ausdrücken und Aktionsfunktionen auf Zeilenebene, mit denen Sie die Funktionalität und Interaktivität der Tabelle anpassen und verbessern können. Sie ermöglichen es Ihnen, dynamisch auf Daten in der Tabelle zu verweisen und diese anzuzeigen. Mithilfe dieser Ausdrucksfelder können Sie dynamische Spalten erstellen, Daten an Aktionen auf Zeilenebene übergeben und auf Tabellendaten aus anderen Komponenten oder Ausdrücken in Ihrer Anwendung verweisen.

Beispiele: Referenzieren von Zeilenwerten

{{currentRow.columnName}}oder Mit {{currentRow["Column Name"]}} diesen Ausdrücken können Sie auf den Wert einer bestimmten Spalte für die aktuelle Zeile verweisen, die gerade gerendert wird. Ersetzen Sie columnName oder Column Name durch den tatsächlichen Namen der Spalte, auf die Sie verweisen möchten.

Beispiele:

Beispiele: Referenzierung einer ausgewählten Zeile

{{ui.table1.selectedRow["columnName"]}}Mit diesem Ausdruck können Sie auf den Wert einer bestimmten Spalte für die aktuell ausgewählte Zeile in der Tabelle mit der ID table1 verweisen. table1Ersetzen Sie durch die tatsächliche ID Ihrer Tabellenkomponente und columnName durch den Namen der Spalte, auf die Sie verweisen möchten.

Beispiele:

Beispiele: Erstellen benutzerdefinierter Spalten

Sie können einer Tabelle benutzerdefinierte Spalten hinzufügen, die auf Daten basieren, die von der zugrunde liegenden Datenaktion, der Automatisierung oder dem Ausdruck zurückgegeben wurden. Sie können vorhandene Spaltenwerte und JavaScript Ausdrücke verwenden, um neue Spalten zu erstellen.

Beispiele:

Beispiele: Anpassen der Spaltenanzeigewerte:

Sie können den Anzeigewert eines Felds innerhalb einer Tabellenspalte anpassen, indem Sie das Value Feld der Spaltenzuordnung festlegen. Auf diese Weise können Sie benutzerdefinierte Formatierungen oder Transformationen auf die angezeigten Daten anwenden.

Beispiele:

Row-level Aktionen auf der Schaltfläche

{{currentRow.columnName}}{{currentRow["Column Name"]}}Sie können diese Ausdrücke auch verwenden, um den Kontext der referenzierten Zeile innerhalb einer Aktion auf Zeilenebene zu übergeben, z. B. um zu einer anderen Seite mit den Daten der ausgewählten Zeile zu navigieren oder eine Automatisierung mit den Daten der Zeile auszulösen.

Beispiele:

Mithilfe dieser Ausdrucksfelder und Aktionsfunktionen auf Zeilenebene können Sie hochgradig angepasste und interaktive Tabellen erstellen, in denen Daten gemäß Ihren spezifischen Anforderungen angezeigt und bearbeitet werden. Darüber hinaus können Sie Aktionen auf Zeilenebene mit anderen Komponenten oder Automatisierungen in Ihrer Anwendung verbinden, um einen nahtlosen Datenfluss und eine reibungslose Funktionalität zu ermöglichen.

Detail

Die Detailkomponente ist so konzipiert, dass sie detaillierte Informationen zu einem bestimmten Datensatz oder Element anzeigt. Sie bietet einen speziellen Bereich für die Präsentation umfassender Daten, die sich auf eine einzelne Entität oder Zeile beziehen, und eignet sich daher ideal zur Präsentation detaillierter Details oder zur Erleichterung von Dateneingabe- und Bearbeitungsaufgaben.

Eigenschaften detailliert

Die Detailkomponente hat mehrere gemeinsame Eigenschaften mit anderen Komponenten, wie z. B. NameSource, undActions. Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Die Detail-Komponente verfügt außerdem über spezifische Eigenschaften und KonfigurationsoptionenFields, darunterLayout, undExpressions.

Layout

Im Abschnitt „Layout“ können Sie die Anordnung und Darstellung der Felder in der Detailkomponente anpassen. Sie können Optionen wie die folgenden konfigurieren:

Ausdrücke und Beispiele

Die Detail-Komponente stellt verschiedene Ausdrucksfelder bereit, mit denen Sie Daten innerhalb der Komponente dynamisch referenzieren und anzeigen können. Mit diesen Ausdrücken können Sie benutzerdefinierte und interaktive Detailkomponenten erstellen, die sich nahtlos mit den Daten und der Logik Ihrer Anwendung verbinden.

Beispiel: Daten referenzieren

{{ui.details.data[0]?.["colName"]}}: Mit diesem Ausdruck können Sie auf den Wert der Spalte mit dem Namen „ColName“ für das erste Element (Index 0) in dem Datenarray verweisen, das mit der Detail-Komponente mit der ID „details“ verbunden ist. Ersetzen Sie „colName“ durch den tatsächlichen Namen der Spalte, auf die Sie verweisen möchten. Beispielsweise zeigt der folgende Ausdruck den Wert der Spalte „CustomerName“ für das erste Element in dem Datenarray an, das mit der Komponente „Details“ verbunden ist:

{{ui.details.data[0]?.["customerName"]}}

Beispiel: Bedingtes Rendern

{{ui.table1.selectedRow["colName"]}}: Dieser Ausdruck gibt „true“ zurück, wenn die ausgewählte Zeile in der Tabelle mit der ID table1 Daten für die angegebene Spalte enthältcolName. Er kann verwendet werden, um die Detailkomponente abhängig davon, ob die ausgewählte Zeile der Tabelle leer ist oder nicht, bedingt ein- oder auszublenden.

Beispiel:

Sie können diesen Ausdruck in der Visible if Eigenschaft der Detailkomponente verwenden, um ihn abhängig von der ausgewählten Zeile in der Tabelle bedingt ein- oder auszublenden.

{{ui.table1.selectedRow["customerName"]}}

Wenn dieser Ausdruck als wahr ausgewertet wird (die ausgewählte Zeile in der table1 Komponente hat einen Wert für die customerName Spalte), ist die Detailkomponente sichtbar. Wenn der Ausdruck als falsch ausgewertet wird (d. h. die ausgewählte Zeile ist leer oder hat keinen Wert für „CustomerName“), wird die Detailkomponente ausgeblendet.

Beispiel: Bedingte Anzeige

{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}: Dieser Ausdruck zeigt bedingt ein Emoji an, das auf dem Wert einer Komponente oder eines Datenfeldes basiert.

Aufschlüsselung:

Dieser Ausdruck kann verwendet werden, um ein Emoji oder einen bestimmten Wert anzuzeigen, der auf dem Wert einer Komponente oder eines Datenfeldes innerhalb der Detailkomponente basiert.

Kennzahlen

Die Metrikkomponente ist ein visuelles Element, das wichtige Metriken oder Datenpunkte in einem kartenähnlichen Format anzeigt. Es wurde entwickelt, um wichtige Informationen oder Leistungsindikatoren auf übersichtliche und visuell ansprechende Weise darzustellen.

Eigenschaften von Metriken

Die Metrikkomponente hat mehrere gemeinsame Eigenschaften mit anderen KomponentenName, wieSource, undActions. Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Trend

Mit der Trendfunktion der Metriken können Sie einen visuellen Indikator für die Leistung oder die Veränderung der angezeigten Metrik im Laufe der Zeit anzeigen.

Trendwert

In diesem Feld können Sie den Wert oder Ausdruck angeben, der zur Bestimmung der Trendrichtung und -stärke verwendet werden soll. In der Regel handelt es sich dabei um einen Wert, der die Veränderung oder Leistung über einen bestimmten Zeitraum darstellt.

Beispiel:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}

Mit diesem Ausdruck wird der Wert für den Umsatz im Vergleich zum Vormonat aus dem ersten Element in den Daten abgerufen, die mit den „SalesMetrics“ -Metriken verknüpft sind.

Positiver Trend

In diesem Feld können Sie einen Ausdruck eingeben, der die Bedingung für einen positiven Trend definiert. Der Ausdruck sollte als wahr oder falsch ausgewertet werden.

Beispiel:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}

Mit diesem Ausdruck wird überprüft, ob der Umsatzwert gegenüber dem Vormonat größer als 0 ist, was auf einen positiven Trend hinweist.

Negativer Trend

In diesem Feld können Sie einen Ausdruck eingeben, der die Bedingung für einen negativen Trend definiert. Der Ausdruck sollte als wahr oder falsch ausgewertet werden.

Beispiel:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}

Mit diesem Ausdruck wird überprüft, ob der Umsatzwert gegenüber dem Vormonat unter 0 liegt, was auf einen negativen Trend hindeutet.

Farbleiste

Mit diesem Schalter können Sie die Anzeige eines farbigen Balkens aktivieren oder deaktivieren, um den Trendstatus visuell anzuzeigen.

Beispiele für Farbbalken:

Beispiel: Trend der Verkaufskennzahlen

Beispiel: Trend zu Inventarkennzahlen

Beispiel: Trend zur Kundenzufriedenheit

Durch die Konfiguration dieser trendbezogenen Eigenschaften können Sie Metrikkomponenten erstellen, die eine visuelle Darstellung der Leistung oder Veränderung der angezeigten Metrik im Laufe der Zeit bieten.

Mithilfe dieser Ausdrücke können Sie hochgradig angepasste und interaktive Metrikkomponenten erstellen, die Daten referenzieren und dynamisch anzeigen, sodass Sie wichtige Metriken, Leistungsindikatoren und datengestützte Visualisierungen in Ihrer Anwendung präsentieren können.

Beispiele für Ausdrücke von Kennzahlen

Im Eigenschaftenbereich können Sie Ausdrücke eingeben, um den Titel, den Primärwert, den Sekundärwert und die Wertbeschriftung anzuzeigen, um einen Wert dynamisch anzuzeigen.

Beispiel: Referenzierung des Primärwerts

{{ui.metric1.primaryValue}}: Mit diesem Ausdruck können Sie den Primärwert der Metrikkomponente mit der ID metric1 aus anderen Komponenten oder Ausdrücken auf derselben Seite referenzieren.

Beispiel: Zeigt {{ui.salesMetrics.primaryValue}} den Primärwert der salesMetrics Metrikkomponente an.

Beispiel: Referenzierung eines Sekundärwerts

{{ui.metric1.secondaryValue}}: Mit diesem Ausdruck können Sie den Sekundärwert der Metrikkomponente mit der ID metric1 aus anderen Komponenten oder Ausdrücken auf derselben Seite referenzieren.

Beispiel: Zeigt {{ui.revenueMetrics.secondaryValue}} den Sekundärwert der revenueMetrics Metrikkomponente an.

Beispiel: Daten referenzieren

{{ui.metric1.data}}: Mit diesem Ausdruck können Sie die Daten der Metrikkomponente mit der ID metric1 aus anderen Komponenten oder Ausdrücken auf derselben Seite referenzieren.

Beispiel: {{ui.kpiMetrics.data}} referenziert die Daten, die mit der kpiMetrics Metrikkomponente verbunden sind.

Beispiel: Anzeige bestimmter Datenwerte:

{{ui.metric1.data?.[0]?.id}}: Dieser Ausdruck ist ein Beispiel dafür, wie eine bestimmte Information aus den Daten angezeigt wird, die mit der Metrik-Komponente mit der ID verbunden sindmetric1. Dies ist nützlich, wenn Sie eine bestimmte Eigenschaft des ersten Elements in den Daten anzeigen möchten.

Aufschlüsselung:

Beispiel: Zeigt {{ui.orderMetrics.data?.[0]?.orderId}} den orderId Wert des ersten Elements in den Daten an, die mit der orderMetrics Metrikkomponente verbunden sind.

Beispiel: Anzeige der Datenlänge

{{ui.metric1.data?.length}}: Dieser Ausdruck veranschaulicht, wie die Länge (Anzahl der Elemente) in den Daten angezeigt wird, die mit der Metrik-Komponente mit der ID verbunden sindmetric1. Dies ist nützlich, wenn Sie die Anzahl der Elemente in den Daten anzeigen möchten.

Aufschlüsselung:

Beispiel: Zeigt {{ui.productMetrics.data?.length}} die Anzahl der Elemente in den Daten an, die mit der productMetrics Metrikkomponente verbunden sind.

Repeater

Die Repeater-Komponente ist eine dynamische Komponente, mit der Sie eine Sammlung von Elementen auf der Grundlage einer bereitgestellten Datenquelle generieren und anzeigen können. Sie wurde entwickelt, um die Erstellung von Listen, Rastern oder sich wiederholenden Mustern in der Benutzeroberfläche Ihrer Anwendung zu erleichtern. Einige beispielhafte Anwendungsfälle umfassen:

Die Repeater-Komponente unterscheidet sich von der Tabellen-Komponente durch umfangreiche Inhalte. Eine Tabellenkomponente hat ein striktes Zeilen- und Spaltenformat. Der Repeater kann Ihre Daten flexibler anzeigen.

Eigenschaften des Repeaters

Die Repeater-Komponente hat mehrere gemeinsame Eigenschaften mit anderen Komponenten, wie NameSource, und. Actions Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Zusätzlich zu den allgemeinen Eigenschaften verfügt die Repeater-Komponente über die folgenden zusätzlichen Eigenschaften und Konfigurationsoptionen.

Vorlage für einen Artikel

Die Artikelvorlage ist ein Container, in dem Sie die Struktur und die Komponenten definieren können, die für jedes Element in der Datenquelle wiederholt werden. Sie können andere Komponenten in diesen Container ziehen und dort ablegen, z. B. Text, Bild , Schaltfläche oder jede andere Komponente, die Sie zur Darstellung der einzelnen Elemente benötigen.

In der Elementvorlage können Sie mithilfe von Ausdrücken im Format auf Eigenschaften oder Werte des aktuellen Elements verweisen{{currentItem.propertyName}}.

Wenn Ihre Datenquelle beispielsweise eine itemName Eigenschaft enthält, können Sie diese verwenden, {{currentItem.itemName}} um die Elementnamen des aktuellen Elements anzuzeigen.

Layout

Im Abschnitt Layout können Sie die Anordnung der wiederholten Elemente innerhalb der Repeater-Komponente konfigurieren.

Ausrichtung

Zeilen pro Seite

Geben Sie die Anzahl der Zeilen an, die pro Seite im Listenlayout angezeigt werden sollen. Eine Paginierung ist für Elemente vorgesehen, die die angegebene Anzahl von Zeilen überschreiten.

Spalten und Zeilen pro Seite (Raster)

Ausdrücke und Beispiele

Die Repeater-Komponente bietet verschiedene Ausdrucksfelder, mit denen Sie Daten innerhalb der Komponente dynamisch referenzieren und anzeigen können. Mit diesen Ausdrücken können Sie benutzerdefinierte und interaktive Repeater-Komponenten erstellen, die sich nahtlos mit den Daten und der Logik Ihrer Anwendung verbinden.

Beispiel: Elemente referenzieren

Beispiel: Rendern einer Produktliste

Beispiel: Generieren eines Rasters von Benutzer-Avataren

Mithilfe der Repeater Komponente können Sie dynamische und datengesteuerte Benutzeroberflächen erstellen und so den Prozess des Renderns von Elementsammlungen optimieren und die Notwendigkeit manueller Wiederholungen oder Hardcoding reduzieren.

Formular

Die Formularkomponente dient dazu, Benutzereingaben zu erfassen und Dateneingabeaufgaben in Ihrer Anwendung zu erleichtern. Sie bietet ein strukturiertes Layout für die Anzeige von Eingabefeldern, Dropdownlisten, Kontrollkästchen und anderen Formularsteuerelementen, sodass Benutzer Daten nahtlos eingeben oder ändern können. Sie können andere Komponenten innerhalb einer Formularkomponente verschachteln, z. B. eine Tabelle.

Eigenschaften des Formulars

Die Formular-Komponente hat mehrere gemeinsame Eigenschaften mit anderen KomponentenName, wieSource, undActions. Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Formular generieren

Die Funktion „Formular generieren“ erleichtert das schnelle Erstellen von Formularfeldern, indem sie automatisch auf der Grundlage einer ausgewählten Datenquelle ausgefüllt werden. Dies kann beim Erstellen von Formularen, die eine große Anzahl von Feldern anzeigen müssen, Zeit und Mühe sparen.

Die Funktion „Formular generieren“ ist besonders nützlich, wenn Ihre Anwendung ein klar definiertes Datenmodell oder eine Reihe von Entitäten enthält, für die Sie Benutzereingaben erfassen müssen. Durch die automatische Generierung der Formularfelder können Sie Zeit sparen und die Konsistenz der Formulare Ihrer Bewerbung sicherstellen.

Nachdem Sie die Funktion „Formular generieren“ verwendet haben, können Sie das Layout, die Aktionen und Ausdrücke für die Formularkomponente weiter an Ihre spezifischen Anforderungen anpassen.

Ausdrücke und Beispiele

Wie bei anderen Komponenten können Sie Ausdrücke verwenden, um Daten in der Formular-Komponente zu referenzieren und anzuzeigen. Beispiel:

Durch die Konfiguration dieser Eigenschaften und die Nutzung von Ausdrücken können Sie benutzerdefinierte und interaktive Formularkomponenten erstellen, die sich nahtlos in die Datenquellen und die Logik Ihrer Anwendung integrieren lassen. Diese Komponenten können verwendet werden, um Benutzereingaben zu erfassen, vorab ausgefüllte Daten anzuzeigen und Aktionen auf der Grundlage der Formularübermittlungen oder Benutzerinteraktionen auszulösen.

Schrittweiser Ablauf

Die Stepflow-Komponente wurde entwickelt, um Benutzer durch mehrstufige Prozesse oder Workflows in Ihrer Anwendung zu führen. Sie bietet eine strukturierte und intuitive Oberfläche zur Darstellung einer Abfolge von Schritten, von denen jeder seine eigenen Eingaben, Validierungen und Aktionen enthält.

Die Stepflow-Komponente hat mehrere gemeinsame Eigenschaften mit anderen Komponenten, wieName, undSource. Actions Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Die Stepflow-Komponente verfügt über zusätzliche Eigenschaften und Konfigurationsoptionen wie Step NavigationValidation, undExpressions.

KI-Komponenten

Generation KI

Die Komponente Gen AI ist ein Gruppierungscontainer, der zum Gruppieren von Komponenten und der zugehörigen Logik verwendet wird, um sie mithilfe des Chats im Anwendungsstudio einfach mit KI zu bearbeiten. Wenn Sie den Chat zum Erstellen von Komponenten verwenden, werden diese in einem Gen-AI-Container gruppiert. Informationen zur Bearbeitung oder Verwendung dieser Komponente finden Sie unterErstellen oder bearbeiten Sie Ihre App.

Komponenten für & Textnummern

Texteingabe

Mit der Texteingabekomponente können Benutzer Textdaten in Ihrer Anwendung eingeben und senden. Sie bietet eine einfache und intuitive Möglichkeit, Benutzereingaben wie Namen, Adressen oder andere Textinformationen zu erfassen.

Text

Die Textkomponente wird verwendet, um Textinformationen in Ihrer Anwendung anzuzeigen. Sie kann verwendet werden, um statischen Text, dynamische Werte oder aus Ausdrücken generierte Inhalte anzuzeigen.

Textbereich

Die Textbereichskomponente dient zur Erfassung mehrzeiliger Texteingaben von Benutzern. Sie bietet Benutzern einen größeren Eingabefeldbereich, in den sie längere Texteingaben wie Beschreibungen, Notizen oder Kommentare eingeben können.

Email

Die E-Mail-Komponente ist ein spezielles Eingabefeld zur Erfassung von E-Mail-Adressen von Benutzern. Es kann bestimmte Validierungsregeln durchsetzen, um sicherzustellen, dass der eingegebene Wert dem richtigen E-Mail-Format entspricht.

Passwort

Die Passwort-Komponente ist ein Eingabefeld, das speziell für Benutzer entwickelt wurde, um vertrauliche Informationen wie Passwörter oder PIN-Codes einzugeben. Sie maskiert die eingegebenen Zeichen, um Datenschutz und Sicherheit zu gewährleisten.

Suchen

Die Suchkomponente bietet Benutzern ein spezielles Eingabefeld für die Durchführung von Suchanfragen oder die Eingabe von Suchbegriffen in die ausgefüllten Daten in der Anwendung.

Phone

Die Telefonkomponente ist ein Eingabefeld, das auf die Erfassung von Telefonnummern oder anderen Kontaktinformationen von Benutzern zugeschnitten ist. Es kann spezielle Validierungsregeln und Formatierungsoptionen enthalten, um sicherzustellen, dass der eingegebene Wert dem richtigen Telefonnummernformat entspricht.

Zahl

Die Zahlenkomponente ist ein Eingabefeld, das speziell für Benutzer zur Eingabe numerischer Werte entwickelt wurde. Sie kann Validierungsregeln durchsetzen, um sicherzustellen, dass es sich bei dem eingegebenen Wert um eine gültige Zahl innerhalb eines bestimmten Bereichs oder Formats handelt.

Währung

Die Währungskomponente ist ein spezielles Eingabefeld zur Erfassung von Geldwerten oder Beträgen. Es kann Formatierungsoptionen zur Anzeige von Währungssymbolen und Dezimaltrennzeichen und zur Durchsetzung von Validierungsregeln enthalten, die für Währungseingaben spezifisch sind.

Detailpaar

Die Detailpaar-Komponente wird verwendet, um Schlüssel-Wert-Paare oder Paare verwandter Informationen in einem strukturierten und lesbaren Format anzuzeigen. Sie wird häufig verwendet, um Details oder Metadaten zu präsentieren, die einem bestimmten Element oder einer bestimmten Entität zugeordnet sind.

Komponenten zur Auswahl

Switch

Die Switch-Komponente ist ein Steuerelement für die Benutzeroberfläche, mit dem Benutzer zwischen zwei Zuständen oder Optionen wie on/off true/false, oder enabled/disabled wechseln können. Sie bietet eine visuelle Darstellung des aktuellen Status und ermöglicht es Benutzern, ihn mit einem einzigen Klick oder Tippen zu ändern.

Gruppe wechseln

Die Switch-Gruppenkomponente ist eine Sammlung einzelner Switch-Steuerelemente, mit denen Benutzer eine oder mehrere Optionen aus einem vordefinierten Satz auswählen können. Sie bietet eine visuelle Darstellung der ausgewählten und nicht ausgewählten Optionen und erleichtert es den Benutzern, die verfügbaren Optionen zu verstehen und mit ihnen zu interagieren.

Zwischen den Ausdrucksfeldern der Gruppe wechseln

Checkbox-Gruppe

Die Komponente „Checkbox-Gruppe“ bietet Benutzern eine Gruppe von Checkboxen, sodass sie mehrere Optionen gleichzeitig auswählen können. Dies ist nützlich, wenn Sie Benutzern die Möglichkeit geben möchten, ein oder mehrere Elemente aus einer Liste von Optionen auszuwählen.

Felder mit Ausdrücken gruppieren durch Kontrollkästchen

Radio-Gruppe

Die Funkgruppenkomponente besteht aus einer Reihe von Optionsfeldern, mit denen Benutzer eine einzelne Option aus mehreren sich gegenseitig ausschließenden Optionen auswählen können. Sie stellt sicher, dass jeweils nur eine Option ausgewählt werden kann, sodass Benutzer eine klare und unmissverständliche Möglichkeit haben, eine Auswahl zu treffen.

Ausdrucksfelder für Optionsgruppen

Die folgenden Felder können in Ausdrücken verwendet werden.

Einzelauswahl

Die Einzelauswahl-Komponente bietet Benutzern eine Liste von Optionen, aus denen sie ein einzelnes Element auswählen können. Sie wird häufig in Szenarien verwendet, in denen Benutzer eine Auswahl aus einer Reihe vordefinierter Optionen treffen müssen, z. B. eine Kategorie, einen Standort oder eine Präferenz.

Felder mit Einzelauswahlausdrücken

Mehrfachauswahl

Die Mehrfachauswahl-Komponente ähnelt der Einzelauswahl-Komponente, ermöglicht es Benutzern jedoch, mehrere Optionen gleichzeitig aus einer Auswahlliste auszuwählen. Sie ist nützlich, wenn Benutzer mehrere Optionen aus einer Reihe vordefinierter Optionen auswählen müssen, z. B. mehrere Stichwörter, Interessen oder Einstellungen auswählen müssen.

Felder mit mehreren Ausdrücken

&Navigationskomponenten für Schaltflächen

Das Application Studio bietet eine Vielzahl von Schaltflächen- und Navigationskomponenten, mit denen Benutzer Aktionen auslösen und innerhalb Ihrer Anwendung navigieren können.

Komponenten für Schaltflächen

Die verfügbaren Tastenkomponenten sind:

Diese Schaltflächenkomponenten haben die folgenden gemeinsamen Eigenschaften:

Inhalt

Typ

Größe

Die Größe der Schaltfläche. Mögliche Werte sind Small, Medium und Large.

Symbol

Sie können aus einer Vielzahl von Symbolen auswählen, die auf der Schaltfläche angezeigt werden sollen, darunter:

Auslöser

Wenn auf die Schaltfläche geklickt wird, können Sie eine oder mehrere Aktionen so konfigurieren, dass sie ausgelöst werden. Die verfügbaren Aktionstypen sind:

JavaScript Eigenschaften der Aktionsschaltfläche

Wählen Sie den JavaScript Aktionstyp aus, um benutzerdefinierten JavaScript Code auszuführen, wenn auf die Schaltfläche geklickt wird.

Quellcode

In das Source code Feld können Sie Ihren JavaScript Ausdruck oder Ihre Funktion eingeben. Beispiel:

return "Hello World";

Dadurch wird einfach die Zeichenfolge zurückgegebenHello World, wenn auf die Schaltfläche geklickt wird.

Bedingung: Starte wenn

Sie können auch einen booleschen Ausdruck angeben, der bestimmt, ob die JavaScript Aktion ausgeführt werden soll oder nicht. Für dieses Tag gilt folgende Syntax:

{{ui.textinput1.value !== ""}}

In diesem Beispiel wird die JavaScript Aktion nur ausgeführt, wenn der Wert der textinput1 Komponente keine leere Zeichenfolge ist.

Mithilfe dieser erweiterten Triggeroptionen können Sie hochgradig angepasste Schaltflächenverhalten erstellen, die sich direkt in die Logik und Daten Ihrer Anwendung integrieren lassen. Auf diese Weise können Sie die integrierten Funktionen der Schaltflächen erweitern und die Benutzererfahrung an Ihre spezifischen Anforderungen anpassen.

Hyperlink

Die Hyperlink-Komponente bietet einen anklickbaren Link zum Navigieren zu externen URLs oder internen Anwendungsrouten.

Eigenschaften von Hyperlinks

Inhalt

URL

Die Ziel-URL für den Hyperlink, bei dem es sich um eine externe Website oder eine interne Anwendungsroute handeln kann.

Auslöser

Wenn auf den Hyperlink geklickt wird, können Sie eine oder mehrere Aktionen so konfigurieren, dass sie ausgelöst werden. Die verfügbaren Aktionstypen sind dieselben wie die für die Schaltflächenkomponenten.

Komponenten für Datum und & Uhrzeit

Date

Mit der Date-Komponente können Benutzer Daten auswählen und eingeben.

Die Date-Komponente hat mehrere gemeinsame Eigenschaften mit anderen KomponentenName, wieSource, undValidation. Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Zusätzlich zu den allgemeinen Eigenschaften verfügt die Date-Komponente über die folgenden spezifischen Eigenschaften:

Eigenschaften von Datum

Format

Wert

Min. Datum

Maximales Datum

Typ des Kalenders

Deaktivierte Daten

Behavior

Validierung

Im Abschnitt Validierung können Sie zusätzliche Regeln und Einschränkungen für die Datumseingabe definieren. Durch die Konfiguration dieser Validierungsregeln können Sie sicherstellen, dass die von Benutzern eingegebenen Datumswerte den spezifischen Anforderungen Ihrer Anwendung entsprechen. Sie können die folgenden Arten von Validierungen hinzufügen:

Durch die Konfiguration dieser Validierungsregeln können Sie sicherstellen, dass die von Benutzern eingegebenen Datumswerte den spezifischen Anforderungen Ihrer Anwendung entsprechen.

Ausdrücke und Beispiele

Die Date-Komponente stellt das folgende Ausdrucksfeld bereit:

Zeit

Mit der Zeitkomponente können Benutzer Zeitwerte auswählen und eingeben. Durch die Konfiguration der verschiedenen Eigenschaften der Zeitkomponente können Sie Zeiteingabefelder erstellen, die den spezifischen Anforderungen Ihrer Anwendung entsprechen, z. B. das Einschränken des auswählbaren Zeitbereichs, das Deaktivieren bestimmter Zeiten und das Steuern der Sichtbarkeit und Interaktivität der Komponente.

Eigenschaften der Zeit

Die Time-Komponente hat mehrere gemeinsame Eigenschaften mit anderen KomponentenName, wieSource, undValidation. Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Zusätzlich zu den allgemeinen Eigenschaften besitzt die Time-Komponente die folgenden spezifischen Eigenschaften:

Zeitintervalle

Wert

Placeholder

Minimale Zeit

Max. Zeit

Mal deaktiviert

Konfiguration für deaktivierte Zeiten

Im Abschnitt „Zeiten für deaktivierte Zeiten“ können Sie angeben, welche Zeitwerte nicht zur Auswahl stehen sollen.

Quelle

Beispiel für einen Ausdruck:

{{currentRow.column === "Lunch Break"}}

Dieser Ausdruck würde jedes Mal deaktiviert, wenn die Spalte „Mittagspause“ für die aktuelle Zeile zutrifft.

Durch die Konfiguration dieser Validierungsregeln und deaktivierter Zeitausdrücke können Sie sicherstellen, dass die von Benutzern eingegebenen Zeitwerte den spezifischen Anforderungen Ihrer Anwendung entsprechen.

Behavior

Validierung

Beispiel:

{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}

Dieser Ausdruck überprüft, ob die eingegebene Uhrzeit 9:00 Uhr oder 9:30 Uhr ist. Wenn die Bedingung wahr ist, schlägt die Überprüfung fehl.

Sie können auch eine benutzerdefinierte Bestätigungsnachricht angeben, die angezeigt wird, wenn die Validierung nicht erfüllt ist:

Validation not met. The time must be 9:00 AM or 9:30 AM.

Ausdrücke und Beispiele

Die Time-Komponente stellt das folgende Ausdrucksfeld bereit:

Beispiel: Zeitwert

Beispiel: Zeitvergleich

Datumsbereich

Mit der Komponente „Datumsbereich“ können Benutzer einen Datumsbereich auswählen und eingeben. Durch die Konfiguration der verschiedenen Eigenschaften der Komponente „Datumsbereich“ können Sie Eingabefelder für den Zeitraum erstellen, die den spezifischen Anforderungen Ihrer Anwendung entsprechen. So können Sie beispielsweise den auswählbaren Datumsbereich einschränken, bestimmte Daten deaktivieren und die Sichtbarkeit und Interaktivität der Komponente steuern.

Eigenschaften des Datumsbereichs

Die Komponente „Datumsbereich“ hat mehrere gemeinsame Eigenschaften mit anderen Komponenten, wie z. B. NameSource, undValidation. Weitere Informationen zu diesen Eigenschaften finden Sie unterAllgemeine Komponenteneigenschaften.

Zusätzlich zu den allgemeinen Eigenschaften verfügt die Komponente Date Range über die folgenden spezifischen Eigenschaften:

Format

Startdatum

Enddatum

Placeholder

Minimales Datum

Maximales Datum

Typ des Kalenders

Obligatorische Tage ausgewählt

Deaktivierte Daten

Validierung

Im Abschnitt Validierung können Sie zusätzliche Regeln und Einschränkungen für die Eingabe des Datumsbereichs definieren.

Ausdrücke und Beispiele

Die Komponente Date Range stellt die folgenden Ausdrucksfelder bereit:

Beispiel: Berechnung der Datumsdifferenz

Beispiel: Bedingte Sichtbarkeit auf der Grundlage des Datumsbereichs

Beispiel: Deaktivierte Daten, die auf aktuellen Zeilendaten basieren

Benutzerdefinierte Validierung

Medienkomponenten

Das Application Studio bietet mehrere Komponenten zum Einbetten und Anzeigen verschiedener Medientypen in Ihre Anwendung.

iFrame einbetten

Mit der iFrame-Einbettungskomponente können Sie externe Webinhalte oder Anwendungen mithilfe eines iFrames in Ihre Anwendung einbetten.

Eigenschaften der iFrame-Einbettung

URL

Die URL des externen Inhalts oder der Anwendung, die Sie einbetten möchten.

Layout

S3-Upload

Die S3-Upload-Komponente ermöglicht es Benutzern, Dateien in einen Amazon S3-Bucket hochzuladen. Durch die Konfiguration der S3-Upload-Komponente können Sie Benutzern das einfache Hochladen von Dateien in den Amazon S3-Speicher Ihrer Anwendung ermöglichen und dann die hochgeladenen Dateiinformationen in der Logik und Benutzeroberfläche Ihrer Anwendung nutzen.

Eigenschaften für S3-Uploads

S3-Konfiguration

Konfiguration für das Hochladen von Dateien

Validierung

Auslöser

S3-Upload-Ausdrucksfelder

Die S3-Upload-Komponente stellt die folgenden Ausdrucksfelder bereit:

Ausdrücke und Beispiele

Beispiel: Zugreifen auf hochgeladene Dateien

Beispiel: Validierung von Datei-Uploads

Beispiel: Aktionen auslösen

Mit diesen Ausdrücken können Sie auf die hochgeladenen Dateien zugreifen, die Datei-Uploads validieren und auf der Grundlage der Datei-Upload-Ergebnisse Aktionen auslösen. Mithilfe dieser Ausdrücke können Sie ein dynamischeres und intelligenteres Verhalten innerhalb der Datei-Upload-Funktion Ihrer Anwendung erzielen.

PDF-Viewer-Komponente

Mit der PDF-Viewer-Komponente können Benutzer PDF-Dokumente in Ihrer Anwendung anzeigen und mit ihnen interagieren. App Studio unterstützt diese verschiedenen Eingabetypen für die PDF-Quelle. Die PDF-Viewer-Komponente bietet Flexibilität bei der Integration von PDF-Dokumenten in Ihre Anwendung, unabhängig davon, ob es sich um eine statische URL, eine Inline-Daten-URI oder dynamisch generierte Inhalte handelt.

Eigenschaften des PDF-Viewers

Quelle

Die Quelle des PDF-Dokuments, bei dem es sich um einen Ausdruck, eine Entität, eine URL oder eine Automatisierung handeln kann.

Expression

Verwenden Sie einen Ausdruck, um die PDF-Quelle dynamisch zu generieren.

Entität

Verbinden Sie die PDF-Viewer-Komponente mit einer Datenentität, die das PDF-Dokument enthält.

URL

Geben Sie die URL des PDF-Dokuments an.

URL

Sie können eine URL eingeben, die auf das PDF-Dokument verweist, das Sie anzeigen möchten. Dies kann eine öffentliche Web-URL oder eine URL in Ihrer eigenen Anwendung sein.

Beispiel: https://example.com/document.pdf

Daten-URI

Eine Daten-URI ist eine kompakte Methode, um kleine Datendateien (wie Bilder oder PDFs) direkt in Ihre Anwendung einzubinden. Das PDF-Dokument ist als Base64-Zeichenfolge codiert und direkt in der Konfiguration der Komponente enthalten.

Blob oder ArrayBuffer

Sie können das PDF-Dokument auch als Blob oder ArrayBuffer Objekt bereitstellen, sodass Sie die PDF-Daten aus verschiedenen Quellen in Ihrer Anwendung dynamisch generieren oder abrufen können.

Automatisierung

Verbinden Sie die PDF-Viewer-Komponente mit einer Automatisierung, die das PDF-Dokument bereitstellt.

Aktionen

Layout

Bildbetrachter

Mit der Bildbetrachter-Komponente können Benutzer Bilddateien in Ihrer Anwendung anzeigen und mit ihnen interagieren.

Eigenschaften des Bildbetrachters

Quelle

Alternativtext

Die alternative Textbeschreibung des Bildes, die aus Gründen der Barrierefreiheit verwendet wird.

Layout