Lista Personalizada

Controle Lista personalizada, um controle de exibição baseado em modelo para criar layouts de lista flexíveis e associados a dados usando a palavra-chave EstaLinha e controles de contêiner aninhados.

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 e-mails 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, clique no controle da tela ou selecione-o no modo de exibição de árvore, à esquerda.

EstaLinha

Use a palavra-chave ThisRow para representar cada linha dos dados da lista personalizada.

Para associar valores da Origem de dados aos controles individuais dentro da 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 suspensos .

• Fazer referência direta de controles da Lista personalizada , como MainPage.Header, não é permitido, apesar do nome do controle ter sido encontrado pelo IntelliSense.

• Arrastar controles entre o contexto de uma Lista personalizada e outros controles do 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 ) se tornam 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. Adicione o controle Lista personalizada ao seu aplicativo.
3. Criar um layout usando contêineres e controles para cada elemento de lista.
4. Crie uma linha de amostra que inclua uma descrição de texto.
5. Substitua a descrição do texto por expressões.
6. Adicione regras aos eventos.
7. Ajuste o estilo do controle de acordo com o arquivo de design.
8. Visualize o aplicativo.

Demonstração

Usando a lista personalizada

Introdução

Este aplicativo demonstra a funcionalidade de Lista personalizada .

Aplicativo de demonstração – experimente você

Para experimentar a Lista personalizada por conta própria, 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 de Lista personalizada , visualize seu 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 TabelaDeDados e Object Array.
• Oculto — se definido como verdadeiro, oculta o controle durante o tempo de execução.
• Desabilitado — Se definido como falso, os usuários de aplicativos podem interagir com a lista. Se definido como verdadeiro, a lista ficará no estado somente leitura.

Modelo

• Dica de ferramenta — Dica de ferramenta a ser exibida no modelo. Use isso 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 falso, os usuários de aplicativos podem interagir com o modelo. Se definido como verdadeiro, o modelo estará no estado somente leitura.

Events

Lista Personalizada

• Linha selecionada — configure o que acontece 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 é 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 parent. É 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 dentro da lista personalizada:
  • Vertical - os modelos são organizados verticalmente
  • Horizontal — os modelos são organizados horizontalmente
  • Grade - os modelos são dispostos em um formato de grade
  • Espaço entre ( somente pixels) - o espaçamento entre os modelos, quando eles são organizados 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 é definida em pixels, e a Largura pode ser em pixels, %, em ou auto.
  • Em um layout de Grade , Altura e Largura devem estar em pixels. Unidades relativas como %, em ou auto não podem ser usadas.
• Margem — a margem do layout. Por padrão, uma margem de 4px é definida. As propriedades Top/Bottom e Left/Right 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 pixels
  • Em um Layout de grade : Largura 800 px, Altura 400 pxPara definir valores mínimos ou máximos, clique no ícone de três pontos (*).

Modelo

• Alinhamento de controle — Por padrão, herda o alinhamento parent. É 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 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— a margem do layout. Por padrão, uma margem de 0px é definida. As propriedades Top/Bottom e Left/Right 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 16px. As propriedades Top/Bottom e Left/Right 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.
  • Flex basis - Define o tamanho original de um item Flex antes que o espaço extra seja distribuído ou retirado (px, %, em, auto).
  • Flex grow — quando há espaço extra disponível, este valor determina quanto um item Flex deve crescer em relação ao restante dos itens.
  • Flex shrink — quando o espaço não é suficiente, esse valor determina quanto um item Flex deve encolher em comparação com os outros itens. Para obter detalhes, consulte a documentação da Rede de Desenvolvedores Mozilla.

Propriedades VB

Nome da propriedade	Tipo de dados	Permissões de acesso	Exemplo
Disabled	Booleano	Ler/Escrever	Se verdadeiro, desabilita o controle no tempo de execução.
Hidden	Booleano	Ler/Escrever	Se verdadeiro, oculta o controle no tempo de execução.
SelectedItem	União do tipo de Fonte de dados e da lista de controles dentro da Lista personalizada.	Ler/Escrever	Supondo um cenário em que sua Fonte de dados é uma entidade, para acessar a linha da entidade: MainPage.CustomList.SelectedItem.data Supondo um cenário em que um Seletor de datas esteja em sua Lista personalizada, para acessar o valor do controle do Seletor de datas : MainPage.CustomList.SelectedItem.Datepicker.value
SelectedItemIndex	Número inteiro	Somente leitura	Retorna o índice da linha atualmente selecionada: MainPage.CustomList.SelectedItemIndex
ThisRow	A mesma que o campo Fonte 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

Suponha um cenário em que você faça 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 de Caixa de texto dentro da Lista personalizada, você pode usar a seguinte expressão:

ThisRow.Firstname

A origem de dados é uma TabelaDeDados

Suponha um cenário em que você faz 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.