--- sourceDocument: Criar ou modificar aplicações do Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development Release : - xanadu ft:locale : - pt-BR ft:publication_title : - Criar ou modificar aplicações do Xanadu ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- # Construtor de espaços componentes para páginas iniciais # Construtor de espaços componentes para páginas iniciais {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 min. de leitura Vários componentes Construtor de IU estão disponíveis como elementos para criar páginas iniciais e painéis laterais contextuais em Construtor de espaços. Construtor de espaços ajuda a criar rapidamente espaços em App Engine Studio (AES). Para obter detalhes completos sobre todos os elementos e componentes, consulte [ServiceNow® Site do desenvolvedor](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?availability[]=Draft&availability[]=In+Progress&availability[]=Available&categories[]=Dev-Design+System&releases[]=utah&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades). ## Componentes de visualização de dados {#workspace-builder-components-ref__section_ohb_2sh_fvb} O componente de visualização de dados é um contêiner para tipos de gráfico disponíveis para uso em Construtor de espaços páginas iniciais. Selecione o tipo de gráfico para exibir dados de maneiras diferentes, dependendo da sua aplicação. Para obter mais informações sobre componentes de visualização de dados, consulte os seguintes tópicos e fontes: * [Data visualizations in Platform Analytics](https://www.servicenow.com/docs/access?context=analytics-center-data-visualizations&version=xanadu&pubname=xanadu-now-intelligence&ft:locale=en-US) * [Create a single score data visualization in the Visualization Designer or on a dashboard](https://www.servicenow.com/docs/access?context=create-dv-sing-sc-ac&version=xanadu&pubname=xanadu-now-intelligence&ft:locale=en-US) * [Listagem de componentes de visualização de dados do site do desenvolvedor](https://developer.servicenow.com/dev.do#!/reference/now-experience/utah/now-components/sn-par-visualization-base/overview) {#workspace-builder-components-ref__ul_pqd_kpd_55b-1} ## Filtrar componentes {#workspace-builder-components-ref__section_dpm_tbj_fvb} Os filtros permitem filtrar visualizações de dados sem modificar as visualizações. Adicione um elemento de filtro ao trabalhar com a página inicial na tela. Em seguida, selecione uma tabela, um campo e outras propriedades para configurar o filtro. Quando um usuário seleciona um ou mais valores do campo, o filtro se aplica às visualizações de dados baseadas na mesma fonte de dados. Para obter mais informações sobre como usar componentes de filtros para criar um espaço, consulte os seguintes tópicos e fontes: * [Filtros da Próxima experiência](https://www.servicenow.com/docs/access?context=interactive-filters-workspace&version=xanadu&pubname=xanadu-now-intelligence&ft:locale=en-US) * [Listagem de componentes de filtro do site do desenvolvedor](https://developer.servicenow.com/dev.do#!/reference/now-experience/utah/now-components/sn-component-filter/overview) {#workspace-builder-components-ref__ul_yv5_zjn_2vb-1} ## Componentes de título {#workspace-builder-components-ref__section_jr2_nxf_2vb} Os componentes de título estão disponíveis nas páginas iniciais dos espaços. Adicione um título à sua página principal usando um componente de título. A imagem a seguir mostra o título, Meu título, como o título de uma página principal. A tabela a seguir explica os parâmetros do componente de título.{#workspace-builder-components-ref__table_nsp_qvs_vjb__entry__2} | Parâmetro | Descrição | |-|-| | Nome de componente | Nome que aparece nos controles do componente acima de um componente no painel Fase. O número máximo de caracteres é 18. ![Nome do componente.]() | | Rótulo | Texto do título. | | Estilo | Tamanho do texto do título. | | Desabilitar a quebra automática de texto | Alterne para quebrar ou não o texto do título. Se você definir o texto do título para não ser quebrado e o título for mais largo do que a página principal, Construtor de IU truncará o final do título e adicionará reticências. Se o usuário ampliar a página principal, mais do texto do título será exibido. ![Título de página longo truncado]() | | Ocultar margem inferior | Alternar para mostrar ou ocultar uma linha em branco abaixo do texto do título. | [Tabela 1. Parâmetros do componente de título] {#workspace-builder-components-ref__table_nsp_qvs_vjb} Para obter mais informações sobre componentes de título, consulte os seguintes tópicos e fontes: * [Visão geral do cabeçalho no site do desenvolvedor](https://developer.servicenow.com/dev.do#!/reference/now-experience/utah/now-components/now-heading/overview) * {#workspace-builder-components-ref__ul_nsd_wzx_wwb} ## Componentes de imagem {#workspace-builder-components-ref__section_zhc_gcg_2vb} Adicione imagens à sua página principal com um componente de imagem. Quando você arrasta o ícone do componente de imagem ( ![Componente]()de imagem ) para o painel de visualização, é exibida uma imagem de estoque que você pode alterar e redimensionar. Você pode mudar a imagem do estoque fornecendo o URL da sua imagem.{#workspace-builder-components-ref__lw-image-component-2-wb} A tabela a seguir explica os parâmetros do componente de imagem.{#workspace-builder-components-ref__table_ghy_bps_vjb__entry__2} | Parâmetro | Descrição | |-|-| | Nome de componente | Nome que aparece nos controles do componente acima de um componente no painel Fase. O número máximo de caracteres é 18. ![Nome do componente.]() | | Texto alternativo | Elemento HTML Alt que rotula as imagens para que estejam em conformidade com as WCAG. | | URL da imagem | URL da imagem. | | Ajuste | Controle de tamanho de imagem. * Expandir para preencher amplia ou reduz a imagem nos eixos X e Y proporcionalmente para que a imagem preencha o contêiner. * Esticar para caber amplia a imagem para que ela preencha o contêiner, mas a imagem não se expande proporcionalmente. * Manter tamanho original exibe a imagem em seu tamanho original, que pode ser maior ou menor que o contêiner. {#workspace-builder-components-ref__ul_ngd_lhp_gkb} | | Posição | Local da imagem no contêiner. Por exemplo, Inferior-direita coloca a imagem na parte inferior direita do contêiner. Este parâmetro só funciona quando a imagem é menor que o contêiner. | | Altura | Altura da imagem medida pelo número de pixels de altura. Se essa altura for mais curta do que a altura da imagem, o parâmetro cortará a parte superior da imagem. A largura não é reduzida proporcionalmente. | [Tabela 2. Parâmetros do componente de imagem] {#workspace-builder-components-ref__table_ghy_bps_vjb} Para obter mais informações sobre componentes de imagem, consulte . ## Listar componentes {#workspace-builder-components-ref__section_y5g_1hn_2vb} Use um componente de lista para adicionar listas à sua página principal. Quando você arrasta o ícone do componente de lista ( ![Componente]()de lista ) para o painel de visualização, uma lista de amostras é exibida.{#workspace-builder-components-ref__lw-list-component-2-wb} A tabela a seguir explica os parâmetros do componente de lista. Use a imagem anterior para o local dos valores de parâmetro no componente de lista.{#workspace-builder-components-ref__table_lj5_bzr_vjb__entry__2} | Parâmetro | Descrição | |-|-| | Nome de componente | Nome que aparece nos controles do componente acima de um componente no painel Fase. O número máximo de caracteres é 18. ![Nome do componente.]() | | Título da lista | Título da sua lista. | | Tabela | Tabela de banco de dados de onde vêm os registros que aparecem na lista. | | Consulta | Botão que você usa para abrir o Construtor de condições, que permite filtrar os registros incluídos na lista. Por exemplo, você pode exibir somente registros de lista da Tabela que atendam às condições: Ativo é verdadeiro e Prioridade é 1 -- Crítica. O selo e o ícone de contagem ( ![selo de consulta]()) mostram o número de filtros aplicados. Se não houver selo, não há filtros. | | Colunas | Número de colunas que você especifica para aparecer na lista em vez das colunas padrão. Use o parâmetro várias vezes para exibir várias colunas. | | Máx. de Linhas | Número máximo de linhas que você especifica para aparecer na lista. O padrão é 5. O máximo é 100. | | Máximo de colunas | Número máximo de colunas que você especifica para aparecer na lista. O padrão é 5. Se o número de colunas for maior que o valor deste parâmetro, somente as primeiras colunas serão exibidas. | | Ocultar cabeçalho | Alternar para mostrar ou ocultar o cabeçalho da lista. | | Ocultar Título | Alternar para mostrar ou ocultar o título da lista. | | Ocultar selo com contagem de registros | Alternar para mostrar ou ocultar o selo da lista e a contagem de registros. O número é o número total de registros na lista. Somente alguns registros podem ser vistos na exibição atual. | | Ocultar botão Atualizar | Alternar para mostrar ou ocultar o botão Atualizar. | | Ocultar texto de "Última atualização" | Alternar para mostrar ou ocultar o texto "Última atualização". | | Ocultar links | Alterne para vincular os valores na coluna Número ou não. Se não forem links, o texto do número será preto. Na imagem a seguir, os números em preto não são links. Os números em verde são links. | | Ocultar rodapé "Exibir tudo" | Alternar para mostrar ou ocultar o link "Exibir tudo" no rodapé. | | Ocultar os valores realçados | Alternar para mostrar ou ocultar os destaques que foram configurados para aparecer nos campos de lista especificados. Para obter mais informações, consulte Realçar campos de lista no espaço. | | Ocultar imagem de estado vazio | Alternar para mostrar ou ocultar a imagem que aparece quando as condições do filtro impedem que qualquer registro apareça na lista. A intenção é mostrar uma resposta para que os agentes saibam que a lista está vazia. Você não pode mudar a imagem. ![Não há registros a serem exibidos]() | [Tabela 3. Listar parâmetros do componente] {#workspace-builder-components-ref__table_lj5_bzr_vjb} Para obter mais informações sobre componentes de lista, consulte . ## Componentes de rich text {#workspace-builder-components-ref__section_cqf_mhn_2vb} Adicione texto à página principal com um componente de rich text para explicar partes da página principal, por exemplo, "Resolva esses incidentes de prioridade 1 primeiro". A tabela a seguir explica os parâmetros do componente de rich text.{#workspace-builder-components-ref__table_n5t_45s_vjb__entry__2} | Parâmetro | Descrição | |-|-| | Nome de componente | Nome que aparece nos controles do componente acima de um componente no painel Fase. O número máximo de caracteres é 18. ![Nome do componente.]() | | HTML | Editor de HTML que você usa para inserir texto. | [Tabela 4. Parâmetros de rich text] {#workspace-builder-components-ref__table_n5t_45s_vjb} Para obter mais informações sobre componentes de rich text, consulte .