As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # Referência de componentes Este tópico detalha cada um dos componentes do App Studio, suas propriedades e inclui exemplos de configuração. ## Propriedades comuns dos componentes Esta seção descreve as propriedades e os recursos gerais que são compartilhados entre vários componentes no estúdio de aplicativos. Os detalhes específicos da implementação e os casos de uso de cada tipo de propriedade podem variar dependendo do componente, mas o conceito geral dessas propriedades permanece consistente no App Studio. ### Nome Um nome padrão é gerado para cada componente; no entanto, você pode editar para mudar para um nome exclusivo para cada componente. Você usará esse nome para referenciar o componente e seus dados de outros componentes ou expressões na mesma página. Limitação: Não inclua espaços no nome do componente; ele só pode ter letras, números, sublinhados e cifrões. Exemplos: `userNameInput`, `ordersTable`, `metricCard1`. ### Valor primário, valor secundário e valor Muitos componentes no estúdio de aplicativos fornecem campos para especificar valores ou expressões que determinam o conteúdo ou os dados exibidos no componente. Esses campos geralmente são rotulados como `Primary value``Secondary value`, ou simplesmente`Value`, dependendo do tipo e da finalidade do componente. O `Primary value` campo geralmente é usado para definir o valor principal, o ponto de dados ou o conteúdo que deve ser exibido com destaque no componente. O `Secondary value` campo, quando disponível, é usado para exibir um valor ou informação adicional ou de suporte ao lado do valor principal. O `Value` campo permite que você especifique o valor ou a expressão que deve ser exibida no componente. Esses campos oferecem suporte à entrada de texto estático e a expressões dinâmicas. Ao usar expressões, você pode referenciar dados de outros componentes, fontes de dados ou variáveis em seu aplicativo, permitindo a exibição de conteúdo dinâmico e orientado por dados. #### Sintaxe para expressões A sintaxe para inserir expressões nesses campos segue um padrão consistente: ``` {{expression}} ``` Onde *expression* é uma expressão válida que avalia o valor ou os dados desejados que você deseja exibir. ##### Exemplo: texto estático + Valor primário: você pode inserir um número ou valor estático diretamente, como `"123"` ou`"$1,999.99"`. + Valor secundário: você pode inserir um rótulo de texto estático, como `"Goal"` ou`"Projected Revenue"`. + Valor: você pode inserir uma string estática, como `"since last month"` ou`"Total Quantity"`. ##### Exemplos: Expressões + `Hello, {{currentUser.firstName}}`: exibe uma saudação com o primeiro nome do usuário atualmente conectado. + `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: exibe condicionalmente um título de painel diferente com base na função do usuário. + `{{ui.componentName.data?.[0]?.fieldName}}`: recupera o valor do `fieldName` campo do primeiro item nos dados do componente com o ID`componentName`. + `{{ui.componentName.value * 100}}`: executa um cálculo do valor do componente com o ID`componentName`. + `{{ui.componentName.value + ' items'}}`: concatena o valor do componente com o ID `componentName` e a string. `' items'` + `{{ui.ordersTable.data?.[0]?.orderNumber}}`: recupera o número do pedido da primeira linha de dados no `ordersTable` componente. + `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: calcula a receita projetada aumentando a receita total da primeira linha de dados no `salesMetrics` componente em 15%. + `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: concatena o nome e o sobrenome dos dados no componente. `customerProfile` + `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: formata a data do pedido do `orderDetails` componente em uma string de data mais legível. + `{{ui.productList.data?.length}}`: exibe o número total de produtos nos dados conectados ao `productList` componente. + `{{ui.discountPercentage.value * ui.orderTotal.value}}`: calcula o valor do desconto com base na porcentagem do desconto e no total do pedido. + `{{ui.cartItemCount.value + ' items in cart'}}`: exibe o número de itens no carrinho de compras, junto com a etiqueta`items in cart`. Ao usar esses campos de expressão, você pode criar conteúdo dinâmico e orientado por dados em seu aplicativo, permitindo que você exiba informações adaptadas ao contexto do usuário ou ao estado do seu aplicativo. Isso permite experiências de usuário mais personalizadas e interativas. ### Rótulo A propriedade **Label** permite que você especifique uma legenda ou título para o componente. Esse rótulo geralmente é exibido ao lado ou acima do componente, ajudando os usuários a entender sua finalidade. Você pode usar texto estático e expressões para definir o rótulo. #### Exemplo: texto estático Se você inserir o texto “Nome” no campo Rótulo, o componente exibirá “Nome” como rótulo. #### Exemplo: Expressões ##### Exemplo: loja de varejo O exemplo a seguir personaliza o rótulo para cada usuário, fazendo com que a interface pareça mais personalizada para cada pessoa: ``` {{currentUser.firstName}} {{currentUser.lastName}}'s Account ``` ##### Exemplo: gerenciamento de projetos SaaS O exemplo a seguir extrai dados do projeto selecionado para fornecer rótulos específicos ao contexto, ajudando os usuários a se manterem orientados no aplicativo: ``` Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}} ``` ##### Exemplo: clínica de saúde O exemplo a seguir faz referência ao perfil do usuário atual e às informações do médico, proporcionando uma experiência mais personalizada para os pacientes. ``` Dr. {{ui.doctorProfileTable.data.firstName}} {{ui.doctorProfileTable.data.lastName}} ``` ### Placeholder A propriedade Placeholder permite que você especifique o texto de dica ou orientação que é exibido dentro do componente quando ele está vazio. Isso pode ajudar os usuários a entender o formato de entrada esperado ou fornecer contexto adicional. Você pode usar texto estático e expressões para definir o espaço reservado. #### Exemplo: texto estático Se você inserir o texto `Enter your name` no campo **Espaço reservado**, o componente será exibido `Enter your name` como texto do espaço reservado. #### Exemplo: Expressões ##### Exemplo: serviços financeiros `Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`Esses exemplos extraem dados da conta selecionada para exibir solicitações relevantes, tornando a interface intuitiva para clientes bancários. ##### Exemplo: comércio eletrônico `Enter the coupon code for {{ui.cartTable.data.currency}} total`O espaço reservado aqui é atualizado dinamicamente com base no conteúdo do carrinho do usuário, proporcionando uma experiência de checkout perfeita. ##### Exemplo: clínica de saúde `Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`Ao usar uma expressão que faz referência à idade do paciente, o aplicativo pode criar um espaço reservado mais personalizado e útil. ### Fonte A propriedade **Source** permite selecionar a fonte de dados de um componente. Após a seleção, você pode escolher entre os seguintes tipos de fonte de dados:`entity`,`expression`, ou`automation`. #### Entidade Selecionar **Entidade** como fonte de dados permite conectar o componente a uma entidade de dados ou modelo existente em seu aplicativo. Isso é útil quando você tem uma estrutura de dados ou um esquema bem definido que deseja aproveitar em todo o aplicativo. Quando usar a fonte de dados da entidade: + Quando você tem um modelo de dados ou entidade que contém as informações que você deseja exibir no componente (por exemplo, uma entidade de “Produtos” com campos como “Nome”, “Descrição”, “Preço”). + Quando você precisa buscar dados dinamicamente de um banco de dados, API ou outra fonte de dados externa e apresentá-los no componente. + Quando você quiser aproveitar os relacionamentos e associações definidos no modelo de dados do seu aplicativo. ##### Selecionar uma consulta em uma entidade Às vezes, talvez você queira conectar um componente a uma consulta específica que recupera dados de uma entidade, em vez da entidade inteira. Na fonte de dados da entidade, você tem a opção de escolher entre as consultas existentes ou criar uma nova. Ao selecionar uma consulta, você pode: + Filtre os dados exibidos no componente com base em critérios específicos. + Passe parâmetros para a consulta para filtrar ou classificar dinamicamente os dados. + Aproveite junções complexas, agregações ou outras técnicas de manipulação de dados definidas na consulta. Por exemplo, se você tiver uma `Customers` entidade em seu aplicativo com campos como `Name``Email`, `PhoneNumber` e. Você pode conectar um componente de tabela a essa entidade e escolher uma ação de `ActiveCustomers` dados predefinida que filtra os clientes com base em seu status. Isso permite que você exiba somente os clientes ativos na tabela, em vez de todo o banco de dados de clientes. ##### Adicionar parâmetros a uma fonte de dados da entidade Ao usar uma entidade como fonte de dados, você também pode adicionar parâmetros ao componente. Esses parâmetros podem ser usados para filtrar, classificar ou transformar os dados exibidos no componente. Por exemplo, se você tiver uma `Products` entidade com campos como `Name` `Description``Price`,, `Category` e. Você pode adicionar um parâmetro chamado `category` a um componente da tabela que exibe a lista de produtos. Quando os usuários selecionam uma categoria em uma lista suspensa, a tabela é atualizada automaticamente para mostrar somente os produtos pertencentes à categoria selecionada, usando a `{{params.category}}` expressão na ação de dados. #### Expressão Selecione **Expressão** como fonte de dados para inserir expressões ou cálculos personalizados para gerar os dados do componente dinamicamente. Isso é útil quando você precisa realizar transformações, combinar dados de várias fontes ou gerar dados com base em uma lógica comercial específica. Quando usar a fonte de dados **Expression**: + Quando você precisa calcular ou derivar dados que não estão diretamente disponíveis em seu modelo de dados (por exemplo, calcular o valor total do pedido com base na quantidade e no preço). + Quando você quiser combinar dados de várias entidades ou fontes de dados para criar uma visualização composta (por exemplo, exibir o histórico de pedidos de um cliente junto com suas informações de contato). + Quando você precisa gerar dados com base em regras ou condições específicas (por exemplo, exibir uma lista de “Produtos recomendados” com base no histórico de navegação do usuário). Por exemplo, se você tiver um *Metrics* componente que precise exibir a receita total do mês atual, poderá usar uma expressão como a seguinte para calcular e exibir a receita mensal: ``` {{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}} ``` ##### Automação Selecione **Automação** como fonte de dados para conectar o componente a uma automação ou fluxo de trabalho existente em seu aplicativo. Isso é útil quando os dados ou a funcionalidade do componente são gerados ou atualizados como parte de um processo ou fluxo de trabalho específico. Quando usar a fonte **de dados de automação**: + Quando os dados exibidos no componente são o resultado de uma automação ou fluxo de trabalho específico (por exemplo, uma tabela de “Aprovações pendentes” que é atualizada como parte de um processo de aprovação). + Quando você quiser acionar ações ou atualizações no componente com base em eventos ou condições dentro de uma automação (por exemplo, atualizar uma métrica com os números de vendas mais recentes de um SKU). + Quando você precisa integrar o componente a outros serviços ou sistemas em seu aplicativo por meio de uma automação (por exemplo, buscar dados de uma API de terceiros e exibi-los em uma tabela). Por exemplo, se você tiver um componente de fluxo de etapas que orienta os usuários em um processo de solicitação de emprego. O componente stepflow pode ser conectado a uma automação que lida com o envio da solicitação de emprego, a verificação de antecedentes e a geração de ofertas. À medida que a automação avança por essas etapas, o componente stepflow pode ser atualizado dinamicamente para refletir o status atual do aplicativo. Ao selecionar cuidadosamente a fonte de dados apropriada para cada componente, você pode garantir que a interface de usuário do seu aplicativo seja alimentada pelos dados e pela lógica corretos, fornecendo uma experiência perfeita e envolvente para seus usuários. ### Visível se Use a propriedade **Visible if** para mostrar ou ocultar componentes ou elementos com base em condições específicas ou valores de dados. Isso é útil quando você deseja controlar dinamicamente a visibilidade de determinadas partes da interface de usuário do seu aplicativo. A propriedade **Visible if** usa a seguinte sintaxe: ``` {{expression ? true : false}} ``` or ``` {{expression}} ``` Onde *expression* é uma expressão booleana que é avaliada como ou. `true` `false` Se a expressão for avaliada como`true`, o componente ficará visível. Se a expressão for avaliada como`false`, o componente ficará oculto. A expressão pode referenciar valores de outros componentes, fontes de dados ou variáveis em seu aplicativo. #### Exemplos de expressões visíveis ##### Exemplo: mostrar ou ocultar um campo de entrada de senha com base em uma entrada de e-mail Imagine que você tenha um formulário de login com um campo de entrada de e-mail e um campo de entrada de senha. Você deseja mostrar o campo de entrada da senha somente se o usuário tiver inserido um endereço de e-mail. Você pode usar a seguinte expressão Visible if: ``` {{ui.emailInput.value !== ""}} ``` Essa expressão verifica se o valor do `emailInput` componente não é uma string vazia. Se o usuário tiver inserido um endereço de e-mail, a expressão será avaliada como `true` e o campo de entrada da senha ficará visível. Se o campo de e-mail estiver vazio, a expressão será avaliada como `false` e o campo de entrada da senha ficará oculto. ##### Exemplo: exibição de campos de formulário adicionais com base em uma seleção suspensa Digamos que você tenha um formulário em que os usuários possam selecionar uma categoria em uma lista suspensa. Dependendo da categoria selecionada, você deseja mostrar ou ocultar campos adicionais do formulário para coletar informações mais específicas. Por exemplo, se o usuário selecionar a *Products* categoria, você poderá usar a seguinte expressão para mostrar um *Product Details* campo adicional: ``` {{ui.categoryDropdown.value === "Products"}} ``` Se o usuário selecionar as *Consulting* categorias *Services* ou, você poderá usar essa expressão para mostrar um conjunto diferente de campos adicionais: ``` {{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}} ``` ##### Exemplos: Outros Para tornar o componente visível se o valor do `textInput1` componente não for uma string vazia: ``` {{ui.textInput1.value === "" ? false : true}} ``` Para tornar o componente sempre visível: ``` {{true}} ``` Para tornar o componente visível se o valor do `emailInput` componente não for uma string vazia: ``` {{ui.emailInput.value !== ""}} ``` ### Desativado se O recurso **Desativado if** permite que você ative ou desative condicionalmente um componente com base em condições específicas ou valores de dados. Isso é obtido usando a propriedade **Disabled if**, que aceita uma expressão booleana que determina se o componente deve ser ativado ou desativado. A propriedade **Disabled if** usa a seguinte sintaxe: ``` {{expression ? true : false}} ``` or ``` {{expression}} ``` #### Desabilitado se houver exemplos de expressão ##### Exemplo: desabilitar um botão de envio com base na validação do formulário Se você tiver um formulário com vários campos de entrada e quiser desativar o botão de envio até que todos os campos obrigatórios sejam preenchidos corretamente, você pode usar a seguinte expressão **Disabled If**: ``` {{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}} ``` Essa expressão verifica se algum dos campos de entrada obrigatórios (`nameInput`,`emailInput`,`passwordInput`) está vazio. Se algum dos campos estiver vazio, a expressão será avaliada como e o botão de envio será desativado. `true` Depois que todos os campos obrigatórios forem preenchidos, a `false` expressão será avaliada como e o botão de envio será ativado. Ao usar esses tipos de expressões condicionais nas propriedades **Visible if** e **Disabled ff**, você pode criar interfaces de usuário dinâmicas e responsivas que se adaptam à entrada do usuário, fornecendo uma experiência mais simplificada e relevante para os usuários do seu aplicativo. Onde *expression* está uma expressão booleana que é avaliada como verdadeira ou falsa. Exemplo: ``` {{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string. {{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid. ``` #### Layouts de contêineres As propriedades do layout determinam como o conteúdo ou os elementos dentro de um componente são organizados e posicionados. Várias opções de layout estão disponíveis, cada uma representada por um ícone: + **Layout da coluna**: esse layout organiza o conteúdo ou os elementos verticalmente, em uma única coluna. + **Layout de duas colunas**: esse layout divide o componente em duas colunas de largura igual, permitindo que você posicione conteúdo ou elementos lado a lado. + **Layout de linha**: esse layout organiza o conteúdo ou os elementos horizontalmente, em uma única linha. ##### Orientation (Orientação) + **Horizontal**: esse layout organiza o conteúdo ou os elementos horizontalmente, em uma única linha. + **Vertical**: esse layout organiza o conteúdo ou os elementos verticalmente, em uma única coluna. + **Quebrado em linha**: esse layout organiza o conteúdo ou os elementos horizontalmente, mas passa para a próxima linha se os elementos excederem a largura disponível. ##### Alinhamento + **Esquerda**: alinha o conteúdo ou os elementos no lado esquerdo do componente. + **Centralizar**: centraliza o conteúdo ou os elementos horizontalmente dentro do componente. + **Direita**: alinha o conteúdo ou os elementos no lado direito do componente. ##### Largura A propriedade **Largura** especifica o tamanho horizontal do componente. Você pode inserir um valor percentual entre 0% e 100%, representando a largura do componente em relação ao contêiner principal ou ao espaço disponível. ##### Altura A propriedade **Altura** especifica o tamanho vertical do componente. O valor “auto” ajusta automaticamente a altura do componente com base em seu conteúdo ou no espaço disponível. ##### Espaço entre A propriedade **Espaço entre** determina o espaçamento ou a lacuna entre o conteúdo ou os elementos dentro do componente. Você pode selecionar um valor de 0px (sem espaçamento) a 64px, com incrementos de 4px (por exemplo, 4px, 8px, 12px, etc.). ##### Padding A propriedade **Padding** controla o espaço entre o conteúdo ou os elementos e as bordas do componente. Você pode selecionar um valor de 0px (sem preenchimento) a 64px, com incrementos de 4px (por exemplo, 4px, 8px, 12px, etc.). ##### Contexto O **Plano de fundo** ativa ou desativa uma cor ou estilo de fundo para o componente. Essas propriedades de layout oferecem flexibilidade na organização e no posicionamento do conteúdo em um componente, além de controlar o tamanho, o espaçamento e a aparência visual do próprio componente. ## Componentes de dados Esta seção aborda os vários componentes de dados disponíveis no estúdio de aplicativos, incluindo os componentes **Tabela**, **Detalhe**, **Métrica**, **Formulário** e **Repetidor**. Esses componentes são usados para exibir, reunir e manipular dados em seu aplicativo. ### Tabela O componente **Tabela** exibe dados em formato tabular, com linhas e colunas. Ele é usado para apresentar dados estruturados, como listas de itens ou registros de um banco de dados, de easy-to-read forma organizada. #### Propriedades da tabela O componente **Tabela** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). Além das propriedades comuns, o componente **Tabela** tem propriedades e opções de configuração específicas`Columns`, incluindo`Search and export`, `Expressions` e. ##### Columns Nesta seção, você pode definir as colunas a serem exibidas na tabela. Cada coluna pode ser configurada com as seguintes propriedades: + **Formato**: o tipo de dados do campo, por exemplo: texto, número, data. + **Rótulo da coluna**: o texto do cabeçalho da coluna. + **Valor**: O campo da fonte de dados que deve ser exibido nessa coluna. Esse campo permite especificar o valor ou a expressão que deve ser exibida nas células da coluna. Você pode usar expressões para referenciar dados da fonte conectada ou de outros componentes. Exemplo: `{{currentRow.title}}` - Essa expressão exibirá o valor do *title* campo da linha atual nas células da coluna. + **Ativar classificação**: essa opção permite ativar ou desativar a funcionalidade de classificação para a coluna específica. Quando ativado, os usuários podem classificar os dados da tabela com base nos valores dessa coluna. ##### Pesquisar e exportar O componente **Tabela** fornece as seguintes opções para ativar ou desativar a funcionalidade de pesquisa e exportação: + **Mostrar pesquisa** Quando ativada, essa opção adiciona um campo de entrada de pesquisa à tabela, permitindo que os usuários pesquisem e filtrem os dados exibidos. + **Mostrar exportação** Quando ativada, essa opção adiciona uma opção de exportação à tabela, permitindo que os usuários baixem os dados da tabela em vários formatos, por exemplo: CSV. **nota** Por padrão, a funcionalidade de pesquisa é limitada aos dados que foram carregados na tabela. Para usar a pesquisa exaustivamente, você precisará carregar todas as páginas de dados. ##### Linhas por página Você pode especificar o número de linhas a serem exibidas por página na tabela. Os usuários podem então navegar entre as páginas para ver o conjunto de dados completo. ##### Limite de pré-busca Especifique o número máximo de registros a serem pré-buscados em cada solicitação de consulta. O máximo é 3000. ##### Ações Na seção **Ações**, configure as seguintes propriedades: + **Local da ação**: quando a opção **Fixar à direita** está ativada, todas as ações adicionadas sempre serão exibidas à direita da tabela, independentemente da rolagem do usuário. + **Ações**: adicione botões de ação à tabela. Você pode configurar esses botões para realizar ações específicas quando clicados por um usuário, como: + Executar uma ação de componente + Navegue até uma página diferente + Invocar uma ação de dados + Execute de forma personalizada JavaScript + Invoque uma automação ##### Expressões O componente **Tabela** fornece várias áreas para usar expressões e recursos de ação em nível de linha que permitem personalizar e aprimorar a funcionalidade e a interatividade da tabela. Eles permitem que você referencie e exiba dados dinamicamente na tabela. Ao aproveitar esses campos de expressão, você pode criar colunas dinâmicas, passar dados para ações em nível de linha e referenciar dados de tabelas de outros componentes ou expressões em seu aplicativo. ##### Exemplos: referenciando valores de linha `{{currentRow.columnName}}`ou `{{currentRow["Column Name"]}}` Essas expressões permitem que você faça referência ao valor de uma coluna específica para a linha atual que está sendo renderizada. *Column Name*Substitua *columnName* ou pelo nome real da coluna que você deseja referenciar. Exemplos: + `{{currentRow.productName}}`Exibe o nome do produto para a linha atual. + `{{currentRow["Supplier Name"]}}`Exibe o nome do fornecedor da linha atual, onde está o cabeçalho da coluna*Supplier Name*. + `{{currentRow.orderDate}}`Exibe a data do pedido para a linha atual. ##### Exemplos: referenciando a linha selecionada `{{ui.table1.selectedRow["columnName"]}}`Essa expressão permite que você faça referência ao valor de uma coluna específica para a linha atualmente selecionada na tabela com o ID*table1*. *table1*Substitua pela ID real do componente da tabela e *columnName* pelo nome da coluna que você deseja referenciar. Exemplos: + `{{ui.ordersTable.selectedRow["totalAmount"]}}`Exibe o valor total da linha atualmente selecionada na tabela com o ID*ordersTable*. + `{{ui.customersTable.selectedRow["email"]}}`Exibe o endereço de e-mail da linha atualmente selecionada na tabela com o ID*customersTable*. + `{{ui.employeesTable.selectedRow["department"]}}`Exibe o departamento da linha atualmente selecionada na tabela com o ID*employeesTable*. ##### Exemplos: criação de colunas personalizadas Você pode adicionar colunas personalizadas a uma tabela com base nos dados retornados da ação, automação ou expressão de dados subjacente. Você pode usar valores e JavaScript expressões de coluna existentes para criar novas colunas. Exemplos: + `{{currentRow.quantity * currentRow.unitPrice}}`Cria uma nova coluna exibindo o preço total multiplicando as colunas de quantidade e preço unitário. + `{{new Date(currentRow.orderDate).toLocaleDateString()}}`Cria uma nova coluna exibindo a data do pedido em um formato mais legível. + `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`Cria uma nova coluna exibindo o nome completo e o endereço de e-mail de cada linha. ##### Exemplos: personalização dos valores de exibição da coluna: Você pode personalizar o valor de exibição de um campo em uma coluna da tabela definindo o `Value` campo do mapeamento da coluna. Isso permite que você aplique formatação ou transformações personalizadas aos dados exibidos. Exemplos: + `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`Exibe emojis de estrelas com base no valor da classificação de cada linha. + `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`Exibe o valor da categoria com cada palavra em maiúscula para cada linha. + `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: exibe um emoji de círculo colorido e um texto com base no valor do status de cada linha. ##### Ações do botão em nível de linha `{{currentRow.columnName}}`ou `{{currentRow["Column Name"]}}` Você pode usar essas expressões para transmitir o contexto da linha referenciada em uma ação em nível de linha, como navegar para outra página com os dados da linha selecionada ou acionar uma automação com os dados da linha. Exemplos: + Se você tiver um botão de edição na coluna de ação da linha, poderá passar `{{currentRow.orderId}}` como parâmetro para navegar até uma página de edição do pedido com o ID do pedido selecionado. + Se você tiver um botão de exclusão na coluna de ação da linha, poderá passar `{{currentRow.customerName}}` para uma automação que envia um e-mail de confirmação ao cliente antes de excluir o pedido. + Se você tiver um botão de visualização de detalhes na coluna de ação da linha, poderá passar `{{currentRow.employeeId}}` para uma automação que registra o funcionário que visualizou os detalhes do pedido. Ao aproveitar esses campos de expressão e recursos de ação em nível de linha, você pode criar tabelas altamente personalizadas e interativas que exibem e manipulam dados com base em seus requisitos específicos. Além disso, você pode conectar ações em nível de linha a outros componentes ou automações em seu aplicativo, permitindo fluxo de dados e funcionalidade contínuos. ### Detalhes O componente **Detalhe** foi projetado para exibir informações detalhadas sobre um registro ou item específico. Ele fornece um espaço dedicado para apresentar dados abrangentes relacionados a uma única entidade ou linha, tornando-o ideal para mostrar detalhes detalhados ou facilitar as tarefas de entrada e edição de dados. #### Propriedades detalhadas O componente **Detalhe** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). O componente **Detalhe** também tem propriedades e opções de configuração específicas `Fields``Layout`, incluindo, `Expressions` e. #### Layout A seção **Layout** permite que você personalize a organização e a apresentação dos campos no componente **Detalhe**. Você pode configurar opções como: + **Número de colunas**: especifique o número de colunas nas quais os campos serão exibidos. + **Ordenação dos campos**: arraste e solte os campos para reordenar sua aparência. + **Espaçamento e alinhamento**: ajuste o espaçamento e o alinhamento dos campos dentro do componente. #### Expressões e exemplos O componente **Detalhe** fornece vários campos de expressão que permitem referenciar e exibir dados dentro do componente dinamicamente. Essas expressões permitem que você crie componentes **detalhados** personalizados e interativos que se conectam perfeitamente aos dados e à lógica do seu aplicativo. ##### Exemplo: dados de referência `{{ui.details.data[0]?.["colName"]}}`: Essa expressão permite referenciar o valor da coluna chamada “colName” para o primeiro item (índice 0) na matriz de dados conectada ao componente **Detalhe** com a ID “detalhes”. Substitua “ColName” pelo nome real da coluna que você deseja referenciar. Por exemplo, a expressão a seguir exibirá o valor da coluna “customerName” para o primeiro item na matriz de dados conectada ao componente “details”: ``` {{ui.details.data[0]?.["customerName"]}} ``` **nota** Essa expressão é útil quando o componente **Detalhe** está na mesma página da tabela que está sendo referenciada e você deseja exibir dados da primeira linha da tabela no componente **Detalhe**. ##### Exemplo: renderização condicional `{{ui.table1.selectedRow["colName"]}}`: Essa expressão retornará verdadeira se a linha selecionada na tabela com o ID *table1* tiver dados para a coluna nomeada*colName*. Ele pode ser usado para mostrar ou ocultar condicionalmente o componente **Detalhe** com base no fato de a linha selecionada da tabela estar vazia ou não. Exemplo: Você pode usar essa expressão na `Visible if` propriedade do componente **Detalhe** para mostrá-la ou ocultá-la condicionalmente com base na linha selecionada na tabela. ``` {{ui.table1.selectedRow["customerName"]}} ``` Se essa expressão for avaliada como verdadeira (a linha selecionada no *table1* componente tem um valor para a *customerName* coluna), o componente **Detalhe** ficará visível. Se a expressão for avaliada como falsa (ou seja, a linha selecionada estiver vazia ou não tiver um valor para “CustomerName”), **o** componente Detalhe ficará oculto. ##### Exemplo: exibição condicional `{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: essa expressão exibe condicionalmente um emoji com base no valor de um componente ou campo de dados. Detalhamento: + `ui.Component.value`: faz referência ao valor de um componente com o ID*Component*. + `=== "green"`: verifica se o valor do componente é igual à string “green”. + `? "🟢"`: Se a condição for verdadeira, exibe o emoji de círculo verde. + `: ui.Component.value === "yellow" ? "🟡"`: se a primeira condição for falsa, verifica se o valor do componente é igual à string “yellow”. + `? "🟡"`: Se a segunda condição for verdadeira, exibirá o emoji quadrado amarelo. + `: ui.detail1.data?.[0]?.CustomerStatus`: se ambas as condições forem falsas, ela fará referência ao valor CustomerStatus "" do primeiro item na matriz de dados conectada ao componente Detalhe com a ID “detail1". Essa expressão pode ser usada para exibir um emoji ou um valor específico com base no valor de um componente ou campo de dados dentro do componente **Detalhe**. ### Metrics O componente **Métricas** é um elemento visual que exibe as principais métricas ou pontos de dados em um formato semelhante a um cartão. Ele foi projetado para fornecer uma forma concisa e visualmente atraente de apresentar informações importantes ou indicadores de desempenho. #### Propriedades das métricas O componente **Métricas** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). #### Tendência O recurso de tendência das métricas permite que você exiba um indicador visual do desempenho ou da mudança ao longo do tempo para a métrica que está sendo exibida. ##### Valor da tendência Esse campo permite especificar o valor ou a expressão que deve ser usada para determinar a direção e a magnitude da tendência. Normalmente, esse seria um valor que representa a mudança ou o desempenho em um período específico. Exemplo: ``` {{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}} ``` Essa expressão recupera o valor da month-over-month receita do primeiro item nos dados conectados às métricas “SalesMetrics”. ##### Tendência positiva Esse campo permite inserir uma expressão que define a condição para uma tendência positiva. A expressão deve ser avaliada como verdadeira ou falsa. Exemplo: ``` {{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}} ``` Essa expressão verifica se o valor da month-over-month receita é maior que 0, indicando uma tendência positiva. ##### Tendência negativa Esse campo permite inserir uma expressão que define a condição para uma tendência negativa. A expressão deve ser avaliada como verdadeira ou falsa. Exemplo: ``` {{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}} ``` Essa expressão verifica se o valor da month-over-month receita é menor que 0, indicando uma tendência negativa. ##### Barra de cores Essa opção permite ativar ou desativar a exibição de uma barra colorida para indicar visualmente o status da tendência. ##### Exemplos de barras de cores: ##### Exemplo: tendência das métricas de vendas + **Valor da tendência**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}` + **Tendência positiva**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}` + **Tendência negativa**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}` + **Barra de cores**: Ativada ##### Exemplo: tendência de métricas de inventário + **Valor da tendência**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}` + **Tendência positiva**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}` + **Tendência negativa**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}` + **Barra de cores: ativada** ##### Exemplo: tendência de satisfação do cliente + **Valor da tendência**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}` + **Tendência positiva**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}` + **Tendência negativa**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}` + **Barra de cores**: Ativada Ao configurar essas propriedades relacionadas à tendência, você pode criar componentes de **métricas** que fornecem uma representação visual do desempenho ou da mudança ao longo do tempo para a métrica que está sendo exibida. Ao aproveitar essas expressões, você pode criar componentes de métricas altamente personalizados e interativos que referenciam e exibem dados dinamicamente, permitindo que você mostre as principais métricas, indicadores de desempenho e visualizações orientadas por dados em seu aplicativo. #### Exemplos de expressão de métricas No painel de propriedades, você pode inserir expressões para exibir o título, o valor primário, o valor secundário e a legenda do valor para exibir dinamicamente um valor. ##### Exemplo: referenciando o valor primário `{{ui.metric1.primaryValue}}`: essa expressão permite que você faça referência ao valor principal do componente **Métricas** com a ID *metric1* de outros componentes ou expressões na mesma página. Exemplo: `{{ui.salesMetrics.primaryValue}}` exibirá o valor principal do componente *salesMetrics* **Métricas**. ##### Exemplo: referenciando um valor secundário `{{ui.metric1.secondaryValue}}`: essa expressão permite que você faça referência ao valor secundário do componente **Métricas** com a ID *metric1* de outros componentes ou expressões na mesma página. Exemplo: `{{ui.revenueMetrics.secondaryValue}}` exibirá o valor secundário do componente *revenueMetrics* **Métricas**. ##### Exemplo: dados de referência `{{ui.metric1.data}}`: essa expressão permite que você faça referência aos dados do componente **Métricas** com a ID *metric1* de outros componentes ou expressões na mesma página. Exemplo: `{{ui.kpiMetrics.data}}` fará referência aos dados conectados ao componente *kpiMetrics* **Métricas**. ##### Exemplo: Exibição de valores de dados específicos: `{{ui.metric1.data?.[0]?.id}}`: essa expressão é um exemplo de como exibir uma informação específica dos dados conectados ao componente **Métricas** com o ID*metric1*. É útil quando você deseja exibir uma propriedade específica do primeiro item nos dados. Detalhamento: + `ui.metric1`: faz referência ao componente **Métricas** com o ID*metric1*. + `data`: refere-se às informações ou ao conjunto de dados conectado a esse componente. + `?.[0]`: significa o primeiro item ou entrada nesse conjunto de dados. + `?.id`: exibe o *id* valor ou identificador desse primeiro item ou entrada. Exemplo: `{{ui.orderMetrics.data?.[0]?.orderId}}` exibirá o *orderId* valor do primeiro item nos dados conectados ao componente *orderMetrics* **Métricas**. ##### Exemplo: Exibição do comprimento dos dados `{{ui.metric1.data?.length}}`: essa expressão demonstra como exibir o comprimento (número de itens) nos dados conectados ao componente **Métricas** com o ID*metric1*. É útil quando você deseja exibir o número de itens nos dados. Detalhamento: + `ui.metric1.data`: faz referência ao conjunto de dados conectado ao componente. + `?.length`: acessa a contagem total ou o número de itens ou entradas nesse conjunto de dados. Exemplo: `{{ui.productMetrics.data?.length}}` exibirá o número de itens nos dados conectados ao componente *productMetrics* **Métricas**. ### Repetidor O componente **Repeater** é um componente dinâmico que permite gerar e exibir uma coleção de elementos com base em uma fonte de dados fornecida. Ele foi projetado para facilitar a criação de listas, grades ou padrões repetidos na interface de usuário do seu aplicativo. Alguns exemplos de casos de uso incluem: + Exibindo um cartão para cada usuário em uma conta + Mostrando uma lista de produtos que incluem imagens e um botão para adicioná-los ao carrinho + Mostrando uma lista de arquivos que o usuário pode acessar O componente **Repetidor** se diferencia do componente **Tabela** com conteúdo rico. Um componente **Tabela** tem um formato estrito de linha e coluna. O **repetidor** pode exibir seus dados com mais flexibilidade. #### Propriedades do repetidor O componente **Repetidor** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, e. `Actions` Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). Além das propriedades comuns, o componente **Repetidor** tem as seguintes propriedades adicionais e opções de configuração. #### Modelo de item O **modelo de item** é um contêiner onde você pode definir a estrutura e os componentes que serão repetidos para cada item na fonte de dados. Você pode arrastar e soltar outros componentes nesse contêiner, como **texto**, **imagem**, **botão** ou qualquer outro componente necessário para representar cada item. No **modelo de item**, você pode referenciar propriedades ou valores do item atual usando expressões no formato`{{currentItem.propertyName}}`. Por exemplo, se sua fonte de dados contiver uma `itemName` propriedade, você poderá usá-la `{{currentItem.itemName}}` para exibir os nomes dos itens do item atual. #### Layout A seção **Layout** permite que você configure a disposição dos elementos repetidos dentro do componente repetidor. ##### Orientation (Orientação) + **Lista**: organiza os elementos repetidos verticalmente em uma única coluna. + **Grade**: organiza os elementos repetidos em um layout de grade com várias colunas. ##### Linhas por página Especifique o número de linhas a serem exibidas por página no layout da lista. A paginação é fornecida para itens que ultrapassam o número especificado de linhas. ##### Colunas e linhas por página (grade) + **Colunas**: especifique o número de colunas no layout da grade. + **Linhas por página**: especifique o número de linhas a serem exibidas por página no layout da grade. A paginação é fornecida para itens que ultrapassam as dimensões especificadas da grade. #### Expressões e exemplos O componente **Repetidor** fornece vários campos de expressão que permitem referenciar e exibir dados dentro do componente dinamicamente. Essas expressões permitem que você crie componentes de **repetidor** personalizados e interativos que se conectam perfeitamente aos dados e à lógica do seu aplicativo. ##### Exemplo: referenciando itens + `{{currentItem.propertyName}}`: faça referência às propriedades ou valores do item atual no **Modelo do Item**. + `{{ui.repeaterID[index]}}`: faça referência a um item específico no componente repetidor por seu índice. ##### Exemplo: renderização de uma lista de produtos + **Fonte**: selecione a *Products* entidade como fonte de dados. + **Modelo de item**: adicione um componente de **contêiner** com um componente de **texto** interno para exibir o nome do produto (`{{currentItem.productName}}`) e um componente de **imagem** para exibir a imagem do produto (`{{currentItem.productImageUrl}}`). + **Layout**: `Orientation` defina o para `List` e ajuste o `Rows per Page` conforme desejado. ##### Exemplo: geração de uma grade de avatares de usuários + **Fonte**: use uma expressão para gerar uma matriz de dados do usuário (por exemplo,`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`). + **Modelo de item**: adicione um componente de **imagem** e defina sua `Source` propriedade como`{{currentItem.avatarUrl}}`. + **Layout**: `Orientation` defina como`Grid`, especifique o número de `Columns` e `Rows per Page` e ajuste o `Space Between` e `Padding` conforme necessário. Ao usar o `Repeater` componente, você pode criar interfaces de usuário dinâmicas e orientadas por dados, simplificando o processo de renderização de coleções de elementos e reduzindo a necessidade de repetição manual ou codificação permanente. ### Formulário O componente Formulário foi projetado para capturar a entrada do usuário e facilitar as tarefas de entrada de dados em seu aplicativo. Ele fornece um layout estruturado para exibir campos de entrada, menus suspensos, caixas de seleção e outros controles de formulário, permitindo que os usuários insiram ou modifiquem dados sem problemas. Você pode aninhar outros componentes dentro de um componente de formulário, como uma tabela. #### Propriedades do formulário O componente **Formulário** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). #### Gerar formulário O recurso **Gerar formulário** facilita a criação rápida de campos de formulário preenchendo-os automaticamente com base em uma fonte de dados selecionada. Isso pode economizar tempo e esforço ao criar formulários que precisam exibir um grande número de campos. **Para usar o recurso **Gerar formulário**:** 1. Nas propriedades do componente **Formulário**, localize a seção **Gerar formulário**. 1. Selecione a fonte de dados que você deseja usar para gerar os campos do formulário. Isso pode ser uma entidade, um fluxo de trabalho ou qualquer outra fonte de dados disponível em seu aplicativo. 1. Os campos do formulário serão gerados automaticamente com base na fonte de dados selecionada, incluindo rótulos de campo, tipos e mapeamentos de dados. 1. Revise os campos gerados e faça as personalizações necessárias, como adicionar regras de validação ou alterar a ordem dos campos. 1. Quando estiver satisfeito com a configuração do formulário, escolha **Enviar** para aplicar os campos gerados ao seu componente **Formulário**. O recurso **Gerar formulário** é particularmente útil quando você tem um modelo de dados bem definido ou um conjunto de entidades em seu aplicativo para o qual você precisa capturar a entrada do usuário. Ao gerar automaticamente os campos do formulário, você pode economizar tempo e garantir a consistência em todos os formulários de sua inscrição. Depois de usar o recurso **Gerar formulário**, você pode personalizar ainda mais o layout, as ações e as expressões do componente **Formulário** para atender às suas necessidades específicas. #### Expressões e exemplos Como outros componentes, você pode usar expressões para referenciar e exibir dados no componente **Formulário**. Por exemplo: + `{{ui.userForm.data.email}}`: faz referência ao valor do `email` campo da fonte de dados conectada ao componente **Formulário** com o ID`userForm`. **nota** Consulte [Propriedades comuns dos componentes](#common-properties) para obter mais exemplos de expressão das propriedades comuns. Ao configurar essas propriedades e aproveitar as expressões, você pode criar componentes de formulário personalizados e interativos que se integram perfeitamente às fontes de dados e à lógica do seu aplicativo. Esses componentes podem ser usados para capturar a entrada do usuário, exibir dados pré-preenchidos e acionar ações com base nos envios de formulários ou nas interações do usuário. ### Fluxo escalonado O componente **Stepflow** foi projetado para orientar os usuários por meio de processos ou fluxos de trabalho de várias etapas em seu aplicativo. Ele fornece uma interface estruturada e intuitiva para apresentar uma sequência de etapas, cada uma com seu próprio conjunto de entradas, validações e ações. O componente Stepflow compartilha várias propriedades comuns com outros componentes, como `Name``Source`, e. `Actions` Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). O componente **Stepflow** tem propriedades e opções de configuração adicionais, como `Step Navigation``Validation`, e. `Expressions` ## Componentes de IA ### Geração AI O componente **Gen AI** é um contêiner de agrupamento usado para agrupar componentes e a lógica que os acompanha para editá-los facilmente com IA usando o chat no estúdio de aplicativos. Quando você usa o chat para criar componentes, eles serão agrupados em um contêiner **Gen AI**. Para obter informações sobre como editar ou usar esse componente, consulte[Criando ou editando seu aplicativo](generative-ai.md#generative-ai-build-app). ## Componentes de texto e número ### Entrada de texto O componente **de entrada de texto** permite que os usuários insiram e enviem dados de texto em seu aplicativo. Ele fornece uma maneira simples e intuitiva de capturar a entrada do usuário, como nomes, endereços ou qualquer outra informação textual. + `{{ui.inputTextID.value}}`: retorna o valor fornecido no campo de entrada. + `{{ui.inputTextID.isValid}}`: retorna a validade do valor fornecido no campo de entrada. ### Texto O componente **Texto** é usado para exibir informações textuais em seu aplicativo. Ele pode ser usado para mostrar texto estático, valores dinâmicos ou conteúdo gerado a partir de expressões. ### Área de texto O componente **Área de texto** foi projetado para capturar a entrada de texto de várias linhas dos usuários. Ele fornece uma área de campo de entrada maior para que os usuários insiram entradas de texto mais longas, como descrições, notas ou comentários. + `{{ui.textAreaID.value}}`: retorna o valor fornecido na área de texto. + `{{ui.textAreaID.isValid}}`: retorna a validade do valor fornecido na área de texto. ### E-mail O componente **E-mail** é um campo de entrada especializado projetado para capturar endereços de e-mail dos usuários. Ele pode aplicar regras de validação específicas para garantir que o valor inserido esteja de acordo com o formato de e-mail correto. + `{{ui.emailID.value}}`: retorna o valor fornecido no campo de entrada do e-mail. + `{{ui.emailID.isValid}}`: retorna a validade do valor fornecido no campo de entrada do e-mail. ### Senha O componente **Senha** é um campo de entrada projetado especificamente para que os usuários insiram informações confidenciais, como senhas ou códigos PIN. Ele mascara os caracteres inseridos para manter a privacidade e a segurança. + `{{ui.passwordID.value}}`: retorna o valor fornecido no campo de entrada da senha. + `{{ui.passwordID.isValid}}`: retorna a validade do valor fornecido no campo de entrada da senha. ### Pesquisa O componente **Pesquisar** fornece aos usuários um campo de entrada dedicado para realizar consultas de pesquisa ou inserir termos de pesquisa nos dados preenchidos no aplicativo. + `{{ui.searchID.value}}`: retorna o valor fornecido no campo de pesquisa. ### Telefone O componente **Telefone** é um campo de entrada personalizado para capturar números de telefone ou outras informações de contato dos usuários. Ele pode incluir regras de validação específicas e opções de formatação para garantir que o valor inserido esteja de acordo com o formato correto do número de telefone. + `{{ui.phoneID.value}}`: retorna o valor fornecido no campo de entrada do telefone. + `{{ui.phoneID.isValid}}`: retorna a validade do valor fornecido no campo de entrada do telefone. ### Número O componente **Número** é um campo de entrada projetado especificamente para que os usuários insiram valores numéricos. Ele pode aplicar regras de validação para garantir que o valor inserido seja um número válido dentro de um intervalo ou formato especificado. + `{{ui.numberID.value}}`: retorna o valor fornecido no campo de entrada numérica. + `{{ui.numberID.isValid}}`: retorna a validade do valor fornecido no campo de entrada do número. ### Moeda O componente **Moeda** é um campo de entrada especializado para capturar valores ou quantias monetárias. Ele pode incluir opções de formatação para exibir símbolos monetários, separadores decimais e aplicar regras de validação específicas às entradas monetárias. + `{{ui.currencyID.value}}`: retorna o valor fornecido no campo de entrada da moeda. + `{{ui.currencyID.isValid}}`: retorna a validade do valor fornecido no campo de entrada da moeda. ### Par de detalhes O componente **Detail pair** é usado para exibir pares de valores-chave ou pares de informações relacionadas em um formato estruturado e legível. É comumente usado para apresentar detalhes ou metadados associados a um item ou entidade específica. ## Componentes de seleção ### Switch O componente **Switch** é um controle de interface de usuário que permite aos usuários alternar entre dois estados ou opções, como. on/off, true/false, or enabled/disabled Ele fornece uma representação visual do estado atual e permite que os usuários o alterem com um único clique ou toque. ### Trocar de grupo O componente do **grupo Switch** é uma coleção de controles de switch individuais que permitem aos usuários selecionar uma ou mais opções de um conjunto predefinido. Ele fornece uma representação visual das opções selecionadas e não selecionadas, facilitando a compreensão e a interação dos usuários com as opções disponíveis. #### Alternar campos de expressão de grupo + `{{ui.switchGroupID.value}}`: retorna uma matriz de cadeias de caracteres contendo o valor de cada opção ativada pelo usuário do aplicativo. ### Grupo de caixas de seleção O componente **Grupo de caixas de seleção** apresenta aos usuários um grupo de caixas de seleção, permitindo que eles selecionem várias opções simultaneamente. É útil quando você deseja fornecer aos usuários a capacidade de escolher um ou mais itens em uma lista de opções. #### Campos de expressão do grupo de caixas de seleção + `{{ui.checkboxGroupID.value}}`: retorna uma matriz de cadeias de caracteres contendo o valor de cada caixa de seleção selecionada pelo usuário do aplicativo. ### Grupo de rádio O componente **Grupo de rádio** é um conjunto de botões de rádio que permitem aos usuários selecionar uma única opção dentre várias opções mutuamente exclusivas. Ele garante que apenas uma opção possa ser selecionada por vez, fornecendo uma maneira clara e inequívoca para os usuários fazerem uma seleção. #### Campos de expressão de grupos de rádio Os campos a seguir podem ser usados em expressões. + `{{ui.radioGroupID.value}}`: retorna o valor do botão de rádio selecionado pelo usuário do aplicativo. ### Seleção única O componente **Seleção única** apresenta aos usuários uma lista de opções, a partir da qual eles podem selecionar um único item. É comumente usado em cenários em que os usuários precisam escolher entre um conjunto predefinido de opções, como selecionar uma categoria, um local ou uma preferência. #### Campos de expressão de seleção única + `{{ui.singleSelectID.value}}`: retorna o valor do item da lista selecionado pelo usuário do aplicativo. ### Seleção múltipla O componente de **seleção múltipla** é semelhante ao componente de **seleção única**, mas permite que os usuários selecionem várias opções simultaneamente em uma lista de opções. É útil quando os usuários precisam fazer várias seleções a partir de um conjunto predefinido de opções, como selecionar várias tags, interesses ou preferências. #### Campos de expressão de seleção múltipla + `{{ui.multiSelectID.value}}`: retorna uma matriz de cadeias de caracteres contendo o valor de cada item da lista selecionado pelo usuário do aplicativo. ## Botões e componentes de navegação O estúdio de aplicativos fornece uma variedade de componentes de botão e navegação para permitir que os usuários acionem ações e naveguem em seu aplicativo. ### Componentes do botão Os componentes de botão disponíveis são: + Button + Botão delineado + Botão de ícone + Botão de texto Esses componentes de botão compartilham as seguintes propriedades comuns: #### Conteúdo + **Rótulo do botão**: o texto a ser exibido no botão. #### Tipo + **Botão**: um botão padrão. + **Esboçado**: um botão com um estilo delineado. + **Ícone**: um botão com um ícone. + **Texto**: um botão somente de texto. #### Tamanho O tamanho do botão. Os valores possíveis são `Small`, `Medium` e `Large`. #### Ícone Você pode selecionar entre uma variedade de ícones a serem exibidos no botão, incluindo: + Envelope fechado + Bell + Pessoa + Menu de hambúrgu + Pesquisa + Informações circuladas + Engrenagem + Chevron Esquerda + Chevron à direita + Pontos horizontais + Lixeira + Edição + Verificar + Fechar + Início + Plus #### Acionadores Quando o botão é clicado, você pode configurar uma ou mais ações a serem acionadas. Os tipos de ação disponíveis são: + **Básico** + Executar ação do componente: executa uma ação específica dentro de um componente. + Navegar: navega até outra página ou exibição. + Ação de invocação de dados: aciona uma ação relacionada a dados, como criar, atualizar ou excluir um registro. + **Advanced (Avançado)** + JavaScript: executa JavaScript código personalizado. + Invoke Automation: inicia uma automação ou fluxo de trabalho existente. #### JavaScript propriedades do botão de ação Selecione o tipo de `JavaScript` ação para executar o JavaScript código personalizado ao clicar no botão. ##### Código-fonte No `Source code` campo, você pode inserir sua JavaScript expressão ou função. Por exemplo: ``` return "Hello World"; ``` Isso simplesmente retornará a string `Hello World` quando o botão for clicado. ##### Condição: Executar se Você também pode fornecer uma expressão booleana que determine se a JavaScript ação deve ser executada ou não. Neste caso, usa-se a seguinte sintaxe: ``` {{ui.textinput1.value !== ""}} ``` Neste exemplo, a JavaScript ação só será executada se o valor do `textinput1` componente não for uma string vazia. Ao usar essas opções avançadas de acionamento, você pode criar comportamentos de botão altamente personalizados que se integram diretamente à lógica e aos dados do seu aplicativo. Isso permite que você estenda a funcionalidade integrada dos botões e adapte a experiência do usuário às suas necessidades específicas. **nota** Sempre teste minuciosamente suas JavaScript ações para garantir que estejam funcionando conforme o esperado. ### Hiperlink O componente **Hyperlink** fornece um link clicável para navegar pelas rotas externas URLs ou internas do aplicativo. #### Propriedades do hiperlink ##### Conteúdo + **Rótulo do hiperlink**: o texto a ser exibido como rótulo do hiperlink. ##### URL O URL de destino do hiperlink, que pode ser um site externo ou uma rota de aplicativo interna. ##### Acionadores Quando o hiperlink é clicado, você pode configurar uma ou mais ações a serem acionadas. Os tipos de ação disponíveis são os mesmos dos componentes do botão. ## Componentes de data e hora ### Data O componente **Data** permite que os usuários selecionem e insiram datas. O componente **Data** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Validation` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). Além das propriedades comuns, o componente **Data** tem as seguintes propriedades específicas: #### Propriedades de data ##### Formato + **YYYY/MM/DD**,, **DD/MM/YYYY**, **YYYY/MM/DD**YYYY/DD/MM****, **MM/DD**, **DD/MM**: O formato no qual a data deve ser exibida. ##### Valor + **AAAA-MM-DD**: O formato no qual o valor da data é armazenado internamente. ##### Data mínima + **AAAA-MM-DD**: A data mínima que pode ser selecionada. **nota** Esse valor deve corresponder ao formato de`YYYY-MM-DD`. ##### Data máxima + **AAAA-MM-DD**: A data máxima que pode ser selecionada. **nota** Esse valor deve corresponder ao formato de`YYYY-MM-DD`. ##### Tipo de calendário + **1 mês**, **2 meses**: o tipo de interface do usuário do calendário a ser exibida. ##### Datas para deficientes + **Fonte**: A fonte de dados para as datas que devem ser desativadas. Por exemplo: Nenhum, Expressão. + **Datas desativadas**: uma expressão que determina quais datas devem ser desativadas, como: + `{{currentRow.column}}`: desativa as datas que correspondem à avaliação dessa expressão. + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: Desativa datas anteriores a 1º de janeiro de 2023 + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: Desativa fins de semana. ##### Comportamento + **Visível se**: Uma expressão que determina a visibilidade do componente **Data**. + **Desativar se**: Uma expressão que determina se o componente **Data** deve ser desativado. #### Validação A seção **Validação** permite que você defina regras e restrições adicionais para a entrada da data. Ao configurar essas regras de validação, você pode garantir que os valores de data inseridos pelos usuários atendam aos requisitos específicos do seu aplicativo. Você pode adicionar os seguintes tipos de validações: + **Obrigatório**: Essa opção garante que o usuário insira um valor de data antes de enviar o formulário. + **Personalizado**: você pode criar regras de validação personalizadas usando JavaScript expressões. Por exemplo: ``` {{new Date(ui.dateInput.value) < new Date("2023-01-01")}} ``` Essa expressão verifica se a data inserida é anterior a 1º de janeiro de 2023. Se a condição for verdadeira, a validação falhará. Você também pode fornecer uma mensagem de validação personalizada para ser exibida quando a validação não for atendida: ``` "Validation not met. The date must be on or after January 1, 2023." ``` Ao configurar essas regras de validação, você pode garantir que os valores de data inseridos pelos usuários atendam aos requisitos específicos do seu aplicativo. #### Expressões e exemplos O componente **Data** fornece o seguinte campo de expressão: + `{{ui.dateID.value}}`: retorna o valor da data inserido pelo usuário no formato`YYYY-MM-DD`. ### Hora O componente **Tempo** permite que os usuários selecionem e insiram valores de tempo. Ao configurar as várias propriedades do componente **Time**, você pode criar campos de entrada de tempo que atendam aos requisitos específicos do seu aplicativo, como restringir o intervalo de tempo selecionável, desativar determinados horários e controlar a visibilidade e a interatividade do componente. #### Propriedades do tempo O componente **Time** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Validation` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). Além das propriedades comuns, o componente **Time** tem as seguintes propriedades específicas: ##### Intervalos de tempo + **5 minutos**, **10 minutos**, **15 minutos**, **20 minutos**, **25 minutos**, **30 minutos**, **60 minutos**: os intervalos disponíveis para selecionar a hora. ##### Valor + **HH:MM AA**: O formato no qual o valor da hora é armazenado internamente. **nota** Esse valor deve corresponder ao formato de`HH:MM AA`. ##### Placeholder + **Configurações do calendário**: o texto do espaço reservado exibido quando o campo de hora está vazio. ##### Tempo mínimo + **HH:MM AA**: O tempo mínimo que pode ser selecionado. **nota** Esse valor deve corresponder ao formato de`HH:MM AA`. ##### Tempo máximo + **HH:MM AA**: O tempo máximo que pode ser selecionado. **nota** Esse valor deve corresponder ao formato de`HH:MM AA`. ##### Horários para deficientes + **Fonte**: A fonte de dados para os horários que devem ser desativados (por exemplo, Nenhum, Expressão). + **Horários desativados**: uma expressão que determina quais horários devem ser desativados, como`{{currentRow.column}}`. ##### Configuração de horários desativada Você pode usar a seção **Horários desativados** para especificar quais valores de tempo não devem estar disponíveis para seleção. ##### Fonte + **Nenhum**: Nenhum horário está desativado. + **Expressão**: você pode usar uma JavaScript expressão para determinar quais horários devem ser desativados, como`{{currentRow.column}}`. ##### Exemplo de expressão: ``` {{currentRow.column === "Lunch Break"}} ``` Essa expressão desativaria qualquer momento em que a coluna “Pausa para o almoço” fosse verdadeira para a linha atual. Ao configurar essas regras de validação e expressões de tempo desativadas, você pode garantir que os valores de tempo inseridos pelos usuários atendam aos requisitos específicos do seu aplicativo. ##### Comportamento + **Visível se**: uma expressão que determina a visibilidade do componente Time. + **Desabilitar if**: uma expressão que determina se o componente Time deve ser desativado. ##### Validação + **Obrigatório**: uma opção que garante que o usuário insira um valor de tempo antes de enviar o formulário. + **Personalizado**: permite criar regras de validação personalizadas usando JavaScript expressões. **Mensagem de validação personalizada**: a mensagem a ser exibida quando a validação personalizada não for atendida. Por exemplo: ``` {{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}} ``` Essa expressão verifica se a hora inserida é 9:00 AM ou 9:30 AM. Se a condição for verdadeira, a validação falhará. Você também pode fornecer uma mensagem de validação personalizada para ser exibida quando a validação não for atendida: ``` Validation not met. The time must be 9:00 AM or 9:30 AM. ``` #### Expressões e exemplos O componente Time fornece o seguinte campo de expressão: + `{{ui.timeID.value}}`: retorna o valor da hora inserido pelo usuário no formato HH:MM AA. ##### Exemplo: valor do tempo + `{{ui.timeID.value}}`: retorna o valor do tempo inserido pelo usuário no formato`HH:MM AA`. ##### Exemplo: comparação de tempo + `{{ui.timeInput.value > "10:00 AM"}}`: Verifica se o valor do horário é maior que 10:00 da manhã. + `{{ui.timeInput.value < "05:00 pM"}}`: Verifica se o valor do horário é menor que 17:00. ### Intervalo de datas O componente **Intervalo de datas** permite que os usuários selecionem e insiram um intervalo de datas. Ao configurar as várias propriedades do componente Intervalo de datas, você pode criar campos de entrada de intervalo de datas que atendam aos requisitos específicos do seu aplicativo, como restringir o intervalo de datas selecionável, desativar determinadas datas e controlar a visibilidade e a interatividade do componente. #### Propriedades do intervalo de datas O componente **Intervalo de datas** compartilha várias propriedades comuns com outros componentes `Name``Source`, como, `Validation` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties). Além das propriedades comuns, o componente **Intervalo de datas** tem as seguintes propriedades específicas: ##### Formato + **MM/DD/YYYY**: o formato no qual o intervalo de datas deve ser exibido. ##### Data de início + **AAAA-MM-DD**: A data mínima que pode ser selecionada como o início do intervalo. **nota** Esse valor deve corresponder ao formato de`YYYY-MM-DD`. ##### Data de término + **AAAA-MM-DD**: A data máxima que pode ser selecionada como o final do intervalo. **nota** Esse valor deve corresponder ao formato de`YYYY-MM-DD`. ##### Placeholder + **Configurações do calendário**: o texto do espaço reservado exibido quando o campo do intervalo de datas está vazio. ##### Data mínima + **AAAA-MM-DD**: A data mínima que pode ser selecionada. **nota** Esse valor deve corresponder ao formato de`YYYY-MM-DD`. ##### Data máxima + **AAAA-MM-DD**: A data máxima que pode ser selecionada. **nota** Esse valor deve corresponder ao formato de`YYYY-MM-DD`. ##### Tipo de calendário + **1 mês**: o tipo de interface de usuário do calendário a ser exibida. Por exemplo, um único mês. + **2 meses**: o tipo de interface de usuário do calendário a ser exibida. Por exemplo, dois meses. ##### Dias obrigatórios selecionados + **0**: O número de dias obrigatórios que devem ser selecionados dentro do intervalo de datas. ##### Datas para deficientes + **Fonte**: A fonte de dados para as datas que devem ser desativadas (por exemplo, Nenhuma, Expressão, Entidade ou Automação). + **Datas desativadas**: uma expressão que determina quais datas devem ser desativadas, como`{{currentRow.column}}`. ##### Validação A seção **Validação** permite que você defina regras e restrições adicionais para a entrada do intervalo de datas. #### Expressões e exemplos O componente **Intervalo de datas** fornece os seguintes campos de expressão: + `{{ui.dateRangeID.startDate}}`: retorna a data de início do intervalo selecionado no formato`YYYY-MM-DD`. + `{{ui.dateRangeID.endDate}}`: retorna a data final do intervalo selecionado no formato`YYYY-MM-DD`. ##### Exemplo: cálculo da diferença de datas + `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`Calcula o número de dias entre as datas de início e término. ##### Exemplo: visibilidade condicional com base no intervalo de datas + `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`Verifica se o intervalo de datas selecionado está fora do ano de 2023. ##### Exemplo: datas desativadas com base nos dados da linha atual + `{{currentRow.isHoliday}}`Desativa as datas em que a coluna “IsHoliday” na linha atual é verdadeira. + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`Desativa as datas anteriores a 1º de janeiro de 2023 com base na “DateColumn” na linha atual. + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`Desativa os fins de semana com base na “DateColumn” na linha atual. ##### Validação personalizada + `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`Verifica se a data de início é posterior à data de término, o que falharia na validação personalizada. ## Componentes de mídia O estúdio de aplicativos fornece vários componentes para incorporar e exibir vários tipos de mídia em seu aplicativo. ### Incorporação do iFrame O componente de **incorporação do iFrame** permite que você incorpore conteúdo externo da Web ou aplicativos em seu aplicativo usando um iFrame. #### Propriedades de incorporação do iFrame ##### URL **nota** A fonte da mídia exibida nesse componente deve ser permitida nas configurações de segurança de conteúdo do seu aplicativo. Para obter mais informações, consulte [Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo](app-content-security-settings-csp.md). O URL do conteúdo externo ou do aplicativo que você deseja incorporar. ##### Layout + **Largura**: a largura do iFrame, especificada como uma porcentagem (%) ou um valor fixo de pixels (por exemplo, 300 px). + **Altura**: a altura do iFrame, especificada como uma porcentagem (%) ou um valor fixo de pixels. ### Upload do S3 O componente de **upload do S3** permite que os usuários façam upload de arquivos para um bucket do Amazon S3. Ao configurar o componente **S3 Upload**, você pode permitir que os usuários carreguem facilmente arquivos para o armazenamento Amazon S3 do seu aplicativo e, em seguida, aproveitem as informações do arquivo carregado na lógica e na interface do usuário do seu aplicativo. **nota** Lembre-se de garantir que as permissões necessárias e as configurações de bucket do Amazon S3 estejam em vigor para suportar os requisitos de upload e armazenamento de arquivos do seu aplicativo. #### Propriedades de upload do S3 ##### Configuração S3 + **Conector**: selecione o conector Amazon S3 pré-configurado para usar nos uploads de arquivos. + **Bucket**: O bucket do Amazon S3 em que os arquivos serão carregados. + **Pasta**: a pasta dentro do bucket do Amazon S3 em que os arquivos serão armazenados. + **Nome do arquivo**: a convenção de nomenclatura para os arquivos enviados. ##### Configuração de upload de arquivo + **Rótulo**: O rótulo ou as instruções exibidas acima da área de carregamento do arquivo. + **Descrição**: instruções ou informações adicionais sobre o upload do arquivo. + **Tipo de arquivo**: o tipo de arquivo que pode ser carregado. Por exemplo: imagem, documento ou vídeo. + **Tamanho**: o tamanho máximo dos arquivos individuais que podem ser enviados. + **Rótulo do botão**: o texto exibido no botão de seleção do arquivo. + **Estilo do botão**: o estilo do botão de seleção de arquivos. Por exemplo, delineado ou preenchido. + **Tamanho do botão**: o tamanho do botão de seleção do arquivo. ##### Validação + **Número máximo de arquivos**: o número máximo de arquivos que podem ser enviados de uma vez. + **Tamanho máximo do arquivo**: o tamanho máximo permitido para cada arquivo individual. ##### Acionadores + **Em caso de sucesso**: ações a serem acionadas quando o upload de um arquivo for bem-sucedido. + **Em caso de falha**: ações a serem acionadas quando o upload de um arquivo falhar. #### Campos de expressão de upload do S3 O componente de **upload do S3** fornece os seguintes campos de expressão: + `{{ui.s3uploadID.files}}`: retorna uma matriz dos arquivos que foram enviados. + `{{ui.s3uploadID.files[0]?.size}}`: retorna o tamanho do arquivo no índice designado. + `{{ui.s3uploadID.files[0]?.type}}`: retorna o tipo do arquivo no índice designado. + `{{ui.s3uploadID.files[0]?.nameOnly}}`: retorna o nome do arquivo, sem sufixo de extensão, no índice designado. + `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: retorna o nome do arquivo com seu sufixo de extensão no índice designado. #### Expressões e exemplos ##### Exemplo: acessar arquivos enviados + `{{ui.s3uploadID.files.length}}`: retorna o número de arquivos que foram enviados. + `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: retorna uma lista separada por vírgulas dos nomes dos arquivos que foram enviados. + `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: retorna uma matriz somente dos arquivos de imagem que foram enviados. ##### Exemplo: validação de uploads de arquivos + `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: verifica se algum dos arquivos enviados tem mais de 5 MB de tamanho. + `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: verifica se todos os arquivos enviados são imagens PNG. + `{{ui.s3uploadID.files.length > 3}}`: verifica se mais de 3 arquivos foram enviados. ##### Exemplo: acionando ações + `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: exibe uma mensagem de sucesso se pelo menos um arquivo tiver sido carregado. + `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: aciona uma automação de processamento de vídeo se algum arquivo de vídeo tiver sido carregado. + `{{ui.s3uploadID.files.map(f => f.url)}}`: recupera URLs os arquivos enviados, que podem ser usados para exibir ou processar posteriormente os arquivos. Essas expressões permitem acessar os arquivos enviados, validar os uploads dos arquivos e acionar ações com base nos resultados do upload do arquivo. Ao utilizar essas expressões, você pode criar um comportamento mais dinâmico e inteligente na funcionalidade de upload de arquivos do seu aplicativo. **nota** *s3uploadID*Substitua pelo ID do seu componente de **upload do S3**. ### Componente de visualização de PDF O componente **visualizador de PDF** permite que os usuários visualizem e interajam com documentos PDF em seu aplicativo. O App Studio oferece suporte a esses diferentes tipos de entrada para a fonte PDF. O componente **visualizador de PDF** oferece flexibilidade na forma como você pode integrar documentos PDF ao seu aplicativo, seja a partir de um URL estático, de um URI de dados embutido ou de conteúdo gerado dinamicamente. #### Propriedades do visualizador de PDF ##### Fonte **nota** A fonte da mídia exibida nesse componente deve ser permitida nas configurações de segurança de conteúdo do seu aplicativo. Para obter mais informações, consulte [Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo](app-content-security-settings-csp.md). A fonte do documento PDF, que pode ser uma expressão, entidade, URL ou automação. ##### Expressão Use uma expressão para gerar dinamicamente a fonte em PDF. ##### Entidade Conecte o componente do **visualizador de PDF** a uma entidade de dados que contém o documento PDF. ##### URL Especifique o URL do documento PDF. ##### URL Você pode inserir uma URL que aponte para o documento PDF que você deseja exibir. Isso pode ser um URL público da web ou um URL dentro do seu próprio aplicativo. Exemplo: `https://example.com/document.pdf` ##### URI de dados Um **URI de dados** é uma forma compacta de incluir pequenos arquivos de dados (como imagens ou PDFs) embutidos em seu aplicativo. O documento PDF é codificado como uma string base64 e incluído diretamente na configuração do componente. ##### Bolha ou ArrayBuffer Você também pode fornecer o documento PDF como um Blob ou ArrayBuffer objeto, o que permite gerar ou recuperar dinamicamente os dados PDF de várias fontes em seu aplicativo. ##### Automação Conecte o componente do **visualizador de PDF** a uma automação que fornece o documento PDF. ##### Ações + **Download**: adiciona um botão ou link que permite aos usuários baixar o documento PDF. ##### Layout + **Largura**: a largura do Visualizador de PDF, especificada como uma porcentagem (%) ou um valor fixo de pixels (por exemplo, 600 px). + **Altura**: a altura do Visualizador de PDF, especificada como um valor fixo em pixels. ### Visualizador de imagens O componente **Visualizador de imagens** permite que os usuários visualizem e interajam com arquivos de imagem em seu aplicativo. #### Propriedades do visualizador de imagens ##### Fonte **nota** A fonte da mídia exibida nesse componente deve ser permitida nas configurações de segurança de conteúdo do seu aplicativo. Para obter mais informações, consulte [Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo](app-content-security-settings-csp.md). + **Entidade**: Conecte o componente **Visualizador de imagens** a uma entidade de dados que contém o arquivo de imagem. + **URL**: especifique a URL do arquivo de imagem. + **Expressão**: use uma expressão para gerar dinamicamente a fonte da imagem. + **Automação**: Conecte o componente **Visualizador de imagens** a uma automação que fornece o arquivo de imagem. ##### Texto alternativo A descrição em texto alternativo da imagem, usada para fins de acessibilidade. ##### Layout + **Ajuste da imagem**: determina como a imagem deve ser redimensionada e exibida dentro do componente. Por exemplo: `Contain`, `Cover` ou `Fill`. + **Largura**: a largura do componente **Visualizador de imagens**, especificada como uma porcentagem (%) ou um valor fixo de pixels (por exemplo, 300 px). + **Altura**: a altura do componente **Visualizador de imagens**, especificada como um valor fixo em pixels. + **Plano de fundo**: permite que você defina uma cor ou imagem de fundo para o componente **Visualizador de imagens**.