---
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


---

# Como ajustar a visibilidade do componente na criação dinâmica

# Como ajustar a visibilidade do componente na criação dinâmica {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura

Ao criar páginas com autoria dinâmica para diferentes fatores forma, aprenda a mostrar ou ocultar componentes concluindo as etapas para ocultar uma imagem no tamanho móvel.

## Antes de Iniciar

Função necessária: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Um método para aumentar a usabilidade da página é ocultar componentes ou mostrar um componente diferente em pontos de interrupção. Existem inúmeras maneiras de usar a visibilidade do componente, mas alguns exemplos incluem:

* Use vários componentes de botão horizontalmente na parte superior de uma página para o tamanho de desktop e tablet, mas no tamanho de dispositivo móvel, oculte os botões e mostre o componente suspenso.
* Use um tamanho de botão menor para o tamanho móvel, mas verifique se os botões são grandes o suficiente para os usuários pressionarem com o polegar. Considere mudar o posicionamento dos botões para dispositivos móveis também.
* Use imagens em páginas de desktop e tablet, mas oculte imagens, especialmente as maiores, em dispositivos móveis.
{#responsive-authoring-component-visibility__ul_ild_2lw_sbc}

Neste procedimento, mostre os botões na parte superior para os fatores forma de desktop e tablet, mas oculte os botões e use o componente suspenso para dispositivos móveis.

## Procedimento

1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar \> Experiência.  
   Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências.
3. Crie uma página do zero com a criação dinâmica.  
   Para obter mais informações sobre como criar uma página, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários.").
4. Na parte superior, verifique se o ícone do fator forma da área de trabalho está selecionado.  
   ![Seta preta apontando para o ícone do fator forma da área de trabalho na parte superior de uma página do Construtor de IU na exibição do editor.]()
5. Adicione um layout de coluna selecionando + Adicionar conteúdo em Corpo na árvore de conteúdo.
6. Na guia Layouts, selecione Coluna única.
7. Adicione o primeiro componente de botão.
   1. Selecione o ícone + no centro da nova coluna na fase.
   2. Na guia Componentes, localize e selecione o componente Botão.
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente.
   4. No painel de configuração, na guia Configurar, substitua o texto padrão no campo Rótulo inserindo <kbd class="ph userinput">Tarefas</kbd>.  
   5. Selecione Salvar.
   {#responsive-authoring-component-visibility__substeps_z3n_1cn_5bc}
8. Adicione mais dois botões repetindo a etapa 7 duas vezes e no 7d nomeie os botões como <kbd class="ph userinput">Incidentes</kbd> e <kbd class="ph userinput">Mudanças</kbd>.  
   Nota:  
   Para adicionar os botões, aponte para o Botão 1 na árvore de conteúdo, selecione o ícone de menu e selecione Adicionar após.

9. Verifique se a árvore de conteúdo e a página estão precisas.  
10. Adicione algum espaço ao redor de cada botão.
    1. Na árvore de conteúdo, selecione Botão 1.
    2. No painel de configuração, selecione a guia Estilos.
    3. Em Espaçamento, selecione Margem.
    4. No menu, selecione XS (extra pequeno).  
    5. Selecione Salvar.
    {#responsive-authoring-component-visibility__substeps_ivk_plp_vbc}
11. Adicione espaço ao redor dos outros dois botões repetindo a etapa 10 para cada um.
12. Mude os botões da direção vertical para a horizontal.
    1. Selecione a Coluna 1 na árvore de conteúdo.
    2. No painel de configuração, em Direção, selecione o ícone de linha.  
    3. Selecione Salvar.

    {#responsive-authoring-component-visibility__substeps_ydm_qpc_1cc}  
    A página tem uma boa aparência na largura da área de trabalho.

13. Selecione o ícone do fator forma do tablet.  
    ![Seta preta apontando para o ícone do fator forma do tablet na parte superior de uma página do Construtor de IU na exibição do editor.]()

    O espaçamento e a posição dos botões também ficam bem na largura do tablet.

14. Selecione o ícone de criação dinâmica de dispositivos móveis.  
    ![Seta preta apontando para o ícone do fator forma móvel na parte superior de uma página do Construtor de IU na exibição do editor.]()

    Os botões usam quase todo o espaço horizontal no tamanho menor.

15. Adicione o componente suspenso.
    1. Selecione o fator forma da área de trabalho na parte superior da fase.
    2. Aponte para o Botão 3 na árvore de conteúdo, selecione o ícone de menu e selecione Adicionar após.
    3. Na guia Componentes, localize e selecione o componente Menu suspenso.
    4. No painel de configuração, selecione Nenhum - Configure o componente manualmente.
    5. No painel de configuração, na guia Configurar, remova o texto padrão em Texto de espaço reservado e selecione menu-outline em Ícone.  
    6. Selecione Salvar.
    {#responsive-authoring-component-visibility__substeps_hry_ksc_1cc}
16. Oculte o componente suspenso nos fatores forma de desktop e tablet.
    1. Na árvore de conteúdo, selecione Menu suspenso 1.
    2. No painel de configuração, na guia Configurar, selecione Visibilidade do componente para mostrar as opções.
    3. Selecione Ocultar componente.
    4. Selecione Salvar.
    {#responsive-authoring-component-visibility__substeps_izs_gxc_1cc}
17. No fator forma móvel, oculte os componentes do botão.
    1. Selecione o ícone do fator forma móvel na parte superior da fase.
    2. Na árvore de conteúdo, selecione Botão 1.
    3. No painel de configuração, na guia Configurar, selecione Ocultar componente.
    4. Repita as etapas bc para o Botão 2 e o Botão 3.
    5. Selecione Salvar.

    {#responsive-authoring-component-visibility__substeps_ddn_ztv_sbc}  
    Dois locais mostram que os componentes do botão estão ocultos no tamanho móvel. Primeiro, no painel de configuração, ao lado da opção Ocultar componente, selecione o ícone móvel. Uma mensagem é exibida para confirmar que o valor (ocultar componente selecionado) é para o tamanho móvel.

    Em segundo lugar, na árvore de conteúdo, os três componentes do botão são exibidos com o ![ícone Oculto]() oculto.
18. No fator forma móvel, mostre o componente suspenso.
    1. Na árvore de conteúdo, selecione Menu suspenso 1.
    2. No painel de configuração, na guia Configurar, selecione Ocultar componente para limpar o campo.
    3. Selecione Salvar.
    {#responsive-authoring-component-visibility__substeps_wf2_25q_1cc}
19. Selecionar Exibição.  
    O fator forma móvel é exibido com o ícone de menu. Se você selecionar a seta, as opções padrão serão exibidas (Item de lista 1, Item de lista 2 e assim por diante). Você configuraria o componente suspenso para exibir Tarefas, Incidentese Mudanças da mesma forma que os botões horizontais disponíveis nos fatores forma de tablet e desktop.

20. Selecione os ícones de fator forma da área de trabalho e do tablet na parte superior.  
    Os fatores forma da área de trabalho e do tablet mostram somente os botões horizontais, não o ícone do menu.
21. Feche a sobreposição de visualização selecionando o X.