Freigeben über


DetailsList Kontrolle

Ein Steuerelement zum Anzeigen eines Datensatzes.

Notiz

Sie finden die vollständige Dokumentation und den Quellcode im GitHub-Codekomponenten-Repository.

DetailsList-Steuerelement.

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
image-20220322144857658
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:

  1. 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).

  2. 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:
image-20220323115627812

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:
Beispiel zum Erweitern und Zusammenklappen durch Animation erklärt

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:
image-20220323150248449

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/100x70
  • icon: Mit einem der Fluent UI-Symbole Zum Beispiel, icon:SkypeCircleCheck
  • data: Verwenden von Inline-SVG-Bilddaten: zum Beispiel data: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:
image-20220323161817524

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.

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:
image-20220323162653369

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:
image-20220324160725874

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:

  1. Automatisch bei Verbindung mit einer Dataverse-Datenquelle.
  2. 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.

  1. Fügen Sie der Spaltensammlung eine sortierbare boolesche Spalte hinzu.

  2. Fügen Sie der Columns.ColSortable-Eigenschaft den Namen der sortierbaren Spalte hinzu.

  3. 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)
     })
    );
    
  4. Legen Sie die Eigenschaft Sort Column auf ctxSortCol fest.

  5. Legen Sie die Eigenschaft Sort Direction fest auf:

    If(ctxSortAsc,
        'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending,
        'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending) 
    
  6. 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 Raster
  • ClearSelection - Löscht alle Auswahlen und setzt die Standardauswahl zurück.
  • SetSelection - Setzt die Auswahl wie definiert durch RowSelected Spalte.
  • LoadNextPage - Lädt die nächste Seite, falls vorhanden
  • LoadPreviousPage - Lädt die vorherige Seite, falls vorhanden
  • LoadFirstPage - 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.