Lista Personalizada

A lista personalizada é um controle dinâmico baseado em modelo que incorpora vários controles com flexibilidade excepcional. Longe de ser um controle de lista padrão, a Lista personalizada permite ainda mais controles dentro do layout, tornando-a ideal para tarefas como a criação de uma grade de listagem de emails eficaz.

Propriedades

A Lista personalizada tem dois conjuntos de propriedades: um para o controle principal e outro para o modelo dentro dele.

Para alternar entre as propriedades de uma Lista Personalizada e seu Modelo, basta clicar no controle na tela ou selecioná-lo no modo de exibição de árvore, à esquerda.

EstaLinha

A palavra-chave ThisRow para representar cada linha dos dados da lista personalizada

Para associar valores da Origem de dados a controles individuais na Lista personalizada, use a palavra-chave ThisRow . Para obter detalhes, consulte Exemplos.

Limitações

• Devido a considerações de desempenho, vários controles não podem ser incluídos em uma Lista personalizada:

  • Editar Grade

  • Tabela

  • Lista Personalizada

  • HTML Personalizado

  • Guias

  Observação:

  Para controles baseados em lista que excedam quatro itens, recomendamos usar controles de Lista suspensa .

• A referência direta a controles de Lista Personalizada , como MainPage.Header, não é permitida, apesar do nome do controle ser encontrado pelo IntelliSense.
• Arrastar controles entre o contexto de uma Lista personalizada e outros controles de contêiner pode causar expressões inválidas, algumas visíveis apenas quando você visualiza o aplicativo. Isso ocorre porque as associações dentro do contexto da Lista Personalizada (usando a palavra-chave ThisRow ) tornam-se inválidas fora da Lista Personalizada.

Criação de lista personalizada ideal

O método ideal para trabalhar com uma Lista personalizada é o seguinte:

1. Crie sua lista personalizada usando uma ferramenta de design como o Lega.

2. No App Studio, após adicionar o controle Lista personalizada, crie um layout usando contêineres e controles para cada elemento da lista.

3. Crie uma linha de amostra que inclua uma descrição de texto.

4. Substitua a descrição do texto por expressões.

5. Adicione regras aos eventos.

6. Ajuste o estilo do controle de acordo com o arquivo de design.

7. Visualize o aplicativo.

Geral

Lista Personalizada

• Origem de dados — a origem de dados para a exibição da lista. Os tipos de dados válidos são DataTable e Object Array.
• Oculto — se definido como verdadeiro, oculta o controle durante o tempo de execução.
• Desabilitado — se definido como false, os usuários de aplicativos podem interagir com a lista. Se definido como verdadeiro, a lista ficará no estado de somente leitura.

Modelo

• Dica de ferramenta — Dica de ferramenta a ser exibida no modelo. Use a dica para fornecer informações adicionais sobre o modelo.

• Oculto— se definido como verdadeiro, oculta o controle durante o tempo de execução.

• Desabilitado — se definido como false, os usuários de aplicativos podem interagir com o modelo. Se definido como verdadeiro, o modelo estará em um estado de somente leitura.

Events

Lista Personalizada

• Linha selecionada — configure o que deve acontecer quando o usuário do aplicativo seleciona uma linha (ou seja, um controle dentro de um modelo) na lista personalizada. Configure o que deve acontecer quando o valor for alterado.

Modelo

• Clicando em — Configure o que acontece ao se clicar no modelo.

Estilo

Lista Personalizada

• Alinhamento de controle — Por padrão, herda o alinhamento pai. É possível definir outro alinhamento que não o pai. Para voltar ao alinhamento padrão pai, desmarque as opções substituídas.

  Observação: o alinhamento depende do layout selecionado para o pai (Vertical vs Horizontal).
• Layout — Personalize a posição dos modelos na lista personalizada:
  • Vertical - os modelos são organizados verticalmente

  • Horizontal - os modelos são organizados horizontalmente

  • Grade - os modelos são organizados em um formato de grade

  • Espaço entre (apenas pixels) - o espaçamento entre os modelos, quando eles estão dispostos em um layout Vertical ou Horizontal .

  • Espaço horizontal / vertical - o espaçamento horizontal e vertical entre os modelos, quando eles são organizados em um layout de grade .

  • Largura do modelo - a largura do modelo.

  • Altura do modelo - a altura do modelo.

  Observação:

  • Em um layout Horizontal , a Largura é definida em pixels e a Altura em pixels, %, em, ou auto.
  • Em um layout vertical , a Altura está em pixels e a Largura pode ser em pixels, %, em ou auto.

  • Em um layout de Grade , tanto a Altura quanto a Largura estão em pixels.

• Margem — a margem do layout. Por padrão, uma margem de 4 px é definida. As properties Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Margem .

• Tamanho — a Largura e a Altura da lista personalizada, em pixels. Valores padrão:
  • Em um layout Horizontal : Largura 800 pixels, Altura automática
  • Em um layout vertical : largura automática, altura 400 px
  • Em um layout de Grade : Largura 800 px, Altura 400 px
  Para definir valores mínimos ou máximos, clique no ícone de três pontos (...).

Modelo

• Alinhamento de controle — Por padrão, herda o alinhamento pai. É possível definir outro alinhamento que não o pai. Para voltar ao alinhamento padrão pai, desmarque as opções substituídas.

  Observação: o alinhamento depende do layout selecionado para o pai (Vertical vs Horizontal).

• Layout — Determine como os controles dentro do modelo são posicionados:

  • Horizontal/Vertical — a orientação dos controles.
  • Alinhamento— o alinhamento de controles dentro do modelo.
  • Permitir encapsulamento — se selecionado, encapsula os controles no modelo.

  • Permitir rolagem — se selecionado, permite a rolagem dentro do modelo. Para habilitar o controle Permitir rolagem, o modelo deve ter uma altura fixa (layout vertical) ou largura fixa (layout horizontal).

• Cor de fundo — a cor em segundo plano do modelo.

• Borda — define a borda do controle. Espessura, cor e raio da borda podem ser configurados.

• Fonte — a família de fontes para o modelo. Todos os controles dentro do modelo compartilham a mesma família de fontes. Por padrão, o modelo herda a família de fontes da Lista Personalizada.

• Margem — define a margem do layout. Por padrão, uma margem de 0px é definida. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Margem.

• Preenchimento — o preenchimento do modelo. Por padrão, é definido um preenchimento de 16 pixels. As properties Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Preenchimento .

• Avançado — exibe as propriedades Flex do controle.

  • Base flexível - Define o tamanho original de um item flexível antes que o espaço extra seja distribuído ou retirado (px, %, em, auto).

  • crescimento Flex - Quando o espaço extra está disponível, esses valores determinam quanto um item flexível deve crescer em relação ao restante dos itens.

  • Redução Flex - Quando o espaço não é suficiente, esse valor determina o quanto um item flexível deve encolher em comparação com os outros itens.

    Para obter detalhes, consulte a documentação do Mozilla Developer Network.

Propriedades VB

Nome da propriedade	Tipo de dados	Permissões de acesso	Exemplo
Desabilitado	Booleano	Ler/Escrever	-
Oculto	Booleano	Ler/Escrever	-
SelectedItem	União do tipo de Fonte de Dados e a lista de controles dentro da Lista Personalizada	Ler/Escrever	Digamos que sua Fonte de Dados seja uma entidade Para acessar a linha da entidade: MainPage.CustomList.SelectedItem.data Digamos que você tenha um Seletor de datas em sua Lista personalizada. Para acessar o valor do controle do Seletor de datas : MainPage.CustomList.SelectedItem.Datepicker.value
ÍndiceDeItemSelecionado	Número inteiro	Somente leitura	Retorna o índice da linha atualmente selecionada: MainPage.CustomList.SelectedItemIndex
EstaLinha	Os mesmos do campo Origem de Dados	Somente leitura	Refere-se ao registro atual da fonte de dados. Use-o para configurar campos dentro da lista personalizada.

Exemplos de associação de dados para elementos de lista personalizada

A origem de dados é uma Entidade

Digamos que você faz referência a uma entidade no campo Origem de dados. Esta entidade tem uma coluna chamada cvxz"FirstName".vcc

Para associar essa coluna a um controle Caixa de texto na lista personalizada, você pode usar a seguinte expressão:

ThisRow.Firstname

A origem de dados é uma TabelaDeDados

Digamos que você faça referência a um argumento TabelaDeDados de um processo no campo Origem de dados .

O tipo de thisRow é DataRow, e seu valor pode ser extraído da seguinte maneira:

ThisRow("FieldName")

Certifique-se de convertê-lo para o tipo apropriado.

Demonstração

Usando a lista personalizada

Introdução

Este aplicativo demonstra o recurso de Lista personalizada .

Aplicativo de demonstração – experimente você

Para experimentar a Lista personalizada , use o aplicativo de demonstração.

Baixar aplicativo de demonstração do GitHub

Visualizar aplicativo de demonstração na nuvem

Aplicativo de demonstração — instruções para usar

1. No UiPath^® Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.

2. Você pode notar alguns erros. Para corrigi-los, substitua as entidades referenciadas "Country", "EmailInbox", "Employees", "Employees2" e "System Users" por entidades no tenant.

3. Para interagir com os campos da Lista personalizada , visualize seu aplicativo.