Custom theme for Core Component Adaptive Form not visible

[rockstar234]

Hi All,

I am using adaptive form core component in aem as a cloud. After create a new theme, i am creating a core component adaptive form buts its not visible and not available to select only the default theme Canvas is available.

Can some the correct way to create theme for core component adaptive form and how to use it while creating the form, so use that on localhost aem server.

[giuseppebaglio]

hi @rockstar234, 

For guidance on creating and using themes for Core Component Adaptive Forms, please refer to the following official Adobe documentation and video tutorials:

Official Adobe Experience Manager Documentation

• Create Core Components based Adaptive Forms: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/forms/adaptive-forms-core-c... 

• Using Themes in Core Component Adaptive Forms: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/forms/adaptive-f...

• Creating Custom Adaptive Form Themes: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/forms/customize-aem-forms/c...

• Introduction to Authoring Adaptive Forms: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/forms/getting-started/intro...

Helpful YouTube Video Guides

• How to Create New Theme in AEM Forms: https://www.youtube.com/watch?v=SlpjX7IKn8A

• Creating an Adaptive Form in AEM Forms: https://www.youtube.com/watch?v=qgTvo6kXj24

• Build Forms Quickly with AEM Forms Core Components: https://www.youtube.com/watch?v=zXx6PqHSszY

These resources cover the step-by-step process of cloning and customizing base themes like the Canvas theme, registering and deploying themes in your AEM environment (both local and cloud), and selecting/applying themes in the authoring interface of Adaptive Forms.

If your custom theme does not appear when creating adaptive forms, please ensure the theme client library is correctly deployed and accessible with appropriate permissions in your AEM instance.

[rockstar234]

@giuseppebaglio  @ManviSharma Thanks for sharing the link. I am looking for specific steps for create a new theme and deploy on the localhost. this link more is how to push and deploy on cloud environment.

Can you share how i can deploy theme on my localhost and use the theme in my new or existing core component adaptive form

[giuseppebaglio]

Here are the specific steps to create a new theme for Core Component Adaptive Forms and deploy it on your local AEM instance:

• Clone the Base Theme (Canvas) Repository: Adobe provides the Canvas theme as the default base. You can clone it from Adobe's GitHub repository, which gives you the baseline code to customize:

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

• Customize Theme Styles: Modify the SCSS and related resources under the cloned folder to customize styles according to your needs. Typically, you edit files under src/theme.scss and component-specific folders.

• Build the Theme Client Library: Run the build tasks using Node.js and npm (or the provided build scripts) to compile SCSS and package the theme into an AEM client library. More info in the repo's README.md:

npm install
npm run build
npm run create-clientlib --category="adaptiveform.theme.yourtheme"

         Last command will create an AEM clientlib inside the folder theme-clientlibs/adaptiveform.theme.yourtheme.

• Deploy to AEM:

  • Prepare files:

    • Manually copying the generated client library folder into your AEM repository directory, usually /apps/myproject/clientlibs.

    • Bring all the files of the repo aem-forms-theme-canvas.git inside your already Maven project:
      • You can replace the ui.frontend module with these files.
      • Add another mvn module similar to ui.frontend. You have to add this module to the project's mvn build .

  • Now you can build and deploy the theme as an AEM Maven project by leveraging Maven commands (mvn clean install -PautoInstallPackage).

• Finally, use the theme in the Adaptive Form while authoring

[rockstar234]

@giuseppebaglio Followed the steps which you have shared. in my case kept name as adaptiveform.theme.google  code id deployed on local machine i can see the changes in crx/de refer screenshot below. but while creating core component adaptive form or existing form i dont see new theme available. refer below screenshot.  

Can you please if I am missing any steps?

[giuseppebaglio]

Check that your theme’s client library folder /ui.apps/src/main/content/jcr_root/apps/[AEM Project Folder]/clientlibs/<yourtheme> has the correct properties with "formstheme" property set to true. Example snippet:

formsTheme:true
allowProxy:true

Source: here

[rockstar234]

@giuseppebaglio properties are present and true. I am using AEM as a cloud but see how to push those theme on AEM DS localhost.

[giuseppebaglio]

Could you please go through this guide from the beginning to check if anything is missing?: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/forms/adaptive-forms-core-c... 

[ManviSharma]

Hello @rockstar234 ,

your custom Adaptive Form theme must be packaged as an AEM clientlib (category adaptiveform.theme.<your-name>), deployed on the Author instance (and published to Publish), and then selected from the Adaptive Form creation / form properties. If you only see Canvas, it means your custom theme clientlib isn’t deployed/registered correctly (or you didn’t create it from the theme sources).

Reference doc:
https://experienceleague.adobe.com/en/docs/experience-manager-65/content/forms/adaptive-forms-core-c...

[rockstar234]

@ManviSharma Can you please share how create theme and upload to local AEM SDK server instead of proxy. so later on I can use the same theme for my dev,qa,stage and prod environment.