DEV Community

Beatriz Maciel
Beatriz Maciel

Posted on • Updated on

Modelos de campos em uma dialog no AEM

#adobeexperiencemanager #aem #beginners #xml

Existem várias maneiras de construir dialogs nos componentes do AEM e a variedade de opções melhora a experiência do Author na construção da página.
Através da necessidade de um acervo de modelos reutilizáveis e simples para as dialogs AEM, decidi criar este artigo com alguns dos principais tipos de campos utilizados e seus respectivos códigos, facilitando a vida do(a) desenvolvedor(a).
Também vou explicar algumas propriedades dos campos e suas utilizações.

📌 Textfield 

<text
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldDescription="Insira um texto simples, de apenas uma linha"
    fieldLabel="Texto"
    required="{Boolean}true"
    name="./text"/>
Enter fullscreen mode Exit fullscreen mode

Aqui temos um exemplo de textfield com algumas propriedades relevantes. O nome editável para que possamos pegar esse input no Java precisa ser repetido tanto na abertura da tag quanto no campo name="".

Textfield em uma dialog

1 - required="{Boolean}true"
2 - fieldLabel="Texto"
3 - fieldDescription="Insira um texto simples, de apenas uma linha"
4 - sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

📌 Textarea

Tem a mesma propriedade do textfield, mas a área de texto é maior, o que facilidade a visualização do que está sendo digitado.

<constraintMessage
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
    fieldDescription="Escreva uma mensagem"
    fieldLabel="Mensagem simples com campo alargado"
    name="./constraintMessage"/>
Enter fullscreen mode Exit fullscreen mode

Textarea example in dialog

📌 Fileupload

Para que um author possa carregar arquivos na dialog de um componente podemos usar o seguinte modelo:

<img
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    autoStart="{Boolean}true"
    fileNameParameter="./imgName"
    fileReferenceParameter="./img"
    mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
    multiple="{Boolean}false"
    name="./file"
    required="{Boolean}true"
    title="image.title"
    uploadUrl="${suffix.path}"
    allowUpload="{Boolean}false"
    fieldLabel="Imagem"
    useHTML5="{Boolean}true"/>
Enter fullscreen mode Exit fullscreen mode

Exemplo de carregamento de imagem em uma dialog

Além de receber um parâmetro de nome na imagem (mas poderia ser no documento, no vídeo, qualquer asset), precisamos também receber um fileReferenceParameter para identificá-la.

  • mimeTypes : limita os tipos de arquivos que podem ser carregados
  • multiple : limita a quantidade
  • uploadUrl="${suffix.path}" : captura paths do AEM
  • allowUpload="{Boolean}false" : é uma recomendação Adobe que os arquivos sejam carregados através do DAM e não diretamente upadas do arquivo do computador. É ideal então é que deixemos esse campo como false, mas pode ser modificado caso necessário

📌 Colorfield

Seletor de cores em Hexa ou Rgb/a. O AEM gera cores padrões quando botamos showDefaultColors="{Boolean}true" e pode começar com um valor já pré estabelecido configurado em value="#000000".

<color
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
    fieldLabel="Selecione uma cor do texto"
    showDefaultColors="{Boolean}true"
    showProperties="{Boolean}true"
    showSwatches="{Boolean}true"
    autogenerateColors="off"
    value="#000000"
    name="./color"/>
Enter fullscreen mode Exit fullscreen mode

Colorfield fechado

Colorfield aberto

📌 Richtext

O richtext dá mais opções de texto, permitindo alterações pré-estabelecidas no código, como negrito, itálico, links, caracteres especiais, quebras de texto, listagens, etc. O código abaixo é um modelo com opções diversas, mas existem outras configurações possíveis (aqui você pode encontrar algumas delas)

<text
        jcr:primaryType="nt:unstructured"
        sling:resourceType="cq/gui/components/authoring/dialog/richtext"
        fieldDescription="Insira o texto a ser exibido. Você pode adicionar modificadores de formato."
        fieldLabel="Texto"
        name="./text"
        useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <edit
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <format
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <subsuperscript
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <lists
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <paraformat
                jcr:primaryType="nt:unstructured"
                features="*">
            <formats jcr:primaryType="cq:WidgetCollection">
                <heading2
                        jcr:primaryType="nt:unstructured"
                        description="Heading 2"
                        tag="h2"/>
                <heading3
                        jcr:primaryType="nt:unstructured"
                        description="Heading 3"
                        tag="h3"/>
                <myparagraph
                        jcr:primaryType="nt:unstructured"
                        description="Paragraph"
                        tag="p"/>
            </formats>
        </paraformat>
        <links
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <misctools
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <fullscreen
                jcr:primaryType="nt:unstructured"
                features="*"/>
        </rtePlugins>
        <uiSettings jcr:primaryType="nt:unstructured">
            <cui jcr:primaryType="nt:unstructured">
                <inline
                    jcr:primaryType="nt:unstructured"
                    toolbar="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,#paraformat,image#imageProps,#justify,#lists,links#modifylink,links#unlink,links#anchor,misctools#specialchars]">
                <popovers jcr:primaryType="nt:unstructured">
                    <lists
                            jcr:primaryType="nt:unstructured"
                            items="[lists#unordered,lists#ordered]"
                            ref="lists"/>
                    <paraformat
                            jcr:primaryType="nt:unstructured"
                            items="paraformat:getFormats:paraformat-pulldown"
                            ref="paraformat"/>
                </popovers>
            </inline>
        </cui>
    </uiSettings>
</text>
Enter fullscreen mode Exit fullscreen mode

Richtext example

📌 NumberField

Este modelo de numberfield atribui um número mínimo e máximo (max="5" min="0") e um step, que faz com o que o author possa, além de digitar o número desejado, suba um a um utilizando as setas de controle. O Step pode ser em casas decimais e não necessariamente precisa de um mínimo ou máximo para esse campo, ele pode ser estruturado como for melhor.

<number
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
    fieldLabel="Avaliação"
    fieldDescription="A partir de 1 as estrelas de avaliação aparecem no componente. 0 ou nulo fazem com que a avaliação não apareça."
    max="5"
    min="0"
    name="./number"
    step="1"
    required="{Boolean}false"/>
Enter fullscreen mode Exit fullscreen mode

Numberfield example

📌 Multifield

Às vezes precisamos de múltiplos campos para que o author escolha a quantidade de componentes a serem inseridos. Isso pode acontecer com imagens em um carrossel, com cards de artigos ou até com listas de links.
É importante ressaltar que, quando temos um multifield, ele precisa ser primeiro chamado enquanto lista na classe Java principal com uma anotação @ChildResource e, depois, precisa de uma classe própria para que cada elemento tenha suas próprias propriedades. Esses detalhes não serão abordados neste artigo.

<cards
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
        fieldDescription="Clique em '+' para adicionar um novo card"
        fieldLabel="Cards"
        composite="{Boolean}true">
        <granite:data
                jcr:primaryType="nt:unstructured"
                min-item="1"
                max-item="10"/>
        <field
                granite:class="cmp-teaser__editor-action"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container"
                name="./cards">
            <items jcr:primaryType="nt:unstructured">
                <accordion
                        granite:class="js-cq-IPEPlugin-container"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/accordion"
                        variant="quiet">
                        <granite:data
                                jcr:primaryType="nt:unstructured"
                                accordion-title="./cardTitle"/>
                        <items jcr:primaryType="nt:unstructured">
                                <cardList
                                        jcr:primaryType="nt:unstructured"
                                        jcr:title="Card"
                                        sling:resourceType="granite/ui/components/coral/foundation/container"
                                        maximized="{Boolean}true">
                                        <items jcr:primaryType="nt:unstructured">
                                                <cardTitle
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                        fieldLabel="Título do card"
                                                        emptyText="Título"
                                                        name="./cardTitle"
                                                        required="{Boolean}true"/>
                                                <cardValue
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                                        fieldLabel="Preço"
                                                        required="{Boolean}true"
                                                        step="1"
                                                        name="./cardValue"/>
                                        </items>
                                </cardList>
                        </items>
                </accordion>
            </items>
        </field>
</cards>
Enter fullscreen mode Exit fullscreen mode

Multifield fechado

Multifield aberto

Propriedades de cada campo multifield

  • <accordion/> : a tag accordion se refere aos elementos de dentro dessa lista. Nesse caso, temos um cardList que é abraçado pelo cards. O accordion é a retração das informações de cada um desses elementos. --> Logo abaixo do accordion temos uma tag que configura os nomes de cada menu retrátil com o cardTitle.
  • O cardList é um tipo de container que vai receber as informações de cada elemento, que nesse caso só tem título (textfield) e preço (numberfield), mas poderia ter quantos elementos fossem possíveis.

📌 Select

Podemos utilizar quantas opções forem necessárias em um selector e utilizando o seu value como parâmetro.

<selector
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="Seletor de opções"
        name="./selector">
        <items jcr:primaryType="nt:unstructured">
                <red
                        jcr:primaryType="nt:unstructured"
                        text="Vermelho"
                        value="red"/>
                <yellow
                        jcr:primaryType="nt:unstructured"
                        text="Amarelo"
                        value="yellow"/>
        </items>
</selector>
Enter fullscreen mode Exit fullscreen mode

Select example in dialog

📌 Checkbox

Um checkbox pode ser usado para devolver um parâmetro booleano. O campo checked="" serve para delimitar se o campo por padrão deve vir marcado ou desmarcado.

<checkbox
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
  fieldDescription="Selecione caso seja verdadeiro"
  name="./checkbox"
  text="Adicionar layout escuro"
  uncheckedValue="false"
  checked="true"
  value="true"/>
Enter fullscreen mode Exit fullscreen mode

Checkbox example in dialog

📌 Radiogroup

Funciona como um seletor de opções, tal qual o selector.

<size
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
    fieldLabel="Selecione um tamanho de card"
    name="./size"
    vertical="{Boolean}true">
        <items jcr:primaryType="nt:unstructured">
            <small
                    jcr:primaryType="nt:unstructured"
                    checked="{Boolean}true"
                    text="Pequeno"
                    value="small"/>
            <medium
                    jcr:primaryType="nt:unstructured"
                    text="Médio"
                    value="medium"/>
            <large
                    jcr:primaryType="nt:unstructured"
                    text="Grande"
                    value="large"/>
        </items>
</size>
Enter fullscreen mode Exit fullscreen mode

Radiogroup example in dialog

📌 Datepicker

O datepicker é útil como seletor de datas e pode incluir também horas e minutos. O formato é adaptável através da propriedade displayedFormat=""

<date
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
    displayedFormat="DD-MM-YYYY HH:mm"
    fieldLabel="Selecione uma data"
    name="./date"
    type="datetime"
    typeHint="Date"/>
Enter fullscreen mode Exit fullscreen mode

Datepicker example in dialog

📌 Pathbrowser & Pathfield

O Pathbrowser serve tanto para redirecionamentos internos quanto externos (como urls). Entretanto, a Adobe sugere que sempre busquemos imagens no próprio banco de dados do AEM (no DAM).
Neste caso o exemplo busca uma imagem, por isso o rootPath="" é indicando para o /content/dam. Este rootPath pode ser modificado conforme a necessidade.

<pathBrowser
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    fieldLabel="Selecione uma imagem"
    name="./pathBrowser"
    required="{Boolean}true"
    rootPath="/content/dam"/>
Enter fullscreen mode Exit fullscreen mode 
<pathField
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
    fieldLabel="Url or path"
    name="./pathField"
    required="{Boolean}false"
    rootPath="/content/dam"/>
Enter fullscreen mode Exit fullscreen mode

Pathbrowser example in dialog

Referências

Top comments (0)

Read next

kutt27 profile image

Difference between var and let in Javascript

Amal Satheesan -

vishnusatheesh profile image

Controlled and Uncontrolled components in react

Vishnu Satheesh -

stephrp12 profile image

What Will You Choose?

StephRP12 -

allyn profile image

LeetCode

allyn -