Themes in Adaptive Forms (Core Components)

You can create and apply themes to stylize an Adaptive Form using core components. A theme contains styling details for the components and panels. Styles include properties such as background colors, state colors, transparency, alignment, and size. When you apply a theme, the specified style reflects on the corresponding components. Theme is managed independently without a reference to an Adaptive Form.

When you create an Adaptive Form using core components, the Out-of-the-Box themes appear under the Style tab. By default, only the Canvas theme is available.

Using Canvas theme in Adaptive Forms using core components

Steps to apply theme to an Adaptive Form are:

1. Log in to your AEM Forms author instance.

2. Tap Adobe Experience Manager > Forms > Forms & Documents.

3. Click Create > Adaptive Forms. The wizard for creating Adaptive Form opens.

4. Select the core component template in the Source tab.

   NOTE

   When you create an Adaptive Form with core components, you see the Canvas theme under the Style tab. This is the only Out-of-the-Box theme available right now. But you can change the theme to your liking and save it for future use by setting up a frontend pipeline.

5. Select the Canvas theme in the Style tab.

6. Click Create.

Adaptive Form themes are used as part of an Adaptive Form template to define styling while creating an Adaptive Form.

Customize the theme

To customize a theme,

• set up a Pipeline in Cloud Manager
• Configure a user with the contributor role.
• You should have a basic knowledge of Git and Cloud Service Git repositories.

To customize a Canvas theme:

1. Clone the Canvas theme
2. Understand the structure of the theme
3. Change name in package.json and package_lock.json
4. Create the .env file in the theme folder
5. Start the local proxy server
6. Customize the theme
7. Commit the changes
8. Deploy the pipeline

1. Clone the Canvas theme

Open command prompt and run the following command to clone the canvas theme:

git clone https://github.com/adobe/aem-forms-theme-canvas

2. Understand the structure of the theme

An Adaptive Form theme is a package containing the CSS, JavaScript, and static resources that define the styling of your form and complies with the structure of an Adaptive Form theme. An Adaptive Form theme has the following structure typical of a front-end project:

• src/components: JavaScript & CSS files specific to AEM core components
• src/resources: Static files like icons, logos, and fonts
• src/site: JavaScript & CSS files that apply to the entire AEM Sites page
• src/theme.ts: The main entry point of your JavaScript & CSS theme
• src\theme.scss: JavaScript & CSS files that apply to the entire theme

The src/components folder has JavaScript and CSS files specific for all AEM core components such as button, checkbox, container, footer etc. You can style button or checkbox by editing the CSS file specific to the AEM component.

To customize the theme, you can start the local proxy server to see the theme customizations in real time based on actual AEM content.

3. Change name in package.json and package_lock.json of Canvas theme

Update the name and version of Canvas theme in the package.json and package_lock.json files.

4. Create the .env file in a theme folder

Create a .env file in the theme folder and add the following parameters:

• AEM url
  AEM_URL=https://[author-instance]

• AEM site name
  AEM_ADAPTIVE_FORM=Form_name

• AEM proxy port
  AEM_PROXY_PORT=7000

5. Start a local proxy server

1. From the command line, navigate to the root of the theme on your local machine.

2. Execute npm install and npm retrieves dependencies and installs the project.

3. Execute npm run live and the proxy server starts.

   

4. Tap or click SIGN IN LOCALLY (ADMIN TASKS ONLY) and sign in with the proxy user credentials provided to you by the AEM administrator.

   

   NOTE

   • Create a local user to login locally. Provide contributor role for the theme designer.
   • If you specify the AEM URL as http://localhost:[port]/ in the .env file of Canvas theme, you are directly redirected to the browser.

5. Once signed in, change the URL in the browser to point to the path to the sample content that the AEM administrator provided to you.

   • For example, if the path provided was /content/formname.html?wcmmode=disabled, change the URL to http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled

   

Navigate to an Adaptive Form to see Canvas theme applied to an Adaptive Form.

6. Customize the theme

1. In your editor, open the file <your-theme-sources>/src/site/_variables.scss.

   NOTE

   You can style all the Adaptive Form components in a Site directly by editing the site/_variables.scss file.

2. Edit the variable for the font colour to red.

   

   Style the different AEM components

   You can style the different components of an Adaptive Form by changing its CSS file in editor. There are different CSS folders for each Adaptive Form core component in the Canvas Theme folder.

   

   To specify styles for a specific component in theme editor, you can edit the CSS in a theme folder. For example, if you want to change the border color of a text box field, open the CSS file in editor and change its border color.

   

3. When you save the file, the proxy server recognizes the change via the line [Browsersync] File event [change].

   

4. Switching back to your browser of the local proxy server, the change is immediately visible.

   

The theme designer previews the changes in the local proxy server and customizes the theme according to the requirements for different AEM components.

Before committing the changes into the AEM Git repository, you need to access your Git repository information.

7. Commit the Changes

After making changes to the theme and testing it with a local proxy server, commit the changes to the Git repository of your AEM Forms Cloud Service. It makes the customized theme available in your Forms Cloud Service environment for Adaptive Forms authors to use.

Before you commit changes to the Git repository of your AEM Forms Cloud Service, you require a clone of the repository on your local machine. To clone the repository:

1. Create a new theme repository by clicking the Repositories option.

   

2. Click Add Repository and specify the Repository Name in the Add Repository dialog box. Click Save.

   

3. Click Copy Repository URL to copy the URL of the created repository.

   

4. Open the command prompt and clone the above created cloud repository.

   git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
   
   

5. Move the files of theme repository that you are editing into the cloud repository with a command similar to
   cp -r [source-theme-folder]/* [destination-cloud-repo]
   For example, use this command cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]

6. In the directory of the cloud repository, commit the theme files that you moved into with the following commands.

   git add .
   git commit -a -m "Adding theme files"
   git push
   

7. The customizations are pushed to the Git repository.

   

Your customizations are now safely stored in the Git repository.

8. Run the frontend pipeline

1. Create the front-end pipeline to deploy the customized theme. Learn how to set up a frontline pipeline to deploy customized theme.
2. Run the created frontend pipeline to deploy customized theme folder under the Style tab of an Adaptive Form creation wizard.

Example to customize the theme

1. Log in to your AEM Forms author instance.
2. Open an Adaptive Form created using core components.
3. Start the local proxy server using the command prompt and click SIGN IN LOCALLY (ADMIN TASKS ONLY).
4. Once signed in, you are redirected to the browser and see the applied theme.
5. Download the Canvas theme and extract the downloaded zip folder.
6. Open the extracted zip folder in your preferred editor.
7. Create a .env file in the theme folder and add parameters: AEM URL, AEM_ADAPTIVE_FORM and AEM_PROXY_PORT.
8. Open the CSS file of the textbox in the Canvas theme folder and change its border color to say red color and save the changes.
9. Reopen the browser again and you see the changes are reflected immediately in an Adaptive Form.
10. Move the canvas theme folder in your cloned repository.
11. Commit the changes and run the fronend pipeline.

Once the pipeline is executed, the theme is available under the Style tab.

Best practices

• Avoiding assets from another theme

  When you edit a theme, you can browse and add assets (such as images) from other themes. For example, you are editing the background of a page. For example, when you select Page > Background > Add > Image, you see a dialog that lets you browse and add images in other theme.

  You can face issues with your current theme if an asset is added from another theme, and the other theme is moved or deleted. It is recommended that you avoid browsing and adding assets from other themes.

• Changing container panel layout width

  Changing container panel layout width is not recommended. When you specify width of a container panel, it becomes static and does not adapt to different displays.

• Using form editor or theme editor for working with header and footer

  Use theme editor if you want to style header and footer using styling options such as font style, background, and transparency.
  If you want to provide information such as a logo image, company name in header, and copyright information in the footer, use the form editor options.

Business.Adobe.com resources