Besturingselement DetailsList

Een besturingselement dat wordt gebruikt om een set gegevens weer te geven.

Omschrijving

Een detaillijst (DetailsList) is een robuuste manier om een verzameling items die veel informatie bevatten weer te geven en mensen in staat te stellen de inhoud te sorteren, groeperen en filteren. Gebruik een DetailsList wanneer informatiedichtheid van cruciaal belang is.

Het codeonderdeel DetailsList maakt het gebruik mogelijk van het Fluent UI-onderdeel DetailsList vanuit canvas-apps en aangepaste pagina's.

• Kan worden gebonden aan een Dataverse-gegevensset of lokale collectie.
• Ondersteunt configureerbare kolommen gescheiden van de kolommetagegevens geleverd door de brongegevensset voor flexibiliteit.
• Celtypen voor koppelingen, pictogrammen, uitvouwen/samenvouwen en subtekstcellen.
• Ondersteuning voor paging.
• Ondersteuning voor sorteren met behulp van Dataverse-sortering of configureerbare SortBy-eigenschappen.

Eigenschappen

Belangrijke eigenschappen

Items-eigenschappen

Deze kenmerken moeten beschikbaar zijn in de gegevensbron om de gerelateerde functionaliteit in te schakelen. De Power Fx-formule AddColumns() kan worden gebruikt om deze waarden toe te voegen aan de oorspronkelijke gegevensbron.

Columns-eigenschappen

Eigenschappen	Omschrijving
ColDisplayName	(Vereist) - geeft de naam van de kolom op die in de koptekst moet worden weergegeven.
ColName	(Vereist) - geeft de naam van het werkelijke veld van de kolom in de collectie Items op.
ColWidth	(Vereist) - geeft de absolute vaste breedte van de kolom in pixels op.
ColCellType	Het celtype dat moet worden weergegeven. Mogelijke waarden: expand, tag, indicatortag, image, clickableimage, link. Zie de volgende secties voor meer informatie.
ColHorizontalAlign	De uitlijning van de celinhoud als ColCellType van het type image of clickableimage is.
ColVerticalAlign	De uitlijning van de celinhoud als ColCellType van het type image of clickableimage is.
ColMultiLine	Waar als terugloop nodig is voor de tekst in de cellen als deze te lang is om in de beschikbare breedte te passen.
ColResizable	Waar als de breedte van de kolomkop aanpasbaar moet zijn.
ColSortable	Waar als de kolom sorteerbaar moet zijn. Als de gegevensset automatische sortering via een directe Dataverse-verbinding ondersteunt, worden de gegevens automatisch gesorteerd. Anders wordt de uitvoer van SortEventColumn en SortEventDirection ingesteld en moet deze worden gebruikt in de Power FX-bindingsexpressie van de record.
ColSortBy	De naam van de kolom die voor de gebeurtenis OnChange moet worden opgegeven wanneer de kolom wordt gesorteerd. Als u datumkolommen sorteert, sorteert u bijvoorbeeld op de werkelijke datumwaarde en niet op de opgemaakte tekst die in de kolom wordt weergegeven.
ColIsBold	Waar als de celgegevens vet moeten zijn
ColTagColorColumn	Als het celtype label is, stelt u deze in op de hexadecimale achtergrondkleur van het tekstlabel. Kan worden ingesteld op transparent. Als het celtype geen tag is, stelt u deze in op een hexadecimale kleur om het te gebruiken als een tag-cel voor een indicatorcirkel. Als de tekstwaarde leeg is, wordt de tag niet weergegeven.
ColTagBorderColorColumn	Stel in op een hexadecimale kleur die moet worden gebruikt als de randkleur van een tekstlabel. Kan worden ingesteld op transparent.
ColHeaderPaddingLeft	Voegt opvulling toe aan de kolomkoptekst (pixels)
ColShowAsSubTextOf	Als u dit instelt op de naam van een andere kolom, wordt de kolom een onderliggend item van die kolom. Zie hieronder onder Subtekstkolommen.
ColPaddingLeft	Voegt opvulling toe aan de linkerkant van de onderliggende cel (pixels)
ColPaddingTop	Voegt opvulling toe aan de bovenkant van de onderliggende cel (pixels)
ColLabelAbove	Verplaatst het label boven de onderliggende celwaarde als deze wordt weergegeven als een subtekstkolom.
ColMultiValueDelimiter	Voegt matrixwaarden met meerdere waarden samen met dit scheidingsteken. Zie hieronder onder kolommen met meerdere waarden.
ColFirstMultiValueBold	Wanneer een matrixwaarde met meerdere waarden wordt weergegeven, wordt het eerste item vetgedrukt weergegeven.
ColInlineLabel	Indien ingesteld op een tekenreekswaarde, wordt deze gebruikt om een label in de celwaarde weer te geven, dat kan afwijken van de kolomnaam. Voorbeeld:
ColHideWhenBlank	Indien waar, worden alle inline-labels en opvulling van cellen verborgen als de celwaarde leeg is.
ColSubTextRow	Stel bij het weergeven van meerdere cellen in een subtekstcel de rij-index in. Nul geeft de rij van de hoofdcelinhoud aan.
ColAriaTextColumn	De kolom die de aria-beschrijving voor cellen bevat (bijvoorbeeld pictogramcellen).
ColCellActionDisabledColumn	De kolom die een booleaanse vlag bevat om te bepalen of een celactie (bijvoorbeeld pictogramcellen) is uitgeschakeld.
ColImageWidth	De grootte (in pixels) van het pictogram of de afbeelding.
ColImagePadding	De opvulling rond een pictogram-/afbeeldingscel.
ColRowHeader	Definieert een kolom die groter moet worden weergegeven dan de andere cellen (14 px in plaats van 12 px). Er is normaal gesproken slechts één rijkoptekst per kolomset.

Stijleigenschappen

Eigenschappen van gebeurtenis

Basisgebruik

Configureer de volgende eigenschappen van de DetailsList om te bepalen welke kolommen worden weergegeven in de DetailsList:

1. Velden. Voeg de gewenste velden toe door de optie Bewerken te selecteren in het flyout-menu aan de rechterkant (dit gebruikt dezelfde interface voor het wijzigen van vooraf gedefinieerde gegevenskaarten).

2. Kolommen. Zorg voor specifieke toewijzing tussen kolommen en velden in de eigenschap Columns.

Voorbeeld:

Toewijzing aan de Dataverse-systeemtabel Accounts, met de onderstaande formule:

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"
    }
)

Subtekstkolommen

Met de kolomeigenschap ColShowAsSubTextOf wordt een kolom gedefinieerd zoals die wordt weergegeven onder de waarde in een andere kolom. Dit kan worden gebruikt om secundaire informatie en uitvouwbare inhoud te tonen (zie hieronder).

Als u een collectie hebt gedefinieerd als:

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});

U kunt de kolommen definiëren als:

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
    }
)

Het resultaat is een tabel die er als volgt uitziet:

Celtypen

De kolomeigenschap ColCellType accepteert de volgende waarden: expand, tag, image, indicatortag, clickableimage, link

Uitvouwen/samenvouwen

Als de rijen Subtekst een pictogram voor uitvouwen/samenvouwen vereisen, kan een extra kolom aan de kolomgegevensset worden toegevoegd en kan de kolomdefinitie ColCellType ook worden ingesteld op expand:

{ColName:"expand",ColDisplayName:"",ColWidth:32,ColResponsive:false, ColRightAligned:true, ColCellType:"expand"}

Ervan uitgaande dat een RecordKey-eigenschap is ingesteld op de kolom index, kan de gebeurtenis OnChange dan het volgende bevatten om de rijen uit/samen te vouwen:

If(Self.EventName="CellAction" && Self.EventColumn="expand",
    With(LookUp(colExpand,index=Self.EventRowKey) As Row,
        Patch(colExpand,Row,{expand:!Row.expand})
        )
);

Hiermee wordt gezocht naar de rij waarvoor de celactie is aangeroepen bij het gebruik van de index (indien geen RecordKey is ingesteld, bevat de EventRowKey het rijnummer), en wordt vervolgens de waarde voor uitvouwen ingeschakeld.

Dit geeft het volgende resultaat:

Label en indicatorlabel

Met behulp van een celtype tag of indicatortag kunt u inline gekleurde tags maken om de celinhoud weer te geven.

• tag: hiermee wordt een tag-vak met een gekleurde achtergrond en rand weergegeven
• tagindicator- toont een labelvak met een gekleurde cirkelindicator

De kleuren kunnen per rij variëren en dus biedt de gegevensset van de kolommetagegevens gewoon de naam van de kolommen die de tag-kleuren bevatten.

Bekijk de gegevensset:

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)"
    }
);

U kunt dan de kolommetagegevens toevoegen om twee kolommen toe te voegen, de ene weergegeven als een label en de andere als een labelindicator - elk met behulp van de TagColor- en TagBorderColor-kolommen om de kleuren te bepalen:

{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"tag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
},
{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"indicatortag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
}

Dit geeft het volgende resultaat:

Afbeelding en klikbare afbeelding

Met een celtype van image of clickableimage kunt u inline afbeeldingen configureren die optioneel kunnen worden geselecteerd om de actie OnChange te activeren.

De afbeeldingsinhoud kan worden gedefinieerd door deze vooraf te laten gaan door:

• https: een koppeling naar een externe afbeelding. Voorbeeld: https://via.placeholder.com/100x70
• icon: Met een van de Fluent UI-pictogrammen, bijvoorbeeld icon:SkypeCircleCheck
• data: Met inline svg-afbeeldingsgegevens, bijvoorbeeld data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Als de afbeelding van het type clickableimage is, wordt de gebeurtenis OnChange geactiveerd wanneer het pictogram wordt geselecteerd, met een EvenName van CellAction, met EventColumn die de naam van de afbeeldingskolom opgeeft en EventRowKey als de RecordKey van de rij (als geen RecordKey is ingesteld, bevat de EventRowKey het rijnummer).

Kijk bijvoorbeeld naar de rijgegevens:

{
        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"
    }

en de kolommetagegevens:

 {
        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"
}

Dit geeft het volgende resultaat:

Voor de kolom clickableimage kan de gebeurtenis OnChange dan worden afgehandeld wanneer een gebruiker (met muis of toetsenbord) een pictogram selecteert (als het niet is uitgeschakeld) met behulp van:

If(Self.EventName="CellAction",
	Notify("CellAction " & Self.EventColumn & " " & Self.EventRowKey)
)

De EventRowKey wordt gevuld met de kolomwaarde die is gedefinieerd als de eigenschap RecordKey.

Koppelingen

Kolommen kunnen worden weergegeven als koppelingen waarmee de OnChange-gebeurtenis wordt geactiveerd wanneer de koppeling wordt geselecteerd op dezelfde manier als hoe (hierboven beschreven) klikbare afbeeldingen werken.

De kolommetagegevens voor een koppeling worden als volgt geconfigureerd:

  {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: 150,
        ColIsBold:true,
        ColCellType: "link"
    }

Hierdoor wordt de celinhoud weergegeven als:

De gebeurtenis OnChange wordt opnieuw geactiveerd wanneer op de koppeling wordt geklikt, waarbij de EventColumn de naam van de kolom is die de koppeling bevat, en de EventRowKey is gevuld met de kolomwaarde die is gedefinieerd als de eigenschap RecordKey.

Kolommen met meerdere waarden

Een kolomwaarde kan meerdere waarden hebben door deze in te stellen op een Tabel/Collectie. Hierdoor worden de waarden weergegeven als meerdere celwaarden. Voorbeeld:

 {
        id: "1",
        name: "Contoso",
        tags:["#PowerApps","#PowerPlatform"]
    },

De kolommetagegevens kunnen dan als volgt zijn:

 {
        ColName: "tags",
        ColDisplayName: "Tags",
        ColWidth: 250,
        ColFirstMultiValueBold :true,
        ColMultiValueDelimiter:" "
    }

Hiermee wordt in de tabel het volgende weergegeven:

Gedrag

Sorteergebeurtenissen

Een kolom wordt als sorteerbaar gedefinieerd door de eigenschap ColSortable op waar in te stellen. Als de kolom een tekstwaarde toont die afwijkt van de vereiste sorteervolgorde (bijvoorbeeld een opgemaakte datum- of statuskolom), dan kan een andere sorteerkolom worden opgegeven met de eigenschap ColSortBy.

Het sorteren gebeurt dan op twee manieren:

1. Automatisch bij verbinding met een Dataverse-gegevensbron.
2. Handmatig bij het gebruik van collecties.

Automatisch sorteren

Wanneer de gegevensset Items een native Dataverse-gegevensset is, wordt deze automatisch gesorteerd als een kolom is gemarkeerd als sorteerbaar. Als er wijzigingen zijn aangebracht in de vorm van een Dataverse-collectie met behulp van AddColumn, of door de gegevens in een collectie op te slaan, werkt automatisch sorteren niet meer en moet handmatig sorteren worden geïmplementeerd.

Handmatige sortering

Handmatig sorteren wordt ondersteund buiten het onderdeel om ondersteuning van aangepaste connectors en lokale collectiesortering mogelijk te maken wanneer het niet is verbonden met een Dataverse-verbinding. Kolommen kunnen worden gedefinieerd als sorteerbaar of niet. Wanneer de kolomsortering is geselecteerd, wordt een OnChange-gebeurtenis geactiveerd waarmee de kolom en richting worden opgegeven. De app moet deze waarden vervolgens gebruiken om de gebonden collectie te wijzigen in de tabel die moet worden bijgewerkt met de gesorteerde records.

1. Voeg in de collectie Kolommen een sorteerbare Booleaanse kolom toe

2. Voeg de naam van de sorteerbare kolom toe aan de eigenschap Columns.ColSortable

3. Voeg in de gebeurtenis OnChange van de tabel de code toe:

   If(Self.EventName="Sort", 
   UpdateContext({
                   ctxSortCol:Self.SortEventColumn,
                   ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false)
    })
   );
   

4. Stel de eigenschap Sort Column in op ctxSortCol

5. Stel de eigenschap Sort Direction in op:

   If(ctxSortAsc,
       'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending,
       'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending) 
   

6. Stel de collectie invoeritems in om te sorteren met behulp van de hierboven ingestelde contextvariabelen:

   SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
   

Wanneer de OnChange-gebeurtenis wordt geactiveerd nadat de gebruiker de kolomkop heeft geselecteerd om de sortering te wijzigen, worden de contextvariabelen voor sorteren bijgewerkt met behulp van de nieuwe sorteerinformatie. Hierdoor wordt de invoergegevensset opnieuw gesorteerd en de tabel dienovereenkomstig bijgewerkt.

Paginering

Paging wordt intern afgehandeld door het onderdeel, maar de knoppen om terug/vooruit te gaan moeten worden gemaakt door de hosting-app en gebeurtenissen moeten naar het onderdeel worden verzonden.

De volgende eigenschappen worden gebruikt om paging te beheren:

• PageSize - definieert hoeveel records er per pagina moeten worden geladen.
• PageNumber - voert de huidige pagina uit die wordt weergegeven.
• HasNextPage - is waar als er een volgende pagina is.
• HasPreviousPage - Is waar als er een vorige pagina is.
• TotalRecords - voert het totaal aantal beschikbare records uit.

De paging-knoppen kunnen dan als volgt worden gedefinieerd:

• Eerste pagina laden
  • OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Vorige pagina laden
  • OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Volgende pagina laden
  • OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
  • DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

Het label voor aantal records kan worden ingesteld op een expressie die lijkt op:

grid.TotalRecords & " record(s)  " & Text(CountRows(grid.SelectedItems)+0) & " selected" 

De bovenkant van de volgende pagina weergeven

Dit wordt geïmplementeerd met behulp van de gebeurtenis SetfocusOnRow. Als u de eigenschap InputEvent hebt gebonden aan ctxGridEvent, kunt u voor de eigenschap OnSelect voor de knop op de volgende pagina UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())}); gebruiken

Invoergebeurtenissen

De eigenschap InputEvent kan worden ingesteld op een van de volgende mogelijkheden:

• SetFocus: stelt de focus in op de eerste rij van het raster
• ClearSelection: hiermee wordt elke selectie gewist en wordt de standaardselectie hersteld.
• SetSelection - hiermee wordt de selectie ingesteld zoals gedefinieerd door de kolom RowSelected.
• LoadNextPage: hiermee wordt de volgende pagina geladen als die er is
• LoadPreviousPage: hiermee wordt de vorige pagina geladen als die er is
• LoadFirstPage - hiermee wordt de eerste pagina geladen

Om ervoor te zorgen dat de invoergebeurtenis wordt opgehaald, moet worden volstaan met een willekeurige waarde. Voorbeeld: SetSelection" & Text(Rand())

Zie hierna voor meer informatie.

Geselecteerde items en rijacties

Het onderdeel ondersteunt de selectiemodi Enkel, Meerdere of Geen.

Bij het selecteren van items worden de eigenschappen SelectedItems en Selected bijgewerkt.

• SelectedItems - als de tabel op de selectiemodus Meerdere is ingesteld, bevat deze een of meer records uit de collectie Items.
• Selected - als de tabel op de selectiemodus Enkel is ingesteld, bevat deze de geselecteerde records.

Wanneer een gebruiker de rijactie aanroept, door te dubbelklikken of op Enter of een geselecteerde rij te drukken, wordt de gebeurtenis OnSelect geactiveerd. De eigenschap Selected bevat een verwijzing naar de record die is aangeroepen. Deze gebeurtenis kan worden gebruikt om een gedetailleerde record te tonen of om naar een ander scherm te navigeren.

Als de eigenschap RaiseOnRowSelectionChangeEvent is ingeschakeld wanneer de geselecteerde rijen worden gewijzigd, wordt de gebeurtenis OnChange geactiveerd, waarbij EventName is ingesteld op OnRowSelectionChange. Als de app moet reageren op het selecteren van een enkele rij in plaats van dubbelklikken op een rij, kan OnChange dit detecteren met behulp van code die lijkt op:

If(
    Self.EventName = "OnRowSelectionChange",
        If(!IsBlank(Self.EventRowKey),
        	// Row Selected
        )
);

De momenteel geselecteerde items wissen

Als u de geselecteerde records wilt wissen, moet u de eigenschap InputEvent instellen op een tekenreeks die begint met

Voorbeeld:

UpdateContext({ctxTableEvent:"ClearSelection"&Text(Rand())})

De contextvariabele ctxTableEvent kan dan worden gebonden aan de eigenschap InputEvent.

Rijselectie instellen

Als er een scenario is waarin een specifieke set records programmatisch moet worden geselecteerd, kan de eigenschap InputEvent worden ingesteld op SetSelection of SetFocusOnRowSetSelection in combinatie met het instellen van de eigenschap RecordSelected in de record.

Als u bijvoorbeeld de volgende gegevensset hebt:

{RecordKey:1, RecordSelected:true, name:"Row1"}

Als u de eerste rij wilt selecteren, kunt u InputEvent instellen op "SetFocusOnRowSetSelection"&Text(Rand()) of "SetSelection"&Text(Rand())

Gedrag "Bij wijziging" configureren

Voeg de onderstaande formule toe en wijzig deze in de eigenschap OnChange van het onderdeel om specifieke acties te configureren op basis van de EventName die door het onderdeel wordt geleverd:

• Triggergebeurtenissen wanneer een gebruiker de geselecteerde rij wijzigt: de eigenschap Gebeurtenis OnRowSelectionChange activeren inschakelen in het onderdeel.
• Koppelingsgedrag configureren: kolommen toevoegen met de waarde ColCellType ingesteld op link.

/* 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 )
)

Beperkingen

Dit codeonderdeel kan alleen worden gebruikt in canvas-apps en aangepaste pagina's.