O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principais para criação de um novo Forms adaptável ou adição de Forms adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.
Seções repetíveis são painéis que podem ser adicionados ou removidos dinamicamente de um formulário.
Por exemplo, ao se candidatar a um cargo, o candidato a cargo fornece detalhes do emprego anterior, como nome da empresa, função, projeto e outras informações. A informação de todos os empregadores requer seções diferentes, mas semelhantes. Nesse cenário, o formulário de emprego fornece uma seção de empregador e também uma opção para adicionar dinamicamente mais seções. Essas seções, que são adicionadas dinamicamente, são conhecidas como seções Repetíveis.
Você pode usar um dos seguintes métodos para criar painéis repetíveis:
No modo de edição, selecione um painel e toque em . Na barra lateral, em Propriedades, ative Tornar o painel repetível. Especifique valores para o Máximo e Mínimo campos.
O campo Máximo especifica o número máximo de vezes que um painel pode aparecer na página. Você pode especificar -1 no campo Contagem máxima para permitir que o painel apareça por um número infinito de vezes.
O campo Minimum especifica o número mínimo de vezes que um painel é exibido no formulário. Se você definir o campo The Minimum Count como zero posteriormente, será possível remover todas as instâncias por meio de scripts depois que a representação for concluída.
Para criar um painel não repetível, defina o valor dos campos Máximo e Mínimo como um. O layout do Accordion não é compatível com -1 no campo Contagem máxima. Você pode especificar um número alto para dar a noção de valor infinito.
O pai do painel, que deve ser repetido, deve conter os botões adicionar e excluir para gerenciar ocorrências dos painéis repetíveis. Execute as seguintes etapas para inserir botões no pai e ativar scripts nos botões:
Na barra lateral, arraste e solte um componente de botão no pai do painel. Selecione o componente e toque em . As regras do botão são abertas no editor de regras.
Na janela Editor de regras, clique em Criar.
Selecionar Editor visual na linha Objetos de formulário e Funções.
Na área regra, em QUANDO, selecione estado foi clicado.
Em THEN:
Selecionar Editor de código na linha Objetos de formulário e Funções. Clique em Editar regras e na área de código:
this.panel.instanceManager.addInstance()
this.panel.instanceManager.removeInstance(this.panel.instanceIndex)
Clique em Concluído.
Se um campo pertencer a um painel repetível, você não poderá acessá-lo diretamente usando seu nome nos scripts. Para acessar o campo, especifique a instância repetível à qual o campo pertence usando o instances
API em InstanceManager
. A sintaxe para usar o instances
API em InstanceManager
é:
<panelName>.instanceManager.instances[<instanceNumber>].<fieldname>
Por exemplo, você cria um formulário adaptável com um painel repetível com uma caixa de texto. Ao preencher previamente o formulário com três caixas de texto repetíveis, é necessário o xml abaixo:
<panel1><textbox1>AA1</panel1></textbox1>
<panel1><textbox1>AA2</panel1></textbox1>
<panel1><textbox1>AA3</panel1></textbox1>
Para ler os dados AA1, especifique:
Panel1.instanceManager.instances[0].textbox.value
Para ler os dados AA2, especifique:
Panel1.instanceManager.instances[1].textbox.value
Para obter mais informações, consulte: Classe: InstanceManager#instances em Referência da API Java do AEM Forms.
Quando todas as instâncias de um painel forem removidas de um formulário adaptável, para adicionar uma instância do painel removido, use a sintaxe _panelName para capturar o gerenciador de instâncias do painel e use a API addInstance do gerenciador de instâncias para adicionar a instância excluída. Por exemplo, _panelName.addInstance(). Ele adiciona uma instância do painel removido.
Um painel tem várias opções de layout. A opção Layout para design do acordian tem suporte imediato para painéis repetíveis. Execute as seguintes etapas para o painel repetível com a opção Layout para design do acordian:
No pai do painel a ser repetido, toque em . Você pode ver as propriedades na barra lateral. No Layout selecione Acordeão.
Em um painel a ser repetido, toque em . Você pode ver as propriedades do painel na barra lateral. Ativar o Tornar o painel repetível e especifique o valor para a variável Máximo e Mínimo campos.
Agora, você pode usar o sinal de mais (+) e excluir ( ) para adicionar e remover os painéis.
O subformulário repetível é semelhante aos painéis repetíveis no Adaptive Forms. No AEM Forms Designer, execute as seguintes etapas para criar um subformulário repetitivo:
O arquivo .zip anexado contém uma amostra de subformulário repetível.
Você pode criar painéis repetíveis de um Esquema XML e da propriedade minOccours & maxOccurs de qualquer elemento de tipo complexo. Para obter informações detalhadas sobre o Esquema XML, consulte Criar formulários adaptáveis usando o esquema XML como modelo de formulário.
No código a seguir, a variável SampleType
O painel usa a propriedade minOccours & maxOccurs.
<?xml version="1.0" encoding="utf-8" ?>
<xs:schema targetNamespace="https://adobe.com/sample.xsd"
xmlns="https://adobe.com/sample.xsd"
xmlns:xs="https://www.w3.org/2001/XMLSchema"
>
<xs:element name="sample" type="SampleType"/>
<xs:complexType name="SampleType">
<xs:sequence>
<xs:element name="leaderName" type="xs:string" default="Enter Name"/>
<xs:element name="assignmentStartDate" type="xs:date"/>
<xs:element name="gender" type="GenderEnum"/>
<xs:element name="noOfProjectsAssigned" type="IntType"/>
<xs:element name="assignmentDetails" type="AssignmentDetails"
minOccurs="0" maxOccurs="10"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="AssignmentDetails">
<xs:attribute name="name" type="xs:string" use="required"/>
<xs:attribute name="durationOfAssignment" type="xs:unsignedInt" use="required"/>
<xs:attribute name="numberOfMentees" type="xs:unsignedInt" use="required"/>
<xs:attribute name="descriptionOfAssignment" type="xs:string" use="required"/>
<xs:attribute name="financeRelatedProject" type="xs:boolean"/>
</xs:complexType>
<xs:simpleType name="IntType">
<xs:restriction base="xs:int">
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="GenderEnum">
<xs:restriction base="xs:string">
<xs:enumeration value="Female"/>
<xs:enumeration value="Male"/>
</xs:restriction>
</xs:simpleType>
</xs:schema>
Para layout que não seja do acordeão, use componentes do botão de formulário adaptável para adicionar e remover instâncias.