Personalizar o layout e o posicionamento de mensagens de erro de um formulário adaptável

É possível personalizar o layout e o posicionamento das mensagens de erro de um formulário adaptável. Você pode executar as seguintes personalizações:

  • Personalizar o local e o layout da legenda de um campo sem fazer qualquer alteração nas propriedades CSS correspondentes
  • Personalizar a posição das mensagens de erro em linha
  • Personalizar o conteúdo do indicador dinâmico de ajuda
  • Personalizar a posição dos componentes de campo (legenda, widget, descrição curta, descrição longa e componentes do indicador de ajuda) sem fazer qualquer alteração nas propriedades de CSS correspondentes

Personalizar o layout dos campos

Você pode personalizar o layout de um único campo ou de todos os campos para alterar a posição da legenda e das mensagens de erro. Execute as seguintes etapas para aplicar um layout personalizado a um campo:

Personalizar o layout de um único campo

Execute as seguintes etapas para aplicar um layout personalizado a um único campo:

  1. Abra o formulário no modo Estilo. Para abrir o formulário no modo de estilo, na barra de ferramentas da página, toque em menu suspenso da tela > Estilo.

  2. Na barra lateral, em Objetos de formulário, selecione o campo e toque no botão de edição edit-button.

  3. Selecione o estado do campo que deseja personalizar e especifique o estilo para esse estado.

    Especificação do estilo em linha de um campo

Personalizar o layout de todos os campos de um formulário

Com o AEM Forms, agora é possível criar um tema e aplicá-lo ao formulário. O editor de temas permite especificar o estilo de componentes de formulário em um local. Ao criar um tema, especifique o estilo em um nível de componente. Para obter mais informações sobre temas, consulte Temas no AEM Forms.

Crie um tema usando o Editor de Temas para personalizar o layout de todos os campos do formulário. Depois de criar um tema, execute as seguintes etapas para aplicá-lo a um formulário:

  1. Abra o formulário no modo de edição.
  2. No modo de edição, selecione um componente, em seguida, toque em field-level > Container de formulário adaptável e, em seguida, toque em cmppr.
  3. Na barra lateral, em Tema de formulário adaptável, selecione o tema que você criou usando o Editor de temas.

Criar um layout de campo personalizado

  1. Abra o CRXDE lite. O URL padrão é https://'[server]:[port]'/crx/de.

  2. Copie um layout de campo do nó /libs/fd/af/layouts/field (Por exemplo, defaultFieldLayout) para o nó /apps (Por exemplo, /apps/af-field-layout).

  3. Renomeie o nó copiado e o arquivo defaultFieldLayout.jsp. Por exemplo, errorOnRight.jsp.

  4. Altere o valor das propriedades qtip e jcr:description do nó copiado. Por exemplo, altere o valor das propriedades para Erro à direita

  5. Para adicionar novos estilos e comportamento, crie uma biblioteca de cliente no nó /etc.

    Por exemplo, no local /etc/af-field-layout-clientlib, crie o nó client-library. Adicione a propriedade categoria com o valor af.field.errorOnRight e o arquivo style.less com o seguinte código:

    .widgetErrorWrapper {
    
     height: 38px;
     margin: 5px;
    
     .guideFieldWidget{
     width: 60%;
     float: left; 
     }
    
     .guideFieldError{
     overflow:hidden;
     width:40%; 
     }
    
    }
    
  6. Para aprimorar a aparência e o comportamento, inclua a biblioteca do cliente criada no arquivo de layout (errorOnRight.jsp).

  7. Abra a caixa de diálogo de edição do campo e selecione a guia Estilo. Na caixa suspensa Configurar layout de campo, selecione o layout recém-criado e clique em OK.

O pacote ErrorOnRight.zip contém código para mostrar mensagens de erro no lado direito dos campos.

Obter arquivo

Nesta página

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now