Listas suspensas em cascata
Uma lista suspensa em cascata é uma série de controles DropDownList dependentes dos quais um controle DropDownList depende dos controles pai ou anterior de DropDownList. Os itens no controle DropDownList são preenchidos com base em um item selecionado pelo usuário em outro controle DropDownList.
Demonstração do caso de uso
Para fins deste tutorial, usei a API REST Geonames para demonstrar esse recurso.
Há várias organizações que fornecem esse tipo de serviço e, desde que tenham APIs REST bem documentadas, é possível integrar facilmente ao AEM Forms usando o recurso de integração de dados
As etapas a seguir foram seguidas para implementar listas suspensas em cascata no AEM Forms
Criar conta de desenvolvedor
Crie uma conta de desenvolvedor com Geonames. Anote o nome de usuário. Esse nome de usuário é necessário para chamar as APIs REST do geonames.org.
Criar arquivo Swagger/OpenAPI
A Especificação de OpenAPI (antiga Especificação do Swagger) é um formato de descrição de API para APIs REST. Um arquivo OpenAPI permite descrever toda a API, incluindo:
- Pontos de extremidade disponíveis (https://experienceleague.adobe.com/users?lang=pt-BR) e operações em cada ponto de extremidade (GET /users, POST /users)
- Parâmetros de operação Entrada e saída para cada operação
Métodos de autenticação - Informações de contato, licença, termos de uso e outras informações.
- As especificações da API podem ser escritas em YAML ou JSON. O formato é fácil de aprender e legível tanto para seres humanos quanto para máquinas.
Para criar seu primeiro arquivo swagger/OpenAPI, siga a documentação sobre OpenAPI
Use o editor swagger para criar seu arquivo swagger e descrever as operações que buscam todos os países e elementos secundários do país ou estado. O arquivo swagger pode ser criado no formato JSON ou YAML.
Criar fontes de dados
Para integrar o AEM/AEM Forms com aplicativos de terceiros, precisamos criar a fonte de dados na configuração dos serviços em nuvem. Use os arquivos swagger para criar suas fontes de dados.
Você precisará criar duas fontes de dados (uma para buscar todos os países e outra para obter elementos secundários)
Criar modelo de dados do formulário
A integração de dados do AEM Forms fornece uma interface de usuário intuitiva para criar e trabalhar com modelos de dados de formulário. Baseie o modelo de dados do formulário nas fontes de dados criadas na etapa anterior. Modelo de dados de formulário com 2 fontes de dados
Criar formulário adaptável
Integre as invocações do GET do modelo de dados de formulário ao seu formulário adaptável para preencher as listas suspensas.
Crie um formulário adaptável com duas listas suspensas. Um para listar os países e um para listar os estados/províncias dependendo do país selecionado.
Lista suspensa Preencher países
A lista de países é preenchida quando o formulário é inicializado pela primeira vez. A captura de tela a seguir mostra o editor de regras configurado para preencher as opções da lista suspensa do país. Você terá que fornecer seu nome de usuário com a conta de nomes geográficos para que isso funcione.
Preencher a lista suspensa Estado/Província
Precisamos preencher a lista suspensa Estado/Província com base no país selecionado. A captura de tela a seguir mostra a configuração do editor de regras
Exercício
Adicione 2 listas suspensas chamadas counties e cities no formulário para listar os condados e a cidade com base no país e estado/província selecionados.
Assets de amostra
Você pode baixar os seguintes ativos para começar a criar a amostra de lista suspensa em cascata
Os arquivos concluídos do Swagger podem ser baixados de aqui
Os arquivos swagger descrevem a seguinte API REST
O Modelo de Dados de Formulário concluído pode ser baixado daqui