DetailsList Controlo

Artigo
05/01/2023

Um controlo utilizado para apresentar um conjunto de dados.

Nota

A documentação completa e o código de origem encontram-se no repositório de componentes de código do GitHub.

Controlo DetailsList.

Description

Uma lista de detalhes (DetailsList) é uma forma robusta de apresentar uma coleção de itens rica em informações e permitir que as pessoas ordenem, agrupem e filtrem o conteúdo. Utilize um DetailsList quando a densidade de informações for crucial.

O componente de código DetailsList permite a utilização do componente DetailsList do Fluent UI a partir de dentro de aplicações de tela e páginas personalizadas.

Pode estar dependente de uma coleção local ou um conjunto de dados do Dataverse.
Suporta colunas configuráveis separadas para os metadados de coluna fornecidos pela origem do conjunto de dados para flexibilidade.
Tipos de célula para ligações, ícones, expandir/fechar e células de subtexto.
Suporte para paginação.
Suporte para ordenação com a ordenação do Dataverse ou propriedades SortBy configuráveis.

_Propriedades

Propriedades-chave

Property	Description
`Items`	O conjunto de dados que contém as linhas a compor. Também apresentado como `Records`. Consulte a tabela de propriedades de Itens abaixo.
`Columns`	O conjunto de dados que contém metadados de opções para as colunas. Se este conjunto de dados for fornecido, irá substituir por completo as colunas fornecidas no conjunto de dados de Registos. Consulte a tabela de propriedades de Colunas abaixo.
`SelectionType`	Tipo de Seleção (Nenhuma, Única, Várias)
`PageSize`	Define a quantidade de registos a carregar por página.
`PageNumber`	Apresenta a página atual mostrada.
`HasNextPage`	Apresenta true se houver uma página seguinte.
`HasPreviousPage`	Apresenta true se houver uma página anterior.
`TotalRecords`	Apresenta o número total de registos disponíveis.
`CurrentSortColumn`	O nome da coluna a mostrar como atualmente utilizada para ordenação
`CurrentSortDirection`	A direção da coluna de ordenação atual que está a ser utilizada

`Items` propriedades

Estes atributos têm de estar disponíveis na origem de dados para ativar a funcionalidade relacionada. A fórmula do Power Fx AddColumns() pode ser utilizada para anexar estes valores à origem de dados original.

Property	Description
`RecordKey`	(opcional) – O nome da coluna de chave exclusivo. Forneça estas informações se quiser que a seleção seja preservada quando os Registos forem atualizados e quando pretender que o `EventRowKey` contenha o ID, em vez do índice da linha após o evento `OnChange` ser acionado.
`RecordCanSelect`	(opcional) – O nome da coluna que contém um valor `boolean` que define se é possível selecionar uma linha.
`RecordSelected`	(opcional) – O nome da coluna que contém um valor `boolean` que define se uma linha está selecionada por predefinição e quando definir o `InputEvent` para conter `SetSelection`. Consulte a secção em `Set Selection` abaixo.

`Columns` propriedades

Property	Description
`ColDisplayName`	(Obrigatório) – Fornece o nome da coluna a mostrar no cabeçalho.
`ColName`	(Obrigatório) – Fornece o nome do campo real da coluna na coleção de Itens.
`ColWidth`	(Obrigatório) – Fornece a largura fixa absoluta da coluna em pixéis.
`ColCellType`	O tipo de célula a compor. Valores possíveis: `expand`, `tag`, `indicatortag`, `image`, `clickableimage`, `link`. Para obter mais informações, consulte as secções seguintes.
`ColHorizontalAlign`	O alinhamento do conteúdo da célula se o `ColCellType` for do tipo `image` ou `clickableimage`.
`ColVerticalAlign`	O alinhamento do conteúdo da célula se o `ColCellType` for do tipo `image` ou `clickableimage`.
`ColMultiLine`	True quando o texto no texto das células deve ser encapsulado se for demasiado comprido para se adaptar à largura disponível.
`ColResizable`	True quando a largura do cabeçalho da coluna deve ser redimensionável.
`ColSortable`	True quando a coluna deve ser ordenável. Se o conjunto de dados suportar a ordenação automática através de uma ligação direta do Dataverse, os dados serão ordenados automaticamente. Caso contrário, as saídas `SortEventColumn` e `SortEventDirection` serão definidas e têm de ser utilizadas na expressão de enlace do Power FX dos registos.
`ColSortBy`	O nome da coluna a fornecer ao evento `OnChange` quando a coluna é ordenada. Por exemplo, se estiver a ordenar colunas de data, pretende ordenar pelo valor de data real, em vez de ordenar pelo texto formatado mostrado na coluna.
`ColIsBold`	True quando os dados da célula de dados devem estar a negrito
`ColTagColorColumn`	Se o tipo de célula for etiqueta, defina para a cor de fundo hexadecimal da etiqueta de texto. Não pode ser definido como `transparent`. Se o tipo de célula não for uma etiqueta, defina como cor hex para utilizar como uma célula de etiqueta de círculo indicador. Se o valor de texto estiver vazio, a etiqueta não é mostrada.
`ColTagBorderColorColumn`	Defina para uma cor hexadecimal para utilizar como a cor do limite de uma etiqueta de texto. Não pode ser definido como `transparent`.
`ColHeaderPaddingLeft`	Adiciona preenchimento ao texto do cabeçalho da coluna (pixéis)
`ColShowAsSubTextOf`	Esta definição para o nome de outra coluna irá mover a coluna para que seja uma subordinada dessa coluna. Consulte abaixo, sob colunas de Subtexto.
`ColPaddingLeft`	Adiciona preenchimento à esquerda da célula subordinada (pixéis)
`ColPaddingTop`	Adiciona preenchimento ao topo da célula subordinada (pixéis)
`ColLabelAbove`	Move a etiqueta acima do valor da célula subordinada se for mostrada como uma coluna de Subtexto.
`ColMultiValueDelimiter`	Une valores de matriz de múltiplos valores juntamente com este delimitador. Consulte abaixo, sob colunas de múltiplos valores.
`ColFirstMultiValueBold`	Quando mostra um valor de matriz de múltiplos valores, o primeiro item é mostrado a negrito.
`ColInlineLabel`	Se estiver definido como um valor de cadeia, é utilizado para mostrar uma etiqueta dentro do valor de célula que poderia ser diferente do nome da coluna. por exemplo
`ColHideWhenBlank`	Quando true, qualquer etiqueta inline de uma célula e preenchimento será ocultada se o valor da célula estiver em branco.
`ColSubTextRow`	Quando mostrar várias células numa célula de subtexto, defina para o índice da linha. Zero indica a linha de conteúdo da célula principal.
`ColAriaTextColumn`	A coluna que contém a descrição de Aria para as células (por exemplo, células de ícone).
`ColCellActionDisabledColumn`	A coluna que contém uma marcação booleana para controlar se uma ação de célula (por exemplo, células de ícone) está desativada.
`ColImageWidth`	O tamanho do ícone/imagem, em pixéis.
`ColImagePadding`	O preenchimento em torno de uma célula de ícone/imagem.
`ColRowHeader`	Define uma coluna a compor maior do que as outras células (14 px em vez de 12 px). Normalmente, só existiria um Cabeçalho de Linha por conjunto de colunas.

Propriedades de Estilo

Property	Description
`Theme`	O JSON do Tema da Fluent UI a utilizar que é gerado e exportado a partir do Estruturador de Temas da Fluent UI. Consulte personalizar o tema para obter orientações sobre como configurar.
`Compact`	True quando o estilo compacto deve ser utilizado
`AlternateRowColor`	O valor hexadecimal da cor da linha a utilizar em linhas alternativas.
`SelectionAlwaysVisible`	Os botões de opções de seleção devem estar sempre visíveis, em vez de só quando paira o cursor na linha.
`AccessibilityLabel`	A etiqueta a adicionar à descrição da Aria da tabela

Propriedades do evento

Property	Description
`RaiseOnRowSelectionChangeEvent`	O evento `OnChange` é criado quando uma linha é selecionada/desselecionada. (consulte abaixo)
`InputEvent`	Um ou mais eventos de entrada (que podem ser combinados em conjunto utilizando a concatenação de cadeia). Valores possíveis `SetFocus`, `SetFocusOnRow`, `SetFocusOnHeader`, `ClearSelection`, `SetSelection`. Tem de ser seguido por um elemento de cadeia aleatório para garantir que o evento é acionado. É possível combinar eventos, por exemplo, `SetFocusClearSelection` irá limpar e definir o foco ao mesmo tempo. `SetFocusOnRowSetSelection` definirá o foco em uma linha e definirá a seleção ao mesmo tempo.
`EventName`	Evento de Saída quando `OnChange` é acionado. Valores possíveis – `Sort`, `CellAction`, `OnRowSelectionChange`
`EventColumn`	Nome do campo de coluna Evento de Saída utilizado quando `CellAction` é invocado
`EventRowKey`	A coluna Evento de Saída que contém o índice da linha em que o evento foi invocado ou a Chave de Linha, se a propriedade `RecordKey` estiver definida.
`SortEventColumn`	O nome da coluna que acionou o evento Ordenar `OnChange`
`SortEventDirection`	A direção da ordenação que acionou o evento Ordenar `OnChange`

Utilização Básica

Para determinar que colunas são apresentadas no DetailsList, configure as seguintes propriedades do DetailsList:

Campos. Adicione os campos que pretende selecionando a opção Editar no menu da lista de opções dos controlos à direita (isto utiliza a mesma interface para modificar cartões de dados predefinidos).
Colunas. Forneça mapeamento específico entre colunas e campos na propriedade Columns.

Exemplo:

Mapeamento para a tabela do sistema Contas do Dataverse, com a fórmula seguinte:

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

Colunas de Subtexto

A propriedade de coluna ColShowAsSubTextOf define uma coluna como sendo mostrada abaixo do valor noutra coluna. Este valor pode ser utilizado para mostrar informações secundárias e conteúdo expansível (consulte abaixo).

Se tinha uma coleção definida como:

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

Pode definir as colunas como:

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

O resultado será uma tabela com o seguinte aspeto:

Tipos de Célula

A propriedade de coluna ColCellType aceita os seguintes valores: expand, tag, image, indicatortag, clickableimage, link

Expandir/Fechar

Se as linhas de "Subtexto" necessitarem que tenha um ícone de expandir/fechar, é possível adicionar uma coluna adicional ao conjunto de dados de coluna e a definição de coluna ColCellType definida expand também:

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

Partindo do princípio que uma propriedade RecordKey está definida para a coluna index, o evento OnChange poderá conter o seguinte para expandir/fechar as linhas:

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

Isto pesquisa pela linha que teve a Ação de Célula invocada aquando da utilização do índice (se não estiver definido qualquer RecordKey, o EventRowKey irá conter o número da linha) e, em seguida, altera o valor da expansão.

Isto apresentará o seguinte resultado:

Etiqueta e Etiqueta de Indicador

Ao utilizar um tipo de célula de tag ou indicatortag, pode criar etiquetas coloridas inline para apresentar o conteúdo da célula.

tag - Isso mostrará uma caixa de tags com um fundo colorido e borda
tagindicator - Mostra uma caixa de tags com um indicador de círculo colorido

As cores podem variar por linha, pelo que o conjunto de dados de metadados da coluna fornece simplesmente o nome das colunas que contém as cores para as etiquetas.

Considere o conjunto de dados:

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

Em seguida, pode adicionar os metadados de coluna para adicionar duas colunas, uma apresentada como tag e a outra como tagindicator – cada uma utilizando as colunas TagColor e TagBorderColor para determinar as cores:

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

Isto apresentará o seguinte resultado:

Imagem e Imagem Clicável

Utilizando um tipo de célula de image ou clickableimage, pode configurar imagens inline que, opcionalmente, podem ser selecionadas para ajudar a criar a ação OnChange.

O conteúdo de imagem pode ser definido com prefixação:

https: Um link para uma imagem externa. por exemplo, https://via.placeholder.com/100x70
icon: Usando um dos ícones da interface do utente Fluent, por exemplo, icon:SkypeCircleCheck
data: Usando dados de imagem svg embutidos: por exemplo, data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Se a imagem for do tipo clickableimage, o evento OnChange será acionado quando o ícone é selecionado, com um EvenName de CellAction, EventColumn a fornecer o nome da coluna de imagem e EventRowKey a ser o RecordKey da linha (se não estiver definido qualquer RecordKey, o EventRowKey irá conter o número da linha).

por exemplo, Considere os dados de linha:

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

e os metadados da coluna:

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

Isto apresentaria o resultado:

Para a coluna clickableimage, o evento OnChange pode então processar quando um utilizador seleciona (rato ou teclado) e um ícone (partindo do princípio que não está desativado) utilizando:

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

O EventRowKey será preenchido com o valor de coluna definido como a propriedade RecordKey.

Ligações

As colunas podem ser compostas como ligações, o que irá criar o evento OnChange quando a ligação for selecionada de um modo semelhante ao modo como as imagens clicáveis funcionam descrito acima.

Os metadados de coluna para uma ligação são configurados da seguinte forma:

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

Isto irá fazer com que o conteúdo da célula seja composto como:

O evento OnChange é novamente acionado quando a ligação é clicada, com o EventColumn a ser o nome da coluna que contém a ligação e EventRowKey preenchido com o valor de coluna definido como a propriedade RecordKey.

Colunas de múltiplos valores

Se um valor de coluna puder, terá vários valores ao defini-lo como Tabela/Coleção. Isto irá compor os valores como valores de células múltiplos. por exemplo:

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

Os metadados da coluna poderiam então ser:

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

Isto faria com que a tabela mostrasse:

Comportamento

Ordenar Eventos

Uma coluna é definida como sendo ordenável definindo a propriedade ColSortable como true. Se a coluna mostrar um valor de texto diferente da sequência de ordenação necessária (por exemplo, uma coluna de data ou de estado formatada), poderá ser especificada uma coluna de ordenação diferente utilizando a propriedade ColSortBy.

A ordenação é então processada de duas maneiras:

Automaticamente, quando ligada a uma origem de dados do Dataverse.
Manualmente, quando utilizar coleções.

Ordenação Automática

Quando o conjunto de dados Itens é um conjunto de dados do Dataverse nativo, será ordenado automaticamente se uma coluna estiver marcada como ordenável. Se forem efetuadas alterações à forma de uma coleção do Dataverse utilizando AddColumn ou armazenando os dados numa coleção, a ordenação automática deixa de funcionar e a ordenação manual tem de ser implementada.

Ordenação Manual

A Ordenação Manual é suportada fora do componente para permitir o suporte de conectores personalizados e a ordenação de coleções locais quando não estiver ligada a uma ligação do Dataverse. As colunas podem ser definidas como sendo ou não ordenáveis. Quando a ordenação de colunas está selecionada, é criado um evento OnChange, o que fornece a coluna e a direção. Em seguida, a aplicação deverá utilizar estes valores para alterar a coleção dependente à tabela para ser atualizada com os registos ordenados.

Na coleção Colunas, adicione uma coluna booleana ordenável
Adicionar o nome da coluna ordenável à propriedade Columns.ColSortable

Dentro do evento OnChange da Tabela, adicione o código:

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

Defina a propriedade Sort Column como ctxSortCol

Defina a propriedade Sort Direction como:

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

Defina a coleção de itens de entrada para ordenar com as variáveis de contexto definidas acima:
```
SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
```

Quando o evento OnChange é acionado depois de o utilizador selecionar o cabeçalho da coluna para alterar a ordenação, as variáveis de contexto da ordenação são atualizadas utilizando as novas informações de ordenação fornecidas, o que faz com que o conjunto de dados de entrada seja ordenado novamente e que a tabela seja atualizada em conformidade.

Paginação

A paginação é processada internamente pelo componente, no entanto, os botões para mover para trás/para a frente têm de ser criados pela aplicação de alojamento e os eventos enviados para o componente.

As seguintes propriedades são utilizadas para controlar a paginação:

PageSize - Define quantos registros carregar por página.
PageNumber - Saídas da página atual mostrada.
HasNextPage - Saídas verdadeiras se houver uma próxima página.
HasPreviousPage - Saídas verdadeiras se houver uma página anterior.
TotalRecords - Produz o número total de registos disponíveis.

Em seguida, é possível definir os botões de paginação da seguinte forma:

Carregar Primeira Página
- OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Carregar página anterior
- OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Carregar página seguinte
- OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
- DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

O número de etiquetas de registos pode ser definido como uma expressão semelhante a:

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

Mostrar o topo da página seguinte

Isto é implementado utilizando o evento "SetFocusOnRow". Se tivesse a propriedade InputEvent vinculada a ctxGridEvent, na propriedade OnSelect do botão da página seguinte, utilizaria: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Eventos de Entrada

A propriedade InputEvent pode ser definida como uma ou mais das seguintes:

SetFocus - Define o foco na primeira linha da grade
ClearSelection - Limpa qualquer seleção e volta para a seleção padrão.
SetSelection - Define a seleção conforme definido pela RowSelected coluna.
LoadNextPage - Carrega a próxima página, se houver uma
LoadPreviousPage - Carrega a página anterior, se houver uma
LoadFirstPage - Carrega a primeira página

Para garantir que o evento de entrada é selecionado, tem de satisfazer com um valor aleatório. por exemplo, SetSelection" & Text(Rand())

Consulte abaixo para mais detalhes

Ações de Itens e Linhas Selecionados

O componente suporta os modos Único, Múltiplos ou Nenhum.

Quando seleciona itens, as propriedades SelectedItems e Selected são atualizadas.

SelectedItems - Se a tabela estiver no modo de seleção múltipla, ela conterá um ou mais registros da coleção Items.
Selected - Se a tabela estiver no modo de seleção única, esta conterá os registros selecionados.

Quando um utilizador invoca a ação de linha, seja através de clique duplo, premindo Enter ou uma linha selecionada, o evento OnSelect é acionado. A propriedade Selected irá conter uma referência para o registo que foi invocado. Este evento pode ser utilizado para mostrar um registo detalhado ou navegar para outro ecrã.

Se a propriedade RaiseOnRowSelectionChangeEvent estiver ativada, quando as linhas selecionadas forem alteradas, o evento OnChange é criado com o EventName definido como OnRowSelectionChange. Se a aplicação precisar de responder a uma única linha, selecione em vez de clicar duas vezes na linha, o OnChange pode detetar isto utilizando código semelhante a:

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

Limpar os itens atualmente selecionados

Para limpar os registos selecionados, tem de definir a propriedade InputEvent para uma cadeia que comece por

por exemplo

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

A variável de contexto ctxTableEvent pode então ser ligada à propriedade InputEvent.

Definir a Seleção de Linhas

Se houver um cenário no qual um conjunto de registos específico deve ser selecionado programaticamente, a propriedade InputEvent pode ser definida como SetSelection ou SetFocusOnRowSetSelection em combinação com a definição da propriedade RecordSelected no registo.

Por exemplo, se tivesse um conjunto de dados da seguinte forma:

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

Para selecionar e selecionar a primeira linha, poderá definir InputEvent como "SetFocusOnRowSetSelection"&Text(Rand()) ou "SetSelection"&Text(Rand())

Configurar o comportamento "Ao Alterar"

Adicione e modifique a fórmula seguinte na propriedade OnChange do componente para configurar ações específicas com base no EventName fornecido pelo componente:

Acione eventos quando um utilizador altera a linha selecionada: ative a propriedade Raise OnRowSelectionChange event no componente.
Configurar o comportamento da ligação: adicione colunas com o valor ColCellType definido como ligação.

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

Limitações

Este componente de código só pode ser utilizado em aplicações de tela e páginas personalizadas.

Partilhar via

DetailsList Controlo

Description

_Propriedades

Propriedades-chave

`Items` propriedades

`Columns` propriedades

Propriedades de Estilo

Propriedades do evento

Utilização Básica

Colunas de Subtexto

Tipos de Célula

Expandir/Fechar

Etiqueta e Etiqueta de Indicador

Imagem e Imagem Clicável

Ligações

Colunas de múltiplos valores

Comportamento

Ordenar Eventos

Ordenação Automática

Ordenação Manual

Paginação

Mostrar o topo da página seguinte

Eventos de Entrada

Ações de Itens e Linhas Selecionados

Limpar os itens atualmente selecionados

Definir a Seleção de Linhas

Configurar o comportamento "Ao Alterar"

Limitações

Comentários

Recursos adicionais

Partilhar via

DetailsList Controlo

Description

_Propriedades

Propriedades-chave

Items propriedades

Columns propriedades

Propriedades de Estilo

Propriedades do evento

Utilização Básica

Colunas de Subtexto

Tipos de Célula

Expandir/Fechar

Etiqueta e Etiqueta de Indicador

Imagem e Imagem Clicável

Ligações

Colunas de múltiplos valores

Comportamento

Ordenar Eventos

Ordenação Automática

Ordenação Manual

Paginação

Mostrar o topo da página seguinte

Eventos de Entrada

Ações de Itens e Linhas Selecionados

Limpar os itens atualmente selecionados

Definir a Seleção de Linhas

Configurar o comportamento "Ao Alterar"

Limitações

Comentários

Recursos adicionais

`Items` propriedades

`Columns` propriedades