Usar temas para estilizar os Componentes principais com base no Forms adaptável themes-for-af-using-core-components
É possível criar e aplicar temas para estilizar um Formulário adaptável. Um tema contém detalhes de estilo para os componentes e painéis. Os estilos incluem propriedades como cores de fundo, cores de estado, transparência, alinhamento e tamanho. Ao aplicar um tema, o estilo especificado é refletido nos componentes correspondentes. Um tema é gerenciado de forma independente sem uma referência a um Formulário adaptável e pode ser reutilizado em vários Forms adaptáveis.
Neste artigo, entendemos como projetar buscas personalizadas para Forms adaptável com base em Componentes principais usando temas.
Temas disponíveis para estilizar os Componentes principais
O Forms as Cloud Service fornece os temas listados abaixo para o Adaptive Forms baseado em Componentes principais:
Compreender a estrutura dos temas
Um tema é um pacote que inclui componentes de estilo, como arquivo CSS, arquivos JavaScript e recursos (como ícones) que definem o estilo do seu Forms adaptável. Um tema do Formulário adaptável segue uma organização específica, consistindo nos seguintes componentes:
-
src/theme.scss
: esta pasta inclui o arquivo CSS que tem um amplo impacto sobre todo o tema. Ele serve como um local centralizado para definir e gerenciar o estilo e o comportamento do tema. Ao fazer edições nesse arquivo, você pode fazer alterações aplicadas universalmente no tema, influenciando a aparência e a funcionalidade das Páginas adaptáveis do Forms e do AEM Sites. -
src/site
: esta pasta contém arquivos CSS que são aplicados à página inteira de um Site AEM. Esses arquivos consistem em códigos e estilos que afetam a funcionalidade geral e o layout da página do seu site AEM. Quaisquer modificações feitas aqui serão refletidas em todas as páginas do site. [Quando usá-lo?] -
src/components
: os arquivos CSS nesta pasta são projetados para componentes principais individuais do AEM. Cada pasta dedicada de um componente inclui um arquivo.scss
que estimula esse componente específico em um Formulário adaptável. Por exemplo, o arquivo /src/components/accordion/_accordion.scss contém informações de estilo para o componente Adaptive Forms Accordion. -
src/resources
: esta pasta contém arquivos estáticos, como ícones, logotipos e fontes. Esses recursos são usados para aprimorar os elementos visuais e o design geral do tema.
Criar um tema
O Forms as Cloud Service fornece, os temas de estilo do Formulário adaptável listados abaixo para os Componentes principais baseados no Adaptive Forms.
Você pode personalizar qualquer um desses temas para criar um novo tema.
Personalizar um tema customize-a-theme-core-components
A personalização de um tema refere-se ao processo de modificação, estilo e personalização da aparência de um tema. Ao personalizar um tema, você altera seus elementos de design, layout, cores, tipografia e, às vezes, o código subjacente. Ele permite criar uma aparência exclusiva e personalizada para seu site ou aplicativo, mantendo a estrutura básica e a funcionalidade fornecidas pelo tema.
Pré-requisitos prerequisites-to-customize
- Familiarize-se com a configuração de um pipeline no Cloud Manager e ter conhecimento básico sobre como configurar um pipeline ajuda a gerenciar e implantar com eficiência suas personalizações de tema.
- Saiba como configurar um usuário com a função de colaborador. Entender como configurar um usuário com a função de colaborador permite que você conceda as permissões necessárias para personalização de temas.
- Instale a última versão do Apache Maven. O Apache Maven é uma ferramenta de automação de build comumente usada para projetos Java™. A instalação da versão mais recente garante que você tenha as dependências necessárias para a personalização de temas.
- Instale um editor de texto simples. Por exemplo, Microsoft® Visual Studio Code. O uso de um editor de texto simples, como o Microsoft® Visual Studio Code, fornece um ambiente amigável para a edição e modificação de arquivos de tema.
Configurar o ambiente
- Habilite os Componentes principais adaptáveis do Forms para o ambiente de desenvolvimento local e Cloud Service.
- Configure um pipeline de implantação front-end para o seu ambiente Cloud Service. Como alternativa, você pode configurar o pipeline posteriormente, fornecendo a flexibilidade para priorizar testes e refinar o tema antes de configurar o pipeline de implantação.
Depois de aprender os pré-requisitos e configurar o ambiente de desenvolvimento, você estará bem preparado para começar a personalizar ou estilizar seu tema de acordo com seus requisitos específicos.
Personalizar um tema steps-to-customize-a-theme-core-components
A personalização de um tema é um processo de várias etapas. Para personalizar o tema, execute as etapas na ordem listada:
Os exemplos fornecidos no documento são baseados no tema Tela, mas é importante observar que você pode clonar qualquer tema e personalizá-lo usando as mesmas instruções. Essas instruções se aplicam a qualquer tema, permitindo modificar temas de acordo com suas necessidades específicas.
Vamos começar com um processo para criar uma experiência com marca para seu Forms adaptável baseado em componentes principais usando temas?
1. Clonar um tema download-a-theme-core-components
Para clonar um tema para os Componentes principais com base no Adaptive Forms, escolha um dos seguintes temas:
Para clonar um tema, execute as seguintes instruções:
-
Abra o prompt de comando ou a janela do terminal no ambiente de desenvolvimento local.
-
Execute o comando
git clone
para clonar um tema.code language-none git clone [Path of Git Repository of the theme]
Substituir o [Caminho do Repositório Git do tema] pela URL real do Repositório Git correspondente do tema
Por exemplo, para clonar o tema da Tela de Pintura, execute o seguinte comando:
code language-none git clone https://github.com/adobe/aem-forms-theme-canvas
Depois de executar o comando com êxito, você terá uma cópia local do tema disponível em sua máquina na pasta
aem-forms-theme-canvas
.
2. Definir nome de um tema set-name-of-theme
-
Abra a pasta de temas no IDE. Por exemplo, para abrir a pasta
aem-forms-theme-canvas
no editor de código do Visual Studio. -
Navegue até a pasta
aem-forms-theme-canvas
. -
Execute o seguinte comando:
code language-none code .
A pasta é aberta no Visual Studio Code.
-
Abra o arquivo
package.json
para edição. -
Defina os valores para os atributos
name
eversion
.note note NOTE - O atributo de nome é usado para identificar exclusivamente o tema, e o nome especificado é exibido na guia Estilo do Assistente de Criação de Formulário.
- Você tem a opção de selecionar um nome para o tema de acordo com sua escolha, por exemplo,
mytheme
oucustomtheme
. No entanto, neste caso, especificamos o nome comoaem-forms-wknd-theme
.
-
Abra o arquivo
package-lock.json
para edição. -
Defina os valores para os atributos
name
eversion
. Verifique se os valores dos atributosname
eversion
no arquivoPackage-lock
.json correspondem àqueles no arquivoPackage.json
. -
(Opcional) Abra o arquivo
ReadMe
para editar e atualizar o nome do tema. -
Salve e feche os arquivos.
Considerações ao definir o nome do tema
- É obrigatório remover o
@aemforms
do nome do tema no arquivoPackage.json
e no arquivoPackage-lock.json
. Caso você não consiga remover@aemforms
do nome de tema personalizado, isso resultará na falha do pipeline de front-end durante a implantação do tema. - É recomendável atualizar o tema
version
no arquivoPackage.json
e no arquivoPackage-lock.json
para refletir com precisão as alterações e aprimoramentos ao longo do tempo para o seu tema. - Para obter informações importantes sobre o uso, instruções de instalação e outros detalhes relevantes, é recomendável atualizar o nome do tema no arquivo
ReadMe
.
3. Personalizar um tema customize-the-theme
Você pode personalizar componentes individuais ou fazer alterações no nível do tema usando variáveis globais de um tema. Quaisquer alterações feitas nas variáveis globais afetam todos os componentes individuais. Por exemplo, você pode usar variáveis Globais para alterar a cor da borda de todos os componentes de um Formulário adaptável e uma cor de preenchimento brilhante para definir o CTA (Chamada para ação) usando o componente de botão:
Definir estilos de nível de tema theme-customization-global-level
O arquivo variable.scss
contém as variáveis globais do tema. Ao atualizar essas variáveis, é possível fazer alterações relacionadas ao estilo no nível do tema. Para aplicar estilos de nível de tema, siga estas etapas:
-
Abra o arquivo
<your-theme-sources>/src/site/_variables.scss
para edição. -
Altere o valor de qualquer propriedade. Por exemplo, a cor de erro padrão é
red
. Para alterar a cor do erro dered
parablue
, altere o código hexadecimal da cor de$errorvariable
. Por exemplo,$error: #196ee5
. -
Salvar e fechar o arquivo.
Da mesma forma, você pode usar o arquivo variable.scss
para definir a família e o tipo de fonte, as cores do tema e da fonte, o tamanho da fonte, o espaçamento do tema, o ícone de erro, os estilos de borda do tema e mais variáveis que afetam vários componentes do Formulário adaptável.
Definir estilos de nível de componente component-based-customization
Você também pode alterar a fonte, a cor, o tamanho e outras propriedades CSS de um componente principal do Formulário adaptável específico. Por exemplo, botão, caixa de seleção, container, rodapé e muito mais. Você pode estilizar um botão ou caixa de seleção editando o arquivo CSS do componente específico para alinhá-lo ao estilo de sua organização. Para personalizar o estilo de um componente:
-
Abra o arquivo
<your-theme-sources>/src/components/<component>/<component.scss>
para edição. Por exemplo, para alterar a cor da fonte do componente de botão, abra o arquivo<your-theme-sources>/src/components/button/button.scss
. -
Altere o valor de qualquer de acordo com suas necessidades. Por exemplo, para alterar a cor do componente de botão ao passar o mouse para
green
, altere o valor da propriedadecolor: $white
na classecmp-adaptiveform-button__widget:hover
para o código hexadecimal#12B453
ou qualquer outra sombra degreen
. O código final é semelhante ao seguinte:code language-none .cmp-adaptiveform-button__widget:hover { background: $dark-gray; color: #12B453; }
-
Salvar e fechar o arquivo.
Quando um estilo é definido no nível do tema e do componente, o estilo definido no nível do componente tem prioridade.
4. Testar um tema personalizado test-the-theme
Para visualizar e testar as alterações no ambiente local e personalizar o tema de acordo com os requisitos para diferentes componentes AEM, execute as seguintes etapas:
4.1. Configurar um ambiente local para testes rename-env-file-theme-folder
-
Abra a pasta de temas no IDE. Por exemplo, abra a pasta
aem-forms-theme-canvas
no editor de código do Visual Studio. -
Renomeie o arquivo
env_template
para o arquivo.env
na pasta de temas e adicione os seguintes parâmetros:code language-none * **AEM url** AEM_URL=https://[author-instance] * **AEM Adaptive form name** AEM_ADAPTIVE_FORM=Form_name * **AEM proxy port** AEM_PROXY_PORT=7000
Por exemplo, a URL do formulário é
http://localhost:4502/editor.html/content/forms/af/contactusform.html
. Portanto, os valores de:- AEM_URL =
http://localhost:4502/
- AEM_ADAPTIVE_FORM =
contactusform
- AEM_URL =
-
Salve o arquivo.
4.2 Testar o tema usando um ambiente local start-a-local-proxy-server
-
Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta de temas é
aem-forms-theme-canvas
. -
Abra o prompt de comando ou o terminal.
-
Execute
npm install
para instalar as dependências. -
Execute
npm run live
para visualizar o formulário com o tema atualizado em seu navegador local.note note NOTE Se ocorrer um erro durante a execução do comando npm run live
, execute os seguintes comandos antes do comandonpm run live
:npm install parcel --save-dev
npm i @parcel/transformer-sass
Esta é uma implantação ativa. Assim, sempre que você fizer alterações e salvar os arquivos _variables.scss
e button.scss
, o servidor selecionará automaticamente as alterações e visualizará a saída mais recente. A linha [Browsersync] File event [change]
significa que o servidor reconheceu as alterações mais recentes e está implantando as alterações no ambiente local.
Após seguir os exemplos de estilo de um Formulário adaptável (componentes principais) no nível do tema e no nível do componente para personalizações de tema, as mensagens de erro de um Formulário adaptável são alteradas para a cor blue
, enquanto a cor do rótulo do componente de botão é alterada para green
ao passar o mouse.
Visualizando estilo de nível de tema
Visualizando estilo de nível de componente
A personalização de um tema ajuda a projetar as pesquisas personalizadas para o Forms adaptável baseado em Componentes principais de acordo com os requisitos organizacionais.
Testar o tema para formulários hospedados em um ambiente de Cloud Service
Você também pode testar o tema do Formulário adaptável hospedado na instância as a Cloud Service do AEM Forms. Para configurar e definir o ambiente local para o teste dos temas com o Forms adaptável hospedado na instância da nuvem, execute as seguintes etapas:
-
Abra a pasta de temas no IDE. Por exemplo, abra a pasta
aem-forms-theme-canvas
no editor de código do Visual Studio. -
Renomeie o arquivo
env_template
para o arquivo.env
e adicione os seguintes parâmetros:code language-none * **AEM url** AEM_URL=https://[author-instance] * **AEM Adaptive form name** AEM_ADAPTIVE_FORM=Form_name * **AEM proxy port** AEM_PROXY_PORT=7000
Por exemplo, a URL do formulário no ambiente de nuvem é
https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html
. Portanto, os valores de:- AEM_URL =
https://author-XXXX-cmstg.adobeaemcloud.com/
- AEM_ADAPTIVE_FORM =
contactusform
- AEM_URL =
-
Salve o arquivo.
-
Crie um usuário local.
note note NOTE Para criar um usuário local: - Vá para a Página Inicial do AEM > Ferramentas > Segurança > Usuários.
- Certifique-se de que o usuário é membro do grupo
forms-users
.
-
Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta de temas é
aem-forms-theme-canvas
. -
Execute
npm run live
e você será redirecionado a um navegador local. -
Clique em
SIGN IN LOCALLY (ADMIN TASKS ONLY)
e faça logon usando as credenciais do usuário local.
Você pode visualizar o Formulário adaptável com as alterações mais recentes. Quando estiver satisfeito com as modificações feitas em uma pasta de tema, implante o tema no ambiente do AEM Cloud Service usando o pipeline de front-end.
5. Implantar um tema deploy-the-theme
Para implantar o tema no ambiente Cloud Service usando o pipeline de front-end:
5.1 Criar um repositório para o tema create-a-new-theme-repo
Você precisa de um repositório para implantar o tema. Faça logon no repositório do AEM Cloud Manager e adicione um novo repositório para o tema.
-
Crie um novo repositório para um tema clicando em Repositórios > Adicionar repositório.
-
Especifique o Nome do Repositório na caixa de diálogo Adicionar Repositório. Por exemplo, o nome fornecido é
custom-canvas-theme-repo
. -
Clique em Salvar.
-
Clique em Copiar URL do Repositório para copiar a URL do repositório.
note note NOTE - Você pode usar um único repositório para vários temas.
- Para implantar temas diferentes, é necessário criar pipelines de front-end separados.
- Por exemplo, você pode usar o mesmo repositório, como
custom-canvas-theme-repo
, para o tema da Tela, o tema da WKND e o tema do EASEL. No entanto, para implantar os temas, é necessário criar pipelines de front-end separados. Personalizações futuras para um tema específico são implantadas usando o pipeline de front-end correspondente.
5.2. Enviar as alterações para o repositório committing-the-changes
Agora, envie as alterações para o repositório de temas do seu Cloud Service AEM Forms.
-
Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta de temas é
aem-forms-theme-canvas
. -
Abra o prompt de comando ou o terminal.
-
Execute o seguinte comando na ordem listada:
code language-none git remote add [alias-name-for-repository] [URL of repository] git add . git commit git push [name-for-createdrepository]
Por exemplo:
code language-none git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/ git add . git commit git push canvascloudthemerepo
5.3 Executar o pipeline de front-end run-a-frontend-pipeline
O tema é implantado usando o pipeline de front-end. Para implantar o tema, execute as seguintes etapas:
-
Faça logon no repositório do AEM Cloud Manager.
-
Clique no botão Adicionar da seção Pipelines.
-
Selecione Adicionar pipeline de não produção ou Adicionar pipeline de produção com base no ambiente de Cloud Service. Por exemplo, aqui a opção Adicionar pipeline de produção está selecionada.
-
Na caixa de diálogo Adicionar pipeline de produção como parte das etapas Configuração, especifique o nome do pipeline. Por exemplo, o nome do pipeline é
customcanvastheme
. -
Clique em Continuar.
-
Selecione as opções Implantação direcionada > Código de front-end, em
as etapas Código Source. -
Selecione os valores de Repositório e Ramificação Git que têm as alterações mais recentes. Por exemplo, aqui o nome do repositório selecionado é
custom-canvas-theme-repo
e a ramificação Git émain
. -
Selecione o Local do Código como
/
, se suas alterações estiverem presentes na pasta raiz. -
Clique em Salvar.
Após a conclusão da configuração do pipeline, o cartão de chamada para ação é atualizado.
-
Clique com o botão direito do mouse no pipeline criado.
-
Clique em Executar.
Quando a criação for concluída, o tema ficará disponível na instância do autor para uso. Ele aparece na guia Style do assistente de criação do Formulário adaptável ao criar um Formulário adaptável.
O tema personalizado ajuda a criar uma experiência com a marca para o Forms adaptável baseado nos Componentes principais.
Aplicar um tema a um formulário adaptável using-theme-in-adaptive-form
As etapas para aplicar um tema a um Formulário adaptável são:
-
Faça logon na instância de autor do AEM Forms.
-
Selecione Adobe Experience Manager > Forms > Forms e Documentos.
-
Clique em Criar > Forms Adaptável. O assistente para criação do Formulário adaptável é aberto.
-
Selecione o modelo do componente principal na guia Source.
-
Selecione o tema na guia Style.
-
Clique em Criar.
Os temas do formulário adaptável são usados como parte de um modelo de formulário adaptável para definir o estilo ao criar um formulário adaptável.
Práticas recomendadas best-practices
-
Evitando ativos de outro tema
Ao editar um tema, você pode procurar e adicionar ativos (como imagens) de outros temas. Por exemplo, você está editando o fundo de uma página. Por exemplo, ao selecionar Página
Você pode enfrentar problemas com seu tema atual se um ativo for adicionado de outro tema e o outro tema for movido ou excluído. É recomendável evitar a navegação e adicionar ativos de outros temas.
-
Alterando a largura do layout do painel de contêiner
Não é recomendável alterar a largura do layout do painel de contêiner. Quando você especifica a largura de um painel de contêiner, ele se torna estático e não se adapta a exibições diferentes.
Perguntas frequentes faq
P: Qual personalização tem prioridade ao fazer personalizações em uma pasta de tema no nível global e no nível do componente?
Ans: Quando as personalizações são feitas no nível global e no nível do componente, a personalização no nível do componente tem prioridade.
Consulte também see-also
- Criar um formulário adaptável de AEM
- Adicionar um formulário adaptável de AEM à página do AEM Sites
- Aplicar temas a um formulário adaptável de AEM
- Adicionar componentes a um Formulário adaptável para AEM
- Usar CAPTCHA em um formulário adaptável de AEM
- Gerar uma versão de PDF (DoR) de um formulário adaptável AEM
- Traduzir um formulário adaptável de AEM
- Ativar o Adobe Analytics para um formulário adaptável para rastrear o uso do formulário
- Conectar o formulário adaptável ao Microsoft SharePoint
- Conectar o formulário adaptável ao Microsoft Power Automate
- Conectar o formulário adaptável ao Microsoft OneDrive
- Conectar o formulário adaptável ao armazenamento de blobs do Microsoft Azure
- Conectar o formulário adaptável ao Salesforce
- Usar o Adobe Sign em um formulário adaptável AEM
- Adicionar uma nova localidade para um Formulário adaptável
- Enviar dados do Formulário adaptável a um banco de dados
- Enviar dados do formulário adaptável para um endpoint REST
- Enviar dados do formulário adaptável para o fluxo de trabalho do AEM
- Usar o Forms Portal para listar AEM Adaptive Forms em um site de AEM
- Adicionar versões, comentários e anotações a um Formulário adaptável
- Comparar Forms adaptável
- Definir layout de formulários para diferentes tamanhos de tela e tipos de dispositivo
- Gerar documento de registro para o Forms adaptável (componentes principais)
- Criar um Forms adaptável com seções repetíveis
- Modelos de temas de exemplo e modelos de dados de formulário
- Habilitar os componentes principais de formulários adaptáveis no AEM Forms as a Cloud Service e no ambiente de desenvolvimento local