DetailsList Kontrolle
Ein Steuerelement zum Anzeigen eines Datensatzes.
Notiz
Sie finden die vollständige Dokumentation und den Quellcode im GitHub-Codekomponenten-Repository.
Beschreibung des Dataflows
Eine Liste der Details (DetailsList
) ist eine robuste Möglichkeit, eine informationsreiche Sammlung von Elementen anzuzeigen und es Benutzern zu ermöglichen, den Inhalt zu sortieren, zu gruppieren und zu filtern. Benutzen Sie eine DetailsList
, wenn die Informationsdichte kritisch ist.
Die DetailsList
-Codekomponente ermöglicht die Verwendung der Fluent-Benutzeroberflächen-DetailsList
-Komponente aus Canvas-Apps und benutzerdefinierten Seiten.
- Kann an ein Dataverse-DataSet oder eine lokale Sammlung gebunden werden.
- Unterstützt konfigurierbare Spalten, die von den Spaltenmetadaten getrennt sind und zur Flexibilität vom Quell-DataSet bereitgestellt werden.
- Zelltypen für Links, Symbole, Ein-/Ausblenden sowie untergeordnete Textzellen.
- Support for Paging.
- Support für das Sortieren entweder mithilfe der Dataverse-Sortierfunktion oder en konfigurierbaren
SortBy
-Eigenschaften.
Eigenschaften
Schlüsseleigenschaften
Eigenschaften | Beschreibung des Dataflows |
---|---|
Items |
Das DataSet, das die zu rendernden Zeilen enthält. Auch als Records angezeigt. Siehe nachfolgende Tabelle der Artikeleigenschaften. |
Columns |
Das DataSet, das Optionsmetadaten für die Spalten enthält. Wenn dieses DataSet bereitgestellt wird, ersetzt es vollständig die in dem Datensätzen-DataSet bereitgestellten Spalten. Siehe nachfolgende Tabelle der Spalteneigenschaften. |
SelectionType |
Auswahltyp („Keine“, „Einzeln“, „Mehrere“) |
PageSize |
Definiert, wie viele Datensätze pro Seite geladen werden sollen. |
PageNumber |
Gibt die aktuell angezeigte Seite aus. |
HasNextPage |
Gibt „true“ aus, wenn eine nächste Seite vorhanden ist. |
HasPreviousPage |
Gibt „true“ aus, wenn eine vorherige Seite vorhanden ist. |
TotalRecords |
Gibt die Gesamtanzahl der verfügbaren Datensätze aus. |
CurrentSortColumn |
Der Name der Spalte, die als aktuell für die Sortierung verwendet angezeigt werden soll. |
CurrentSortDirection |
Die Richtung der aktuellen Sortierspalte, die verwendet wird. |
Items
Eigenschaften
Diese Attribute müssen in Datenquelle verfügbar sein, um die zugehörige Funktionalität zu aktivieren. Die Power Fx-Formel AddColumns() kann verwendet werden, um diese Werte an die ursprüngliche Datenquelle anzuhängen.
Eigenschaften | Beschreibung des Dataflows |
---|---|
RecordKey |
(optional) – Der eindeutige Name der Schlüsselspalte. Geben Sie dies an, wenn die Auswahl bei Aktualisierung der Datensätze beibehalten werden soll, und der EventRowKey anstelle des Zeilenindex die ID enthalten soll, nachdem das OnChange -Ereignis ausgelöst wurde. |
RecordCanSelect |
(optional) – Der Spaltenname, der einen boolean -Wert enthält, welcher definiert, ob eine Zeile ausgewählt werden kann. |
RecordSelected |
(optional) – Der Spaltenname, der einen boolean -Wert enthält, welcher definiert, ob eine Zeile standardmäßig ausgewählt ist und ob das InputEvent SetSelection enthalten soll. Siehe nachfolgenden Set Selection -Abschnitt. |
Columns
Eigenschaften
Eigenschaften | Beschreibung des Dataflows |
---|---|
ColDisplayName |
(Erforderlich) – Gibt den Namen der Spalte an, die in der Kopfzeile angezeigt werden soll. |
ColName |
(Erforderlich) – Gibt den tatsächlichen Feldnamen der Spalte in der Elementesammlung an. |
ColWidth |
(Erforderlich) – Gibt die absolute feste Breite der Spalte in Pixeln an. |
ColCellType |
Der Typ der zu rendernden Zelle. Mögliche Werte: expand , tag , indicatortag , image , clickableimage , link . Weitere Informationen finden Sie in den nächsten Abschnitten. |
ColHorizontalAlign |
Die Ausrichtung des Zellinhalts, wenn der ColCellType vom Typ image oder clickableimage ist. |
ColVerticalAlign |
Die Ausrichtung des Zellinhalts, wenn der ColCellType vom Typ image oder clickableimage ist. |
ColMultiLine |
„True“, wenn der Text in den Zellen umgebrochen werden soll, wenn er zu lang ist, um in die verfügbare Breite zu passen. |
ColResizable |
„True“, wenn die Spaltenbreite der Kopfzeile skalierbar sein soll. |
ColSortable |
„true“, wenn die Spalte als sortierbar angezeigt werden soll. Die Daten werden automatisch sortiert, wenn das DataSet die automatische Sortierung über eine direkte Dataverse-Verbindung unterstützt. Ansonsten werden die Ausgaben von SortEventColumn und SortEventDirection festgelegt und müssen im Power FX-Bindungsausdruck der Datensätze verwendet werden. |
ColSortBy |
Der Name der Spalte, die für das OnChange -Ereignis bereitgestellt werden soll, wenn die Spalte sortiert wird. Wenn Sie beispielsweise Datumsspalten sortieren, sollte dies basierend auf dem tatsächlichen Datumswert und nicht dem in der Spalte angezeigten formatierten Text passieren. |
ColIsBold |
„True“, wenn die Daten der Datenzelle fett dargestellt werden sollen. |
ColTagColorColumn |
Wenn der Zellentyp „Tag“ ist, legen Sie die Hex-Hintergrundfarbe des Text-Tags fest. Sie kann auf transparent festgelegt werden. Wenn der Zellentyp nicht „Tag“ ist, wird dies auf eine Hex-Farbe festgelegt, die als Indikatorkreis-Tag-Zelle verwendet werden soll. Das Tag wird nicht angezeigt, wenn der Textwert leer ist. |
ColTagBorderColorColumn |
Legen Sie eine Hex-Farbe fest, die als Rahmenfarbe eines Text-Tags verwendet werden soll. Sie kann auf transparent festgelegt werden. |
ColHeaderPaddingLeft |
Fügt dem Kopfzeilentext der Spalte Abstand hinzu (Pixel) |
ColShowAsSubTextOf |
Wird hier der Namen einer anderen Spalte festgelegt, wird die Spalte zu einem untergeordneten Element dieser Spalte. Siehe nachfolgend unter „Untertextspalten“. |
ColPaddingLeft |
Fügt dem linken Rand der untergeordneten Zelle Abstand hinzu (Pixel) |
ColPaddingTop |
Fügt dem oberen Rand der untergeordneten Zelle Abstand hinzu (Pixel) |
ColLabelAbove |
Verschiebt die Beschriftung oberhalb des Werts der untergeordneten Zelle, wenn sie als Untertextspalte angezeigt wird. |
ColMultiValueDelimiter |
Verbindet mehrwertige Array-Werte mit diesem Trennzeichen. Siehe nachfolgend unter „Mehrwertige Spalten“. |
ColFirstMultiValueBold |
Bei der Anzeige eines mehrwertigen Array-Werts wird das erste Element fett dargestellt. |
ColInlineLabel |
Bei Festlegung auf einen Zeichenfolgenwert wird dieser verwendet, um eine Beschriftung innerhalb des Zellenwerts anzuzeigen, die sich vom Spaltennamen unterscheiden könnte. Zum Beispiel ![]() |
ColHideWhenBlank |
Wenn „True“, werden alle Inline-Beschriftungen und Abstände von Zellen ausgeblendet, wenn der Zellenwert leer ist. |
ColSubTextRow |
Wenn in einer Untertextzelle mehrere Zellen angezeigt werden sollen, legen Sie auf den Zeilenindex fest. Null gibt die Inhaltszeile der Hauptzelle an. |
ColAriaTextColumn |
Die Spalte, die die Aria-Beschreibung für Zellen enthält (zum Beispiel Symbolzellen). |
ColCellActionDisabledColumn |
Die Spalte, die ein boolesches Kennzeichen enthält, um zu prüfen, ob eine Zellenaktion (zum Beispiel Symbolzellen) deaktiviert ist. |
ColImageWidth |
Die Größe des Symbols/Bildes in Pixel. |
ColImagePadding |
Der Abstand um eine Symbol-/Bildzelle herum. |
ColRowHeader |
Definiert, dass eine Spalte größer als die anderen Zellen gerendert wird (14 Pixel statt 12 Pixel). Normalerweise gäbe es nur eine einzige Zeilenkopfzeile pro Spaltensatz. |
Stileigenschaften
Eigenschaften | Beschreibung des Dataflows |
---|---|
Theme |
Das zu verwendende Fluent-UI-Themen-JSON, das aus dem Fluent-UI-Themen-Designer generiert und exportiert wird. Siehe Designs für eine Konfigurationsanleitung. |
Compact |
„True“, wenn der Kompaktstil verwendet werden soll |
AlternateRowColor |
Der Hex-Wert der Zeilenfarbe, die für abwechselnde Zeilen verwendet werden soll. |
SelectionAlwaysVisible |
Wenn die Optionsfelder für die Auswahl immer sichtbar sein sollen und nicht nur beim Bewegen über die Zeile. |
AccessibilityLabel |
Die Beschriftung, die der Tabelle für die Arienbeschreibung hinzugefügt werden soll |
Ereigniseigenschaften
Eigenschaften | Beschreibung des Dataflows |
---|---|
RaiseOnRowSelectionChangeEvent |
Das OnChange -Ereignis wird ausgelöst, wenn eine Zeile ausgewählt/abgewählt wird. (siehe unten) |
InputEvent |
Ein oder mehrere Eingabeereignisse (die mithilfe der Zeichenfolgenverkettung miteinander kombiniert werden können). Mögliche Werte SetFocus , SetFocusOnRow , SetFocusOnHeader , ClearSelection , SetSelection . Es muss ein zufälliges Zeichenfolgenelement nachfolgen, um sicherzustellen, dass das Ereignis ausgelöst wird. Ereignisse können kombiniert werden, zum Beispiel löscht und setzt SetFocusClearSelection gleichzeitig den Fokus. SetFocusOnRowSetSelection setzt den Fokus auf eine Zeile und legt gleichzeitig die Auswahl fest. |
EventName |
Ausgabeereignis wenn OnChange ausgelöst wird. Mögliche Werte: - Sort , CellAction , OnRowSelectionChange |
EventColumn |
Feldname der verwendeten Ausgabeereignisspalte, wenn CellAction aufgerufen wird. |
EventRowKey |
Ausgabeereignisspalte, die entweder den Index der Zeile enthält, für die das Ereignis aufgerufen wurde, oder den Zeilenschlüssel, falls die RecordKey -Eigenschaft festgelegt ist. |
SortEventColumn |
Der Name der Spalte, die „OnChange -Ereignis sortieren“ ausgelöst hat |
SortEventDirection |
Der Richtung der Sortierung, die „OnChange -Ereignis sortieren“ ausgelöst hat |
Grundlegende Nutzung
Um festzulegen, welche Spalten in der DetailsList
angezeigt werden, konfigurieren Sie die folgenden Eigenschaften der DetailsList
:
Felder. Fügen Sie die gewünschten Felder hinzu, indem Sie rechts im Flyoutmenü der Steuerelemente die Option „Bearbeiten“ auswählen (dadurch wird dieselbe Oberfläche zum Ändern vordefinierter Datenkarten verwendet).
Spalten. Stellen Sie eine spezifische Zuordnung zwischen Spalten und Feldern in der Eigenschaft
Columns
bereit.
Beispiel:
Ordnen Sie die Dataverse Konten-Systemtabelle mit der folgenden Formel vor:
Table(
{
ColName: "name",
ColDisplayName: "Name",
ColWidth: 200,
ColSortable: true,
ColIsBold: true,
ColResizable: true
},{
ColName: "address1_city",
ColDisplayName: "City:",
ColShowAsSubTextOf: "name"
},{
ColName: "address1_country",
ColDisplayName: "Country:",
ColShowAsSubTextOf: "name"
},{
ColName: "telephone1",
ColDisplayName: "Telephone",
ColWidth: 100,
ColSortable: true,
ColResizable: true
},{
ColName: "primarycontactid",
ColDisplayName: "Primary Contact",
ColWidth: 200,
ColSortable: true,
ColSortBy: "_primarycontactid_value",
ColResizable: true,
ColCellType: "link"
}
)
Untertextspalten
Die ColShowAsSubTextOf
-Spalteneigenschaft definiert eine Spalte so, dass sie in einer anderen Spalte unter dem Wert angezeigt wird. Dies kann verwendet werden, um sekundäre Informationen und erweiterbare Inhalte anzuzeigen (siehe nachfolgend).
Wenn Sie eine wie folgt definierte Sammlung hätten:
ClearCollect(colAccounts,
{id:"1",name:"Contoso",city:"Redmond",country:"U.S.",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",expand:false},
{id:"2",name:"Litware, Inc",city:"Dallas",country:"U.S.",description:"Donec vel pellentesque turpis.",expand:false});
Könnten Sie die Spalten wie folgt definieren:
Table(
{
ColName: "name",
ColDisplayName: "Account Name",
ColWidth: Self.Width-100,
ColIsBold:true
},
{
ColName: "city",
ColDisplayName: "City:",
ColShowAsSubTextOf:"name",
ColLabelAbove:false,
ColIsBold:true,
ColSubTextRow: 1
},
{
ColName: "country",
ColDisplayName: "Country:",
ColShowAsSubTextOf:"name",
ColLabelAbove:false,
ColIsBold:true,
ColSubTextRow: 1
},
{
ColName: "description",
ColDisplayName: "",
ColShowAsSubTextOf:"name",
ColLabelAbove:false,
ColIsBold:false,
ColSubTextRow: 2
}
)
Sie erhalten im Ergebnis eine Tabelle, die wie folgt aussieht:
Zellentypen
Die ColCellType
-Spalteneigenschaft akzeptiert folgende Werte: expand
, tag
, image
, indicatortag
, clickableimage
, link
Erweitern/Reduzieren
Wenn für die „Untertext“-Zeile ein Symbol zum Erweitern/Reduzieren erforderlich ist, kann dem Spalten-DataSet eine zusätzliche Spalte hinzugefügt werden und die Spaltendefinition ColCellType
ebenfalls auf expand
gesetzt werden:
{ColName:"expand",ColDisplayName:"",ColWidth:32,ColResponsive:false, ColRightAligned:true, ColCellType:"expand"}
Angenommen, eine RecordKey
-Eigenschaft ist auf die index
-Spalte festgelegt. Dann könnte das OnChange
-Ereignis Folgendes enthalten, um die Zeilen auf- bzw. zusammenzuklappen:
If(Self.EventName="CellAction" && Self.EventColumn="expand",
With(LookUp(colExpand,index=Self.EventRowKey) As Row,
Patch(colExpand,Row,{expand:!Row.expand})
)
);
Dadurch wird nach der Zeile gesucht, für die die Zellenaktion bei Verwendung des Index aufgerufen wurde (falls kein RecordKey
festgelegt ist, enthält der EventRowKey
die Zeilennummer), und schaltet dann den Erweiterungswert um.
Dies führt zu folgendem Ergebnis:
Tag und Indikator-Tag
Mithilfe eines tag
oder indicatortag
Zellentyps können Sie farbige Inline-Tags erstellen, um den Zelleninhalt anzuzeigen.
tag
- Dadurch wird ein Tag-Feld mit farbigem Hintergrund und Rand angezeigt.tagindicator
- Zeigt ein Tag-Feld mit einem farbigen Kreisindikator
Die Farben können zeilenweise geändert werden. Das Spaltenmetadaten-DataSet stellt einfach den Namen der Spalten bereit, die die Farben für die Tags enthalten.
Beachten Sie das DataSet:
ClearCollect(
colAccounts,
{
name: "Contoso",
city: "Redmond",
country: "U.S.",
TagColor: "rgb(0, 183, 195)",
TagBorderColor: "rgb(0,137,147)"
},
{
name: "Litware, Inc",
city: "Dallas",
country: "U.S.",
TagColor: "rgb(255, 140, 0)",
TagBorderColor: "rgb(194,107,0)"
}
);
Sie könnten dann die Spaltenmetadaten ergänzen, um zwei Spalten hinzuzufügen, von denen eine als Tag und die andere als Tag-Indikator angezeigt wird – wobei jede die Spalten TagColor und TagBorderColor nutzt, um die Farben zu bestimmen:
{
ColName: "country",
ColDisplayName: "Country",
ColCellType:"tag",
ColWidth: 60,
ColTagColorColumn: "TagColor",
ColTagBorderColorColumn: "TagBorderColor"
},
{
ColName: "country",
ColDisplayName: "Country",
ColCellType:"indicatortag",
ColWidth: 60,
ColTagColorColumn: "TagColor",
ColTagBorderColorColumn: "TagBorderColor"
}
Dies führt zu folgendem Ergebnis:
Bild und klickbares Bild
Mithilfe eines image
- oder clickableimage
-Zelltyps können Sie optional auszuwählende Inline-Bilder konfigurieren, um die OnChange
-Aktion auszulösen.
Der Bildinhalt kann durch Präfixe definiert werden:
https:
Ein verknüpfen zu einem externen Bild. Beispiel: https://via.placeholder.com/100x70icon:
Mit einem der Fluent UI-Symbole Zum Beispiel,icon:SkypeCircleCheck
data:
Verwenden von Inline-SVG-Bilddaten: zum Beispieldata:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...
Wenn das Bild vom Typ clickableimage
ist, wird das OnChange
-Ereignis ausgelöst, wenn das Symbol ausgewählt ist. Ein EvenName
einer CellAction
, EventColumn
stellt den Namen der Bildspalte sowie des EventRowKey
bereit, das der RecordKey
der Zeile ist (falls kein RecordKey
festgelegt ist, enthält der EventRowKey
die Zeilennummer).
Betrachten Sie zum Beispiel die Zeilendaten:
{
id: "1",
name: "Contoso",
city: "Redmond",
country: "U.S.",
ImageColor: "rgb(0, 183, 195)",
externalimage: "https://via.placeholder.com/100x70",
iconimage: "icon:SkypeCircleCheck"
},
{
id: "2",
name: "Litware, Inc",
city: "Dallas",
country: "U.S.",
ImageColor: "rgb(255, 140, 0)",
externalimage: "https://via.placeholder.com/100x70",
iconimage: "icon:SkypeCircleCheck"
}
und die Spaltenmetadaten:
{
ColName: "externalimage",
ColDisplayName: "Image",
ColCellType:"image",
ColWidth: 60,
ColImageWidth: 60,
ColImagePadding: 8,
ColVerticalAlign: "Top"
},
{
ColName: "iconimage",
ColDisplayName: "Clickable Image",
ColCellType:"clickableimage",
ColWidth: 60,
ColImageWidth: 60,
ColImagePadding: 8,
ColVerticalAlign: "Top"
}
Dies führt zu folgendem Ergebnis:
In der clickableimage
-Spalte kann das OnChange
-Ereignis dann verarbeiten, wenn ein Benutzer (mit Maus oder Tastatur) ein Symbol auswählt (vorausgesetzt, es ist nicht deaktiviert) mithilfe von:
If(Self.EventName="CellAction",
Notify("CellAction " & Self.EventColumn & " " & Self.EventRowKey)
)
Der EventRowKey
wird mit dem Spaltenwert gefüllt, der als RecordKey
-Eigenschaft definiert ist.
Links
Spalten können als Links gerendert werden, die das OnChange-Ereignis bei Auswahl des Links auslösen, ähnlich wie bei den oben beschriebenen klickbaren Bildern.
Die Spaltenmetadaten für einen Link werden wie folgt konfiguriert:
{
ColName: "name",
ColDisplayName: "Account Name",
ColWidth: 150,
ColIsBold:true,
ColCellType: "link"
}
Dies führt dazu, dass der Zellinhalt wie folgt gerendert wird:
Das OnChange
-Ereignis wird erneut ausgelöst, wenn auf den Link geklickt wird. Die EventColumn
ist der Name der Spalte, die den Link enthält, und der EventRowKey
ist mit dem Spaltenwert gefüllt, der als RecordKey
-Eigenschaft definiert ist.
Mehrwertige Spalten
Wenn ein Spaltenwert mehrere Werte haben kann, indem er auf eine Tabelle/Sammlung festgelegt ist. Dadurch werden die Werte als mehrere Zellenwerte gerendert. zum Beispiel:
{
id: "1",
name: "Contoso",
tags:["#PowerApps","#PowerPlatform"]
},
Die Spaltenmetadaten könnten dann wie folgt lauten:
{
ColName: "tags",
ColDisplayName: "Tags",
ColWidth: 250,
ColFirstMultiValueBold :true,
ColMultiValueDelimiter:" "
}
Dies würde zu folgender Tabelle führen:
Behavior
Ereignisse sortieren
Eine Spalte wird durch das Setzen der ColSortable
-Eigenschaft auf „True“ als sortierbar definiert. Wenn die Spalte einen Textwert anzeigt, der sich von der erforderlichen Sortierreihenfolge unterscheidet (zum Beispiel eine formatierte Datums‑ oder Statusspalte), kann mithilfe der ColSortBy
-Eigenschaft eine andere Sortierspalte bestimmt werden.
Die Sortierung erfolgt dann auf zweierlei Weise:
- Automatisch bei Verbindung mit einer Dataverse-Datenquelle.
- Manuell bei Verwendung von Sammlungen.
Automatische Sortierung
Wenn es sich bei dem Elemente-DataSet um ein natives Dataverse-DataSet handelt, wird es automatisch sortiert, wenn eine Spalte als sortierbar markiert ist. Wenn Änderungen an der Form einer Dataverse-Sammlung mithilfe der AddColumn
-Option vorgenommen wurden, oder durch das Speichern der Daten in einer Sammlung, funktioniert die automatische Sortierung nicht mehr und eine manuelle Sortierung muss implementiert werden.
Manuelle Sortierung
Die manuelle Sortierung wird außerhalb der Komponente unterstützt, um die Unterstützung benutzerdefinierter Konnektoren und die Sortierung lokaler Sammlungen zu ermöglichen, wenn keine Dataverse-Verbindung besteht. Spalten können als sortierbar oder nicht sortierbar definiert werden. Wenn die Spaltensortierung ausgewählt ist, wird ein OnChange
-Ereignis ausgelöst, welches die Spalte und Richtung bereitstellt. Die App sollte dann diese Werte verwenden, um die gebundene Sammlung in die Tabelle zu ändern und mit den sortierten Datensätzen zu aktualisieren.
Fügen Sie der Spaltensammlung eine sortierbare boolesche Spalte hinzu.
Fügen Sie der
Columns.ColSortable
-Eigenschaft den Namen der sortierbaren Spalte hinzu.Fügen Sie dem
OnChange
-Ereignis der Tabelle folgenden Code hinzu:If(Self.EventName="Sort", UpdateContext({ ctxSortCol:Self.SortEventColumn, ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false) }) );
Legen Sie die Eigenschaft
Sort Column
aufctxSortCol
fest.Legen Sie die Eigenschaft
Sort Direction
fest auf:If(ctxSortAsc, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending)
Legen Sie die Sammlung der Eingabeelemente so fest, dass sie mithilfe der oben festgelegten Kontextvariablen sortiert wird:
SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
Wenn das OnChange-Ereignis ausgelöst wird, nachdem der Benutzer auf die Spaltenkopfzeile geklickt hat, um die Sortierung zu ändern, werden die Sortierkontextvariablen mithilfe der neuen bereitgestellten Sortierinformationen aktualisiert, wodurch das Eingabe-DataSet neu sortiert und die Tabelle entsprechend aktualisiert werden.
Seitenwechsel
Das Paging wird intern von der Komponente verarbeitet. Allerdings müssen die Schaltflächen zum Zurück-/Vorwärtsgehen von der Hosting-App erstellt und Ereignisse an die Komponente gesendet werden.
Folgende Eigenschaften werden zur Steuerung des Pagings verwendet:
PageSize
– Definiert, wie viele Datensätze pro Seite geladen werden sollen.PageNumber
- Gibt die aktuell angezeigte Seite aus.HasNextPage
– Gibt „true“ aus, wenn eine nächste Seite vorhanden ist.HasPreviousPage
– Gibt „true“ aus, wenn eine vorherige Seite vorhanden ist.TotalRecords
- Gibt die Gesamtzahl der verfügbaren Datensätze aus.
Die Paging-Schaltflächen können dann wie folgt definiert werden:
- Erste Seite laden
OnSelect
:UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
DisplayMode
:If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
- Vorherige Seite laden
OnSelect
:UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
DisplayMode
:If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
- Nächste Seite laden
OnSelect
:UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
DisplayMode
:If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)
Die Beschriftung für die Datensatzanzahl kann auf einen Ausdruck ähnlich dem folgenden festgelegt werden:
grid.TotalRecords & " record(s) " & Text(CountRows(grid.SelectedItems)+0) & " selected"
Den Anfang der nächsten Seite anzeigen
Dies wird über das Ereignis 'SetFocusOnRow' realisiert. Wenn Sie die InputEvent-Eigenschaft an ctxGridEvent
gebunden hätten, würden Sie auf der OnSelect-Eigenschaft der nächsten Seitenschaltfläche Folgendes verwenden: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});
Eingabeereignisse
Die InputEvent
-Eigenschaft kann auf einen oder mehrere der folgenden Werte festgelegt werden:
SetFocus
- Setzt den Fokus auf die erste Zeile von RasterClearSelection
- Löscht alle Auswahlen und setzt die Standardauswahl zurück.SetSelection
- Setzt die Auswahl wie definiert durchRowSelected
Spalte.LoadNextPage
- Lädt die nächste Seite, falls vorhandenLoadPreviousPage
- Lädt die vorherige Seite, falls vorhandenLoadFirstPage
- Lädt die erste Seite
Um sicherzustellen, dass das Eingangsereignis abgeholt wird, muss es mit einem Zufallswert versehen werden. Beispiel: SetSelection" & Text(Rand())
Weitere Details finden Sie unten.
Ausgewählte Elemente und Zeilenaktionen
Die Komponente unterstützt die Auswahlmodi Single, Mehrere oder Keine.
Bei der Auswahl von Elementen werden die Eigenschaften SelectedItems
und Selected
aktualisiert.
SelectedItems
– Wenn sich die Tabelle im Mehrfachauswahlmodus befindet, enthält diese einen oder mehrere Datensätze aus der Artikelsammlung.Selected
– Wenn sich die Tabelle im Einzelauswahlmodus befindet, enthält sie die ausgewählten Datensätze.
Wenn ein Benutzer die Zeilenaktion aufruft, entweder durch Doppelklick oder durch Drücken der Eingabetaste oder einer ausgewählten Zeile, wird das OnSelect
-Ereignis ausgelöst. Die Selected
-Eigenschaft enthält einen Verweis auf den Datensatz, der aufgerufen wurde. Dieses Ereignis kann verwendet werden, um einen detaillierten Datensatz anzuzeigen oder einen anderen Bildschirm aufzurufen.
Wenn die ausgewählten Zeilen geändert werden und die Eigenschaft RaiseOnRowSelectionChangeEvent
aktiviert ist, wird das OnChange
-Ereignis ausgelöst, wobei der EventName
auf OnRowSelectionChange
festgelegt ist. Wenn die App auf eine einzelne Zeilenauswahl statt auf einen Zeilendoppelklick reagieren muss, erkennt OnChange
dies mithilfe eines Codes ähnlich dem folgenden:
If(
Self.EventName = "OnRowSelectionChange",
If(!IsBlank(Self.EventRowKey),
// Row Selected
)
);
Löschung der aktuell ausgewählten Elemente
Um die ausgewählten Datensätze zu löschen, müssen Sie die InputEvent
-Eigenschaft auf eine Zeichenfolge festlegen, die mit Folgendem beginnt
Zum Beispiel
UpdateContext({ctxTableEvent:"ClearSelection"&Text(Rand())})
Die Kontextvariable ctxTableEvent
kann dann an die InputEvent
-Eigenschaft gebunden werden.
Zeilenauswahl festlegen
Wenn es ein Szenario gibt, in dem ein bestimmter Satz an Datensätzen programmgesteuert ausgewählt werden soll, kann die InputEvent
-Eigenschaft auf SetSelection
oder SetFocusOnRowSetSelection
festgelegt werden in Kombination mit der Festlegung der RecordSelected
-Eigenschaft des Datensatzes.
Wenn Sie zum Beispiel das folgende DataSet hätten:
{RecordKey:1, RecordSelected:true, name:"Row1"}
Zur Auswahl und zur Auswahl der ersten Zeile können Sie das InputEvent
auf "SetFocusOnRowSetSelection"&Text(Rand())
oder "SetSelection"&Text(Rand())
festlegen
Das „Bei Änderung“-Verhalten konfigurieren
Fügen Sie die folgende Formel in der OnChange
-Eigenschaft der Komponente hinzu und ändern Sie sie, um bestimmte Aktionen basierend auf dem von der Komponente bereitgestellten EventName
zu konfigurieren.
- Ereignisse auslösen, wenn ein Benutzer die ausgewählte Zeile ändert: Aktivieren Sie die Eigenschaft OnRowSelectionChange-Ereignis auslösen in der Komponente.
- Linkverhalten konfigurieren: Fügen Sie Spalten hinzu, wobei der ColCellType-Wert auf Link gesetzt ist.
/* Runs when selected row changes and control property 'Raise OnRowSelection event' is true */
If( Self.EventName = "OnRowSelectionChange",
Notify( "Row Select " & Self.EventRowKey )
);
/* Runs when a user selects a column with ColCellType set to 'link' */
If( Self.EventName = "CellAction",
Notify( "Open Link " & Self.EventColumn & " " & Self.EventRowKey )
)
Einschränkungen
Diese Codekomponente kann nur in Canvas-Apps und benutzerdefinierten Seiten verwendet werden.