DocumentationAEM 6.5User Guide

Create or customize an Adaptive Form theme introduction-to-theme

Last update: Mon Jun 24 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Applies to:
  • Experience Manager 6.5

CREATED FOR:

  • Admin
  • Developer
Version
Article link
AEM as a Cloud Service
Click here
AEM 6.5
This Article

In AEM Forms 6.5, a theme is an AEM client library that you use to define the styles (look and feel) for an Adaptive Form. 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. A theme is managed independently without a reference to an Adaptive Form and can be reused across multiple Adaptive Forms.

Available themes available-theme

AEM 6.5 environment provides the below listed themes for Core Components based Adaptive Forms:

Understanding structure of the themes understanding-structure-of-theme

A theme is a package that encompasses the CSS file, JavaScript files, and resources (like icons) that define the style of your Adaptive Forms. An Adaptive Form theme follows a specific organization, consisting of the following components:

  • src/theme.scss: This folder includes the CSS file that has a broad impact on the entire theme. It serves as a centralized location to define and manage the styling and behavior of your theme. By making edits to this file, you can make changes that are applied universally throughout the theme, influencing the appearance and functionality of both your Adaptive Forms and AEM Sites Pages.

  • src/site: This folder contains CSS files that are applied to an entire AEM Site’s page. These files consist of code and styles that affect the overall functionality and layout of your AEM Site’s page. Any modifications made here is reflected across all pages of your Site.

  • src/components: The CSS files in this folder are designed for individual AEM core components. Each dedicated folder for a component includes a .scss file that styles that particular component within an Adaptive Form. For instance, the /src/components/button/_button.scss file contains style information for the Adaptive Forms Button component.

    Canvas Theme Structure

  • src/resources: This folder contains static files such as icons, logos, and fonts. These resources are used to enhance the visual elements and overall design of your theme.

Create a theme

AEM Forms 6.5 provides the below listed themes for Core Components based Adaptive Forms.

You can customize any of these themes to create a theme.

Customize a theme customize-a-theme-core-components-based-adaptive-forms

Customizing a theme refers to the process of modifying and personalizing the appearance of a theme. When you customize a theme, you change its design elements, layout, colors, typography, and sometimes the underlying code. This lets you create a unique and tailored look for your website or application while maintaining the basic structure and functionality provided by the theme.

NOTE
  • Use the Package Manager to deploy a theme on all the Author and Publish instances.
  • A theme client library is imported or exported via Package Manager like any other package.

Prerequisites to customize a theme prerequisites

  • Enable Adaptive Forms Core Components for your environment.

  • Install the latest release of Apache Maven. Apache Maven is a build automation tool commonly used for Java™ projects. Installing the latest release ensures you have the necessary dependencies for theme customization.

  • Learn how to create a client library in Adobe Experience Manager. AEM provides client libraries, which let you store your client-side code in the repository, organize it into categories, and define when and how each category of code is to be served to the client.

  • Install a plain text editor. For example, Microsoft® Visual Studio Code. Using a plain text editor such as Microsoft® Visual Studio Code provides a user-friendly environment for editing and modifying theme files.

  • Ensure you AEM Forms environment is up and running.

Considerations to customize a theme consideration

  • Ensure that you use the Archetype project used to enable Adaptive Forms Core Components on your environment to customize your themes.

  • When publishing an Adaptive Form, the client libraries are not automatically published at the Publish instance. Ensure that you manually publish the client library referenced in an Adaptive Form to your Publish environments.

  • Adobe recommends not to change the class names of client libraries.

Customize a theme customize-a-theme-core-components

Creating or customizing a theme is a multi-step process. Perform the steps in listed order to create/customize the theme:

  1. Clone a theme
  2. Customize the appearance of the theme
  3. Ready the theme for local deployment
  4. Deploy the theme on a local environment
  5. Deploy the theme on production environment

The examples provided in the document are based on the Canvas theme, but you can clone any theme and customize it using the same instructions. These instructions are applicable to any theme, allowing you to modify themes according to your specific needs.

1. Clone the Git repository of theme clone-git-repo-of-theme

To clone a theme for Core Components based Adaptive Forms, choose one of the following themes:

Perform the following instructions to clone a theme:

  1. Open the command prompt or terminal window on your local development environment.

  2. Run the git clone command to clone a theme.

    code language-none 
       git clone [Path of Git Repository of the theme]

    Replace the [Path of Git Repository of the theme] with the actual URL of the corresponding Git Repository of the theme

    For example, to clone the Canvas theme, execute the following command:

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

  3. Select Trust the authors of all files in the parent folder and click Yes, I trust the authors.

After executing the command successfully, you have a local copy of the theme available on your machine in the aem-forms-theme-canvas folder.

2. Customize the theme customize-the-theme

You have the flexibility to customize individual components or make theme-level changes using the global variables of a theme. Modifying global variables have a cascading effect on all individual components. For instance, you can utilize global variables to change the border color of all components within an Adaptive Form or apply a vibrant fill color to Call to Action (CTA) buttons. You can:

Set theme level styles theme-customization-global-level

The variable.scss file contains the global variables of the theme. By updating these variables, you can make style-related changes at the theme level. To apply theme-level styles, follow these steps:

  1. Open the <your-theme-sources>/src/site/_variables.scss file for editing.

  2. Change the value of any property. For example, the default error color is red. To change the error color from red to blue, change the color hex code of the $errorvariable. For example, $error: #196ee5.

    Example: Error color set to blue

  3. Save and close the file.

Similarly, you can use the variable.scss file to set font family and type, theme and font colors, font size, theme spacing, error icon, theme border styles, and more variable that impact multiple Adaptive Form components.

Set component level styles component-based-customization

You also have the option to customize the font, color, size, and other CSS properties of specific Adaptive Form core components, such as buttons, checkboxes, containers, footers, and more. By editing the CSS file associated with the specific component, you can align its style with your organization’s branding. To customize the style of a component, follow these steps:

  1. Open the file <your-theme-sources>/src/components/<component>/<component.scss> for editing. For example, to change the font color of the button component, open the <your-theme-sources>/src/components/button/button.scss, file .

  2. Change the value of any as per your requirements. For example, to change the color of the button component on mouse hover to Green, change the value of the color: $white property in the cmp-adaptiveform-button__widget:hover class to hex code #12b453 or any other shade of green. The final code looks like the following:

    code language-none 
     .cmp-adaptiveform-button__widget:hover {
 background: $dark-gray;
 color: #12b453;
 }

  3. Save and close the file.

NOTE
When a style is defined both at theme and component level, the style defined at the component level takes priority.

3. Ready the theme for deployment generate-the-clientlib

To deploy a theme to an AEM instance, it needs to be converted into a Client Library. Follow these steps to convert the theme into a client library:

  1. Open the command prompt or terminal window.

  2. Navigate to the <your-theme-sources> folder. For example, C:\aem-forms-theme-canvas

  3. Run the following command:

    code language-none 
       npm run create-clientlib --category=adaptiveform.theme.[yourtheme]

    Replace [yourtheme] with the name of your custom theme. For example, if the name of the custom theme is customcanvastheme, run the following command

    code language-none 
        npm run create-clientlib --category=adaptiveform.theme.customcanvastheme

    On successful execution of the command, a client library folder is created at themerepo\theme-clientlibs\[yourtheme].

    Client Libary Generation

    Client Libary location

4. Deploy the theme on a local environment deploy-the-theme-on-a-local-environment

To deploy the theme to your local development or testing environment, follow these steps:

  1. Copy the Client Library, created in the previous section, to your Archetype project, at the following path:

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

  2. Open the Command Prompt or Terminal.

  3. Navigate to the root directory of your AEM Archetype project, the project used to enable Adaptive Form Core Components.

  4. Run the following command to deploy the custom theme on your environment:

    mvn clean install

    Client Libary Build

5. Deploy a theme on your production environment deploy-theme

Once you have successfully tested the theme on your local development environment, you can proceed to deploy the theme to your production environments, including both the Author and Publish instances. Follow these steps to deploy the theme on your production environments:

  1. Log in to your AEM environment.
  2. Open the Package Manager. The default URL is https://localhost:4502/crx/packmgr/index.jsp.
  3. Click Upload Package and click Browse.
  4. Navigate to and select [AEM Archetype Project Folder]\all\target[appid].all-[version].zip. Click Open.
  5. Click Install. Repeat the step on all the production environments.

After the package is installed the theme is available for selection.

Theme Client Library

NOTE
In case you encounter difficulty accessing the login dialog on a publish instance to install the package through the Package Manager, try logging in through the following URL: http://[Publish Server URL]:[PORT]/system/console. This allows access to log in to Publish instance, allowing you to proceed with the installation process.

Apply a theme to an Adaptive Form using-theme-in-adaptive-form

Steps to apply a theme to an Adaptive Form are:

  1. Log in to your local AEM author instance.

  2. Enter your credentials on the Experience Manager login page. Select Adobe Experience Manager > Forms > Forms & Documents.

  3. Click Create > Adaptive Forms.

  4. Select an Adaptive Forms Core Components template and click Next. The Add Properties appears

  5. Specify the Name for your Adaptive Form.

    note note
    NOTE
    • By default, the adaptiveform.theme.canvas3 theme is selected.
    • You can choose a different theme from the Theme Client Library drop-down menu.

  6. Click Create.

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

Delete a theme delete-a-theme

To remove unused or unwanted themes:

  1. Log in to your Author instance.
  2. Open http://[Publish Server URL]:[PORT]/crx/de/index.jsp
  3. Navigate to apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme].
  4. Delete the theme folder and save the changes.

Frequently Asked Question faq

Q: Which customization takes priority when making customizations in a theme folder at both the global level and component level?

Ans: When a style is defined at both the theme and component levels, the style defined at the component level takes precedence.

Q: What steps should be taken if the custom theme is not visible in the Theme Client Library?

Ans: If your custom theme does not appear in the Theme Client Library drop-down, follow these steps:

  1. Navigate to the location where you have added your custom theme client library. The recommended path is /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>.

  2. Open the .content.xml file and include the following metadata:

    code language-none 
    
    formstheme:true
    allowproxy:true

  3. Save the file and redeploy the theme.

See also

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2