Explorar a interface do editor universal (WYSIWYG)
O Editor universal oferece uma interface simples, visual e intuitiva do What You See Is What You Get (WYSIWYG) para o Adobe Edge Delivery Services Forms. Ele fornece uma interface moderna com funcionalidade de arrastar e soltar para uma criação de formulários eficiente.
O que você vai aprender
Ao final deste tutorial, você irá:
- Entender os principais componentes da interface do Universal Editor
- Navegar com confiança pelas diferentes seções da interface
- Saber como acessar e usar ferramentas essenciais de criação de formulários
- Estar familiarizado com atalhos de teclado que aumentam a produtividade
Compreender a interface do editor universal
Ao editar um formulário usando o Editor universal, o console abre uma interface interativa do WYSIWYG que permite iniciar a edição imediatamente. Essa interface fornece feedback visual em tempo real enquanto você trabalha, mostrando exatamente como seu formulário aparecerá para os usuários finais.
A interface do Editor universal é dividida em quatro partes lógicas:
Vamos explorar cada seção em detalhes.
Cabeçalho Experience Cloud
O Cabeçalho do Experience Cloud é exibido na parte superior do console e fornece o contexto de navegação dentro do ecossistema mais amplo da Adobe Experience Cloud. Ele mostra sua localização atual e permite acesso rápido a outros aplicativos da Experience Cloud.
Vamos examinar cada componente:
-
Adobe Experience Cloud
Clicar no link Adobe Experience Cloud no lado esquerdo da tela permite navegar até a raiz da solução do Experience Manager. A partir daí, você pode acessar outras ferramentas, como o Experience Manager Sites, o Experience Manager Assets e o Experience Manager Guides.
-
Nome da Organização
O Nome da Organização exibe o nome da organização do Identity Management System (IMS) na qual você está conectado no momento. Se você tiver acesso a várias organizações, poderá alternar entre elas usando esse menu suspenso. Por exemplo, na captura de tela, a organização IMS selecionada no momento é "AEM Forms Internal01".
-
Ajuda
O ícone Ajuda fornece acesso rápido aos recursos de aprendizagem e suporte. Isso é particularmente valioso quando você encontra desafios ou precisa de orientação sobre recursos específicos. Você também pode enviar feedback por meio desta seção.
-
Notificações
A seção Notificações exibe o número de notificações incompletas, solicitações e tarefas atuais atribuídas atualmente na sua organização IMS. Estar de olho nesta seção ajuda você a se manter atualizado em relação ao fluxo de trabalho.
-
Soluções
O menu Soluções permite alternar para outras soluções da Adobe Experience Cloud, facilitando a movimentação entre diferentes ferramentas em seu fluxo de trabalho.
-
Perfil de usuário
Esse ícone exibe as informações do seu perfil, juntamente com o nome da organização IMS na qual você está conectado no momento. Clique neste ícone para acessar as configurações da conta e as opções de saída.
Barra de ferramentas do editor universal
A barra de ferramentas fornece ferramentas essenciais de navegação e edição. Com ele, você pode mover-se entre formulários, publicar ou desfazer a publicação de formulários, editar propriedades do formulário e acessar o editor de regras para adicionar comportamentos dinâmicos.
Veja o que cada componente oferece:
-
Botão da Página Inicial
O botão Home retorna à página inicial do Universal Editor. Isso é útil quando você precisa começar a trabalhar em um formulário diferente. Você também pode inserir diretamente um URL na barra de localização para navegar para qualquer formulário que deseja editar.
-
Barra de Localização
A Barra de Localização exibe o endereço do formulário que você está editando no momento. Para alternar para um formulário diferente, basta clicar na barra de localização e inserir sua URL. O atalho de teclado para focalizar a barra de localização é
l
. -
Editor de regras
O Editor de regras permite que você adicione comportamentos dinâmicos aos seus formulários por meio de uma interface visual intuitiva. Com ele, você pode criar condições, validações e ações que respondam à entrada do usuário, tornando seus formulários interativos e inteligentes.
note note NOTE - A extensão Editor de Regras não está habilitada por padrão no Editor Universal. Para habilitar este recurso avançado, contate-nos em aem-forms-ea@adobe.com pelo seu endereço de email oficial.
- Para saber como criar e gerenciar regras, consulte o artigo Introdução ao Editor de regras em Criação no WYSIWYG.
-
Editar Propriedades do Formulário
A opção Editar propriedades do formulário permite definir configurações importantes do formulário, como o Modelo de dados de formulário (FDM) e a data de publicação. Essas propriedades influenciam como o formulário se comporta e se integra a sistemas de back-end.
-
Configurações do Cabeçalho de Autenticação
A opção Configurações do Cabeçalho de Autenticação permite definir cabeçalhos de autenticação personalizados para fins de desenvolvimento local. Isso é particularmente útil ao testar formulários que exigem credenciais de autenticação.
-
Modo responsivo
O recurso Modo responsivo permite testar como o formulário será exibido em diferentes dispositivos. Por padrão, o editor é aberto no layout de desktop, mas você pode alternar para o modo de exibição móvel para garantir que o formulário permaneça utilizável e atraente em telas menores.
-
Modo de visualização
Modo de Visualização mostra o formulário exatamente como ele será exibido quando publicado. Isso permite que você interaja com o formulário clicando em links e botões, como seus usuários fariam. Essa é uma etapa essencial antes da publicação para verificar se tudo funciona conforme o esperado. Alternar entre os modos de edição e visualização usando o atalho de teclado
p
. -
Abrir página
O botão Abrir Página abre o formulário em uma nova guia do navegador para visualização. Isso fornece uma visualização em tela cheia do formulário sem a interface do editor. O atalho de teclado desta ação é
o
. -
Publicar
Quando o formulário estiver pronto para os usuários, o botão Publicar o tornará online e disponível para o seu público-alvo. Esta é a etapa final no fluxo de trabalho de criação do formulário.
-
Menu de reticências
Clicar nas reticências (…) revela opções adicionais, incluindo a capacidade de Desfazer a publicação de um formulário que está ativo no momento. Isso é útil quando você precisa remover temporariamente um formulário do acesso público ou substituí-lo por uma versão atualizada.
Painel Propriedades
O Painel de Propriedades aparece no lado direito da interface e exibe informações contextuais com base no que você selecionou no formulário. Quando nenhum componente é selecionado, ele mostra a estrutura geral do formulário.
Vamos explorar seus principais componentes:
-
Modo de Propriedades
O modo Propriedades exibe configurações e opções para o componente selecionado no momento. É aqui que você personaliza elementos individuais do formulário para atender aos seus requisitos específicos. O atalho de teclado para abrir as propriedades de um componente selecionado é
d
. -
Árvore de conteúdo
A Árvore de conteúdo exibe a estrutura hierárquica do formulário. Essa representação visual ajuda você a entender como os componentes são aninhados entre si. Clicar em qualquer item na árvore seleciona-o no editor e rola a tela até seu local. Isso é especialmente útil em formas complexas. Alternar a exibição da árvore de conteúdo com o atalho de teclado
f
. -
Gerar Variações
O recurso Gerar variações aproveita a inteligência artificial para criar diferentes versões do formulário com base em prompts específicos. Isso ajuda você a experimentar com diferentes abordagens e designs sem criar manualmente cada variação. Os prompts podem ser fornecidos pela Adobe ou personalizados por você.
note note NOTE Para obter instruções detalhadas sobre como usar a opção Gerar variações para formulários, consulte o artigo Gerar variações. -
Experimentação
O recurso Experimentação permite executar testes controlados comparando diferentes designs e layouts de formulário. Analisando como os usuários interagem com cada variante, é possível tomar decisões orientadas por dados para otimizar as taxas de conversão e a experiência do usuário.
-
Personalização
As configurações do Personalization permitem que você conecte seus formulários com o Adobe Experience Platform (AEP) ou aplicativos externos. Essa conexão permite criar experiências de formulário personalizadas com base nos dados e comportamentos do usuário, aumentando a relevância e o engajamento.
-
Teste A/B
O Teste A/B ajuda você a comparar variações específicas do seu formulário para determinar qual tem melhor desempenho. Diferentemente da experimentação mais ampla, os testes A/B normalmente se concentram na comparação de elementos ou alterações específicos para identificar a opção mais eficaz.
-
Gerenciamento de tarefas
O recurso Gerenciamento de tarefas simplifica a colaboração, ajudando sua equipe a organizar, rastrear e concluir tarefas relacionadas à criação e otimização de formulários. Isso mantém os projetos avançando eficientemente com uma responsabilidade clara.
-
Rascunhos de Conteúdo
O recurso Rascunhos de Conteúdo permite criar e salvar versões preliminares de elementos de texto no formulário. Você pode criar rascunhos usando texto de formulário existente ou começar do zero e, em seguida, editá-los ou excluí-los conforme necessário. Por padrão, você verá três rascunhos, mas ao clicar em Mostrar tudo serão exibidos rascunhos adicionais.
-
Source de dados
A opção Data Source permite configurar e selecionar as fontes de dados para seu Modelo de Dados de Formulário (FDM). Essa integração disponibiliza para uso no formulário todos os objetos, propriedades e serviços do modelo de dados das fontes selecionadas, permitindo a recuperação e o envio de dados dinâmicos.
-
Adicionar
O botão Adicionar revela uma lista suspensa de componentes que podem ser adicionados ao contêiner selecionado no momento. Por exemplo, quando uma seção Formulário adaptável é selecionada, essa lista mostra todos os componentes que podem ser adicionados a essa seção. O atalho de teclado para abrir esta lista de componentes é
a
. -
Duplicar
A opção Duplicar cria uma cópia exata do componente selecionado. Isso economiza tempo quando você precisa de vários elementos semelhantes, pois é possível duplicar e modificar em vez de criar do zero.
-
Excluir
A opção Excluir remove o componente selecionado do formulário. Tenha cuidado ao usar essa opção, pois ela remove imediatamente o elemento sem um prompt de confirmação.
Editor
O Editor é o espaço de trabalho central onde você cria e modifica o formulário. Ele exibe o formulário especificado na barra de localização e fornece uma experiência do WYSIWYG que mostra exatamente como o formulário será exibido para os usuários. No modo de visualização, você pode interagir com o formulário da mesma forma que seus usuários fariam, testando a navegação por botões e links.
O Editor é onde você passa a maior parte do seu tempo, adicionando componentes, configurando suas propriedades e organizando-os para criar uma experiência de formulário intuitiva e eficaz.
Resumo de atalhos de teclado
Para aumentar sua produtividade, lembre-se desses atalhos essenciais do teclado:
l
- Focalizar a barra de localizaçãop
- Alternar entre os modos de edição e de visualizaçãoo
- Abrir o formulário em uma nova guiad
- Abrir propriedades do componente selecionadof
- Alternar a exibição da árvore de conteúdoa
- Abrir a lista de componentes a serem adicionados