Partilhar via

Picker Controlo

  • Artigo

Um controlo utilizado para proporcionar uma experiência de pesquisa.

Nota

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

Controlo Picker.

Descrição

Os seletores são utilizados para selecionar um ou mais itens, tais como etiquetas ou ficheiros, a partir de uma lista grande.

O componente de código do seletor permitem a utilização dos componentes de menu do seletor da Fluent UI a partir de dentro de aplicações de tela e de páginas personalizadas.

O componente de código Seletor de Etiquetas fornece as seguintes caraterísticas:

  1. Vincula-se a uma coleção de entrada para as etiquetas escolhidas.
  2. Vincula-se a uma coleção de entrada para etiquetas sugeridas.
  3. Permite que os utilizadores selecionem a partir de sugestões ou que introduza uma etiqueta de texto livre.
  4. Cria um evento Ao Alterar quando um utilizador adiciona ou remove uma etiqueta.
  5. Permite o Definir Foco programático.

Conjuntos de Dados

O Seletor de Etiquetas tem os seguintes conjuntos de dados de entrada, que são descritos em detalhe em Propriedades-chave posteriormente neste artigo.

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

O conjunto de dados Suggestions deverá ser filtrado utilizando a propriedade de saída SearchTerm, por exemplo:

Search(colSuggestions,TagPicker.SearchTerm,"name")

_Propriedades

Propriedades chave

Property Descrição
Items Uma coleção (tabela) de etiquetas. A aplicação é responsável por adicionar ou remover etiquetas em resposta ao componente ter criado eventos Adicionar ou Remover (descritos na seguinte secção de eventos OnChange).
Suggestions_Items Uma coleção (tabela) de sugestões.
TagMaxWidth A largura máxima das etiquetas ao compor. O texto de capacidade excedida será truncado com reticências e uma descrição quando paira o cursor mostra o texto completo.
AllowFreeText Quando digitar um valor, não selecione automaticamente a primeira sugestão, para que seja possível disponibilizar uma entrada de texto livre, em vez de selecioná-lo a partir de uma lista predefinida.
SearchTermToShortMessage A mensagem a apresentar quando o Termo de Pesquisa é menor que MinimumSearchTermLength.
HintText A mensagem a apresentar no Seletor quando não for fornecido qualquer termo de pesquisa.
NoSuggestionsFoundMessage A mensagem a apresentar quando a coleção Sugestões não contém resultados.
MinimumSearchTermLength O número mínimo de carateres para acionar a lista de opções de sugestões.
MaxTags O número máximo de etiquetas que podem ser adicionadas. Após este número, o Seletor de Etiquetas será só de leitura até que uma etiqueta seja removida.
Error True quando o limite de erro vermelho deve ser apresentado.

Items propriedades

Property Descrição
TagsDisplayName Definido como o nome da coluna que contém o nome a apresentar da etiqueta.

Suggestions propriedades

Property Descrição
SuggestionsDisplayName Definido como o nome da coluna que contém o nome a apresentar da sugestão.
SuggestionsSubDisplayName (Opcional) definido como o nome da coluna que contém a linha de texto secundária.

Propriedades de estilo

Property Descrição
Theme Aceita uma cadeia JSON que é gerada através do Estruturador de Teams da Fluent UI (windows.net). Deixar isto em branco irá utilizar o tema predefinido estabelecido pelo Power Apps. Consulte personalizar o tema para obter orientações sobre como configurar.
FontSize o tamanho do tipo de letra das etiquetas mostradas no Seletor.
BorderRadius o raio do limite das etiquetas mostradas no Seletor.
ItemHeight a altura das etiquetas (pixéis) mostradas no interior do Seletor.
AccessibilityLabel Etiqueta aria de leitor de ecrã

Propriedades do evento

Property Descrição
Input Event Definido para o evento para enviar para o TagPicker

Propriedades de saída

Property Descrição
SearchTerm O texto introduzido no Seletor de Etiquetas que pode ser utilizado para filtrar o conjunto de dados de sugestões.
TagsDisplayName o texto utilizado para criar uma nova Etiqueta quando o evento On Change é acionado
AutoHeight Quando o seletor de etiquetas encapsula em várias linhas, a propriedade Auto Height pode ser utilizada para controlar a altura de uma altura de contentor reativo.

Comportamento

Suporta SetFocus como um InputEvent.

Evento OnChange

O componente TagPicker cria um evento OnChange quando são adicionadas ou removidas etiquetas. As propriedades utilizadas são:

Property Descrição
TagEvent O nome do evento criado
TagKey A chave do item que criou o evento (se o evento estiver relacionado com uma etiqueta)

O evento deve conter uma expressão semelhante a:

If( TagPicker.TagEvent = "Add" && CountRows(Filter(colTags,name=TagPicker.TagsDisplayName)) = 0,
    Collect( colTags, { name:TagPicker.TagsDisplayName })
);

If( TagPicker.TagEvent="Remove",
 RemoveIf( colTags,name=Text(TagPicker.TagsDisplayName) )
);

Limitações

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