DetailsList kontroll

Artikkel
05/01/2023

En kontroll som brukes til å vise et datasett.

Merk

Full dokumentasjons- og kildekode funnet i GitHub-kodekomponentrepositoriet.

DetailsList-kontroll.

Bekrivelse

En detaljliste (DetailsList) er en kraftig måte å vise en informasjonsrik samling elementer på, og gi personer mulighet til å sortere, gruppere og filtrere innholdet. Bruk en DetailsList når informasjon er svært viktig.

DetailsList-kodekomponenten tillater bruk av Fluent UI DetailsList-komponenten fra lerretsapper og egendefinerte sider.

Kan være bundet til et Dataverse-datasett eller eller lokal samling.
Støtter konfigurerbare kolonner atskilt med kolonnemetadataene fra kildedatasett for fleksibilitet.
Celletyper for koblinger, ikoner, utvid/skjul og undertekstcellene.
Støtte for sideveksling.
Støtte for sortering ved hjelp av Dataverse-sortering og konfigurerbare SortBy-egenskaper.

Egenskaper

Nøkkelegenskaper

Egenskap	Bekrivelse
`Items`	Datasettet som inneholder radene som skal gjengis. Vises også som `Records`. Se tabellen over elementegenskaper nedenfor.
`Columns`	Datasettet som inneholder alternativmetadata for kolonnene. Hvis datasettet er angitt, erstattes det fullstendig av kolonnene som er angitt i Oppføringer-datasettet. Se tabellen over kolonneegenskaper nedenfor.
`SelectionType`	Valgtype (Ingen, Enkel, Flere)
`PageSize`	Definerer hvor mange oppføringer som skal lastes inn per side.
`PageNumber`	Viser gjeldende side.
`HasNextPage`	Resultatet er sant hvis det finnes en neste side.
`HasPreviousPage`	Resultatet er sant hvis det finnes en forrige side.
`TotalRecords`	Resultatet er totalt antall tilgjengelige oppføringer.
`CurrentSortColumn`	Navnet på kolonnen som skal vises som brukt til sortering
`CurrentSortDirection`	Retningen til gjeldende sorteringskolonne som brukes

`Items` Egenskaper

Disse attributtene må være tilgjengelige i datakilden for å aktivere den relaterte funksjonaliteten. Power Fx-formelen AddColumns() kan brukes til å tilføye disse verdiene i den opprinnelige datakilden.

Egenskap	Bekrivelse
`RecordKey`	(valgfritt) – Navnet på den unike nøkkelen. Angi dette hvis du vil at utvalget skal beholdes når oppføringene oppdateres, og når du vil at `EventRowKey` skal inneholde ID-en i stedet for radindeksen etter at `OnChange`-hendelsen er tatt i bruk.
`RecordCanSelect`	(valgfritt) – Kolonnenavnet som inneholder en `boolean`-verdi som definerer om en rad kan velges.
`RecordSelected`	(valgfritt) – Kolonnenavnet som inneholder en `boolean` verdi som definerer om en rad velges som standard, og når du angir at `InputEvent` skal inneholde `SetSelection`. Se delen på `Set Selection` nedenfor.

`Columns` Egenskaper

Egenskap	Bekrivelse
`ColDisplayName`	(Obligatorisk) – Angir navnet på kolonnen som skal vises i toppteksten.
`ColName`	(Obligatorisk) – Angir det faktiske feltnavnet på kolonnen i elementsamlingen.
`ColWidth`	(Obligatorisk) – Angir den absolutte faste bredden på kolonnen i piksler.
`ColCellType`	Celletypen som skal gjengis. Mulige verdier: `expand`, `tag`, `indicatortag`, `image`, `clickableimage`, `link`. Se de neste delene hvis du vil ha mer informasjon.
`ColHorizontalAlign`	Justeringen av celleinnholdet hvis `ColCellType` er av typen `image` eller `clickableimage`.
`ColVerticalAlign`	Justeringen av celleinnholdet hvis `ColCellType` er av typen `image` eller `clickableimage`.
`ColMultiLine`	Sann når teksten i celleteksten skal brytes hvis den er for lang slik at den får den tilgjengelige bredden.
`ColResizable`	Sann når bredden på kolonneoverskriften skal kunne flyttes.
`ColSortable`	Sann når kolonnen skal være sorterbar. Hvis datasettet støtter automatisk sortering via en direkte Dataverse-tilkobling, sorteres dataene automatisk. Hvis ikke vil `SortEventColumn`- og `SortEventDirection`-resultatene bli angitt og må brukes i oppføringenes Power FX-bindingsuttrykk.
`ColSortBy`	Navnet på kolonnen som skal gis til `OnChange`-hendelsen når kolonnen sorteres. Hvis du for eksempel sorterer datokolonner, vil du sortere etter den faktiske datoverdien i stedet for den formaterte teksten som vises i kolonnen.
`ColIsBold`	Sann når datacelledataene skal være fet
`ColTagColorColumn`	Hvis celletypen er et merke, angir du fargen for heksabakgrunnen for tekstkoden. Kan angis til `transparent`. Hvis celletypen ikke er et merke, angir du en heksafarge som skal brukes som en indikatorsirkelkodecelle. Hvis tekstverdien er tom, vises ikke merket.
`ColTagBorderColorColumn`	Angi en heksafarge som skal brukes som kantlinjefarge for et tekstmerke. Kan angis til `transparent`.
`ColHeaderPaddingLeft`	Legger til utfylling i kolonneoverskriftsteksten (piksler)
`ColShowAsSubTextOf`	Hvis du angir navnet på en annen kolonne, flyttes kolonnen slik at den er underordnet den kolonnen. Se nedenfor under Deltekst-kolonner.
`ColPaddingLeft`	Legger til utfylling til venstre for den underordnede cellen (piksler)
`ColPaddingTop`	Legger til utfylling til øverst i den underordnede cellen (piksler)
`ColLabelAbove`	Flytter etiketten over den underordnede celleverdien hvis den vises som en undertekstkolonne.
`ColMultiValueDelimiter`	Kobler sammen matriseverdier med flere verdier sammen med dette skilletegnet. Se nedenfor under kolonner med flere verdier.
`ColFirstMultiValueBold`	Når en matriseverdi med flere verdier vises, vises det første elementet som fet.
`ColInlineLabel`	Hvis det er angitt en strengverdi, brukes denne til å vise en etikett inne i celleverdien som kan være forskjellig fra kolonnenavnet. Eksempel
`ColHideWhenBlank`	Når sann, skjules en innebygd celleetikett & utfylling hvis celleverdien er tom.
`ColSubTextRow`	Når du viser flere celler i en undertekstcelle, setter du til radindeksen. Null angir raden for hovedcelleinnhold.
`ColAriaTextColumn`	Kolonnen som inneholder aria-beskrivelsen for celler (for eksempel ikoncellene).
`ColCellActionDisabledColumn`	Kolonnen som inneholder et boolsk flagg som styrer om en cellehandling (for eksempel ikoncellene) er deaktivert.
`ColImageWidth`	Ikon/bilde-størrelsen i piksler.
`ColImagePadding`	Utfyllingen rundt et ikon/bildecelle.
`ColRowHeader`	Definerer en kolonne for å gjengi større enn de andre cellene (14 px i stedet for 12 px). Vanligvis er det bare én radoverskrift per kolonnesett.

Stilegenskaper

Egenskap	Bekrivelse
`Theme`	Fluent UI-tema-JSON til å bruke som genereres og eksporteres fra Fluent UI-temadesigner. Se Bruk av tema for hjelp til å konfigurere.
`Compact`	Sann når den komprimerte stilen skal brukes
`AlternateRowColor`	Heksaverdien for radfargen som skal brukes på alternative rader.
`SelectionAlwaysVisible`	Skal alternativknappene for merking alltid være synlige i stedet for bare ved musepeker over raden.
`AccessibilityLabel`	Etiketten som skal legges til i aria-beskrivelsen av tabellen

Hendelsesegenskaper

Egenskap	Bekrivelse
`RaiseOnRowSelectionChangeEvent`	`OnChange`-hendelsen heves når en rad merkes/avmerkes. (se nedenfor)
`InputEvent`	En eller flere inndatahendelser (som kan kombineres ved hjelp av strengsammensetting). Mulige verdier: `SetFocus`, `SetFocusOnRow`, `SetFocusOnHeader`, `ClearSelection`, `SetSelection`. Må etterfølges av et vilkårlig strengelement for å sikre at hendelsen utløses. Hendelser kan kombineres. Eksempel: `SetFocusClearSelection` tømmes og fokus angis samtidig. `SetFocusOnRowSetSelection` vil sette fokus på en rad og angi markeringen samtidig.
`EventName`	Utdatahendelse når `OnChange` utløses. Mulige verdier - `Sort`, `CellAction`, `OnRowSelectionChange`
`EventColumn`	Kolonnenavn for utdatahendelse som brukes når `CellAction` startes
`EventRowKey`	Utdatahendelse-kolonnen som inneholder enten indeksen for raden som hendelsen ble startet på, eller radnøkkelen hvis `RecordKey`-egenskapen er angitt.
`SortEventColumn`	Navnet på kolonnen som utløste sorter `OnChange`-hendelse
`SortEventDirection`	Retningen på sorteringen som utløste `OnChange`-hendelse

Grunnleggende bruk

Hvis du vil finne ut hvilke kolonner som skal vises i DetailsList, konfigurerer du følgende egenskaper for DetailsList:

Felt. Legg til feltene du vil ha, ved å velge Rediger-alternativet på kontrollundermenyen til høyre (bruker det samme grensesnittet for å endre forhåndsdefinerte datakort).
Kolonner. Angi bestemt tildeling mellom kolonner og felter i Columns-egenskapen.

Eksempel:

Tildeling av systemtabellen Dataverse-kontoer med følgende formel:

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

Deltekstkolonner

Kolonneegenskapen ColShowAsSubTextOf definerer en kolonne som vises under verdien i en annen kolonne. Dette kan brukes til å vise sekundær informasjon og utvidbart innhold (se nedenfor).

Hvis du hadde en samling definert som:

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

Du kan definere kolonnene som skal være:

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

Resultatet blir en tabell som ser slik ut:

Celletyper

Kolonneegenskapen ColCellType godtar følgende verdier: expand, tag, image, indicatortag, clickableimage, link

Vis/skjul

Hvis deltekstradene krever et ikon for å vise eller skjule, kan en ekstra kolonne legges til i kolonnedatasettet, og kolonnedefinisjonen ColCellType angis til expand også:

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

Hvis en RecordKey-egenskap er angitt til index-kolonnen, kan OnChange-hendelsen da inneholde følgende for å vise/skjule radene:

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

Dette søker etter raden som har cellehandlingen startet på ved hjelp av indeksen (hvis ingen RecordKey er angitt, vil EventRowKey inneholde radnummeret), og veksler deretter utvid-verdien.

Dette gir følgende resultat:

Merke og indikatormerke

Ved hjelp av celletypen tag eller indicatortag kan du opprette innebygde fargede merker for å vise celleinnholdet.

tag - Dette vil vise en tag-boks med farget bakgrunn og kantlinje
tagindicator - Viser en merkeboks med en farget sirkelindikator

Fargene kan varieres etter rad, og kolonnemetadatasettet gir ganske enkelt navnet på kolonnene som inneholder fargene for merkene.

Vurder datasettet:

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

Deretter kan du legge til kolonnemetadataene for å legge til to kolonner, én som vises som et merke og den andre som merkeindikator. Hver kolonne bruker kolonnene TagColor og TagBorderColor til å bestemme fargene:

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

Dette gir følgende resultat:

Bilde og klikkbart bilde

Ved hjelp av en celletype image eller clickableimage kan du konfigurere innebygde bilder som eventuelt kan velges for å heve OnChange-handlingen.

Bildeinnholdet kan defineres ved hjelp av prefikset med følgende:

https: En opprette en kobling til et eksternt bilde. Eksempel: https://via.placeholder.com/100x70
icon: Ved å bruke et av Fluent UI-ikonene for eksempel, icon:SkypeCircleCheck
data: Bruke innebygde svg-bildedata: for eksempel data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Hvis bildet er av typen clickableimage, vil OnChange-hendelsen starte når ikonet velges, med navnet EvenName for CellAction, EventColumn som angir du navnet på bildekolonnen og EventRowKey som er RecordKey for raden (hvis ingen RecordKey er satt, vil EventRowKey inneholde radnummeret).

Vurder for eksempel raddataene:

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

og kolonnemetadataene:

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

Dette vil gi følgende resultat:

For kolonnen clickableimage kan hendelsen OnChange deretter håndteres når en bruker velger (musen eller tastaturet) og et ikon (forutsatt at det ikke er deaktivert) ved hjelp av følgende:

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

EventRowKey fylles ut med kolonneverdien definert som RecordKey-egenskapen.

Koblinger

Kolonner kan gjengis som koblinger, som vil heve OnChange-hendelsen når koblingen velges på samme måte som klikkbare bilder som beskrives ovenfor.

Kolonnemetadataene for en kobling konfigureres på denne måten:

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

Dette fører til at celleinnholdet gjengis som:

Hendelsen OnChange starter på nytt når koblingen klikkes, der EventColumn er navnet på kolonnen som inneholder koblingen, og EventRowKey fylt ut med kolonneverdien angitt som RecordKey-egenskapen.

Kolonner med flere verdier

Hvis en kolonneverdi kan ha flere verdier ved å angi en tabell/samling. Da gjengis verdiene som flere celleverdier. Eksempel:

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

Kolonnemetadataene kan da være:

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

Dette fører til at tabellen viser følgende:

Virkemåte

Sortere hendelser

En kolonne defineres som sorterbar ved å angi ColSortable-egenskapen til Sann. Hvis kolonnen viser en tekstverdi som er forskjellig fra den obligatoriske sorteringsrekkefølgen (for eksempel en formatert dato- eller statuskolonne), kan du angi en annen sorteringskolonne ved hjelp av ColSortBy-egenskapen.

Sortering håndteres deretter på to måter:

Automatisk når du er koblet til en Dataverse-datakilde.
Manuelt ved bruk av samlinger.

Automatisk sortering

Når Items-datasett er et opprinnelig Dataverse-datasett, sorteres det automatisk hvis en kolonne er merket som sorterbar. Hvis det gjøres endringer i formen til en Dataverse-samling ved hjelp av AddColumn, eller hvis du lagrer dataene i en samling, fungerer ikke automatisk sortering lenger, og manuell sortering må implementeres.

Manuell sortering

Manuell sortering støttes utenfor komponenten for å tillate støtte for tilpasset tilkobling og lokal innsamlingssortering når den ikke er koblet til en Dataverse-tilkobling. Kolonner kan defineres som sorterbare eller ikke. Når kolonnesortering er valgt, opprettes en OnChange-hendelse som gir kolonnen og retningen. Appen skal deretter bruke disse verdiene til å endre den bundne samlingen til tabellen for oppdatering med de sorterte oppføringene.

Legg til en sorterbar boolsk kolonne i Kolonne-samlingen
Legge til navnet på kolonnen som kan sorteres, i Columns.ColSortable-egenskapen

Legg til koden inne i OnChange-hendelsen for tabellen:

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

Angi egenskapenSort Column til ctxSortCol

Angi egenskapen Sort Direction til:

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

Angi at inndataelementsamlingen skal sortere ved hjelp av kontekstvariablene angitt ovenfor:
```
SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
```

Når hendelsen OnChange starter etter at brukeren velger kolonneoverskriften for å endre sorteringen, oppdateres sorteringskontekstvariablene ved hjelp av den nye sorteringsinformasjonen, noe som fører til at inndataene datasett sorteres på nytt, og tabellen oppdateres i henhold til dette.

Sideveksling

Sideveksling håndteres internt av komponenten, men knappene for å flytte tilbake/fremover må opprettes av vertsappen, og hendelser som sendes til komponenten.

Følgende egenskaper brukes til å styre sideveksling:

PageSize - Definerer hvor mange poster som skal lastes inn per side.
PageNumber - Sender ut gjeldende side som vises.
HasNextPage - Utgangen er sann hvis Der er en neste side.
HasPreviousPage - Gir sann hvis Der er en tidligere side.
TotalRecords - Sender ut det totale antallet tilgjengelige poster.

Sidevekslingsknappene kan deretter defineres på følgende måte:

Last inn første side
- OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Last inn forrige side
- OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Last inn neste side
- OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
- DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

Antall oppføringsetiketter kan angis til et uttrykk som ligner på følgende:

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

Vis toppen av neste side

Dette implementeres ved hjelp av hendelsen SetFocusOnRow. Hvis du hadde InputEvent-egenskapen bundet til ctxGridEvent, må du bruke følgende på OnSelect-egenskapen for knappen på den neste siden: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Inndatahendelser

Angi InputEvent-egenskapen kan angis til én eller flere av følgende:

SetFocus - Setter fokus på den første raden i rutenettet
ClearSelection - Fjerner alle markeringer og går tilbake til standardvalget.
SetSelection - Angir utvalget som definert av RowSelected kolonnen.
LoadNextPage - Laster inn neste side hvis Der er en
LoadPreviousPage - Laster inn forrige side hvis Der er en
LoadFirstPage - Laster inn den første siden

For å sikre at inndatahendelsen plukkes opp, må den være tilstrekkelig med en vilkårlig verdi. Eksempel: SetSelection" & Text(Rand())

Se under for mer informasjon.

Valgte elementer og radhandlinger

Komponenten støtter valgmodiene Enkel, Flere eller Ingen.

Når du velger elementer, oppdateres egenskapene SelectedItems og Selected.

SelectedItems - Hvis tabellen er i modus for flere valg, vil dette inneholde én eller flere poster fra Items-samlingen.
Selected - Hvis tabellen er i enkeltvalgmodus, vil dette inneholde de valgte postene.

Når en bruker starter radhandlingen, enten ved å dobbeltklikke eller trykke ENTER eller en valgt rad, startes OnSelect-hendelsen. Egenskapen Selected inneholder en referanse til oppføringen som er startet. Denne hendelsen kan brukes til å vise en detaljert oppføring eller navigere til en annen skjerm.

Hvis egenskapen RaiseOnRowSelectionChangeEvent er aktivert, starter OnChange-hendelsen med EventName satt til OnRowSelectionChange når de valgte radene endres. Hvis appen må svare på ett enkelt radvalg i stedet for dobbeltklikking av en rad, kan OnChange oppdage dette ved å bruke kode som ligner på følgende:

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

Fjerne de valgte elementene

Hvis du vil fjerne de valgte oppføringene, må du angi InputEvent-egenskapen til en streng som starter med

Eksempel

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

Kontekstvariabelen ctxTableEvent kan deretter være bundet til InputEvent-egenskapen.

Angi radvalg

Hvis det finnes et scenario der et bestemt sett med oppføringer skal velges programmatisk, kan egenskapen InputEvent angis til SetSelection eller SetFocusOnRowSetSelection i kombinasjon med angivelse av egenskapen RecordSelected for oppføringen.

Hvis du for eksempel hadde et datasett som følger:

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

Hvis du vil velge dette og velge den første raden, kan du angi InputEvent til "SetFocusOnRowSetSelection"&Text(Rand()) eller "SetSelection"&Text(Rand())

Konfigurere virkemåten Ved endring

Legg til og endre formelen nedenfor i komponentens OnChange-egenskap for å konfigurere bestemte handlinger basert på EventName angitt av komponenten:

Utløser hendelser når en bruker endrer den valgte raden: Aktiver egenskapen Raise OnRowSelectionChange event i komponenten.
Konfigurer koblingsoppførsel: Legg til kolonner med ColCellType-verdien angitt til 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 )
)

Begrensninger

Denne kodekomponenten kan bare brukes i lerretsapper og egendefinerte sider.

Del via

DetailsList kontroll

Bekrivelse

Egenskaper

Nøkkelegenskaper

`Items` Egenskaper

`Columns` Egenskaper

Stilegenskaper

Hendelsesegenskaper

Grunnleggende bruk

Deltekstkolonner

Celletyper

Vis/skjul

Merke og indikatormerke

Bilde og klikkbart bilde

Koblinger

Kolonner med flere verdier

Virkemåte

Sortere hendelser

Automatisk sortering

Manuell sortering

Sideveksling

Vis toppen av neste side

Inndatahendelser

Valgte elementer og radhandlinger

Fjerne de valgte elementene

Angi radvalg

Konfigurere virkemåten Ved endring

Begrensninger

Tilbakemeldinger

Flere ressurser

Del via

DetailsList kontroll

Bekrivelse

Egenskaper

Nøkkelegenskaper

Items Egenskaper

Columns Egenskaper

Stilegenskaper

Hendelsesegenskaper

Grunnleggende bruk

Deltekstkolonner

Celletyper

Vis/skjul

Merke og indikatormerke

Bilde og klikkbart bilde

Koblinger

Kolonner med flere verdier

Virkemåte

Sortere hendelser

Automatisk sortering

Manuell sortering

Sideveksling

Vis toppen av neste side

Inndatahendelser

Valgte elementer og radhandlinger

Fjerne de valgte elementene

Angi radvalg

Konfigurere virkemåten Ved endring

Begrensninger

Tilbakemeldinger

Flere ressurser

`Items` Egenskaper

`Columns` Egenskaper