DocumentaçãoAEM 6.5Guia do usuário

Personalizar o layout e o posicionamento das mensagens de erro de um formulário adaptável customize-layout-and-positioning-of-error-messages-of-an-adaptive-form

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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

  • Personalizar a localização e o layout da legenda de um campo sem alterar as propriedades CSS correspondentes
  • Personalizar a posição das mensagens de erro em linha
  • Personalizar conteúdo do indicador de ajuda dinâmica
  • Personalize a posição dos componentes do campo (legenda, widget, descrição curta, descrição longa e indicadores de ajuda) sem alterar as propriedades CSS correspondentes

Personalizar o layout dos campos customize-layout-of-fields

É possível personalizar o layout de um único campo ou de todos os campos para alterar a posição da legenda e das mensagens de erro.

Para aplicar um layout personalizado a um campo, faça o seguinte:

Personalizar o layout de um único campo customize-layout-of-a-single-field

  1. Abra o formulário no Estilo modo. Para abrir o formulário no modo de estilo, selecione na barra de ferramentas da página tela suspensa > Estilo.

  2. Na barra lateral, em Objetos de formulário, selecione o campo e selecione o botão editar botão editar .

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

    Especificação do estilo em linha de um campo

Personalizar o layout de todos os campos de um formulário customize-layout-of-all-the-fields-of-a-form

Com o AEM Forms, agora é possível criar um tema e aplicá-lo ao formulário. O editor de temas permite especificar o estilo dos componentes de formulário em um local. Ao criar um tema, você especifica 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 no 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 e selecione nível de campo > Contêiner de formulário adaptável e selecione cmppr .
  3. Na barra lateral, em Tema do formulário adaptável, selecione o tema criado usando o Editor de temas.

Criar um layout de campo personalizado create-a-custom-field-layout

  1. Abra o CRXDE Lite. O URL padrão é https://'[server]:[porta]"/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 Error On Right

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

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

    code language-css 
    .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 Estilo guia. No Configurar layout do campo selecione o layout recém-criado e clique em OK.

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

Obter arquivo

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2