Expand my Community achievements bar.

SOLVED

Creating a Theme for Adaptive Forms Components

Avatar

Level 2

Tech Stack:

On-prem AEM 6.5

Service pack 6.5.16

Forms Add-On 6.0.856 (adobe-aemfd-osx-pkg-6.0.856.zip)

 

In short, I am trying to customize a theme applying to our adaptive forms. I am quite confused, however, by the fact that most/all of the documentation I find appears to be referring to a different set of components (perhaps the WCM Core Components?) than those with which we are working inside the forms. For example, I followed the instructions found here. I pulled down the Easel theme repo and dug through the source code, and all of the components under `src/components` appear to be the WCM Core Components variety, with CSS classes prefixed with "cmp-<component_type>". I ran the clientlib generator per the Github docs just to see what the output would be and it was similar.

 

FYI- I am trying to customize the US Web Design Standards theme that comes with the Forms Add-On package. When I inspect the theme.css file under etc/clientlibs for that theme, all of the CSS for these components is referring to components that are prefixed with "guide", for example, guidebutton, guidecheckbox, and so on. I found said components under /libs/fd/af/components/. When I create a test adaptive form and add components to it and inspect the DOM in preview mode, I see CSS classes that match that paradigm, ex., guidedatepicker has a cssSelector prop of .guideFieldWidget.dateTimeEdit input which matches what I see in the DOM. I found this repo and the list of components seems to match the types of components I see in the adaptive forms author sidekick (see attached image), but when I further read the documentation (say, Button), it again implies a wholly different CSS class style (prefixed with "cmp-adaptiveform-<component_type>") than what I see actually being applied.

 

The source of all of this is that I am a BE Engineer trying to customize the theme for our Forms Authors to match our desired style guide. I understand that they can individually use the Theme Editor to fix things here and there on the fly, but that's not easily reproducible across environments, and it's prone to error (they aren't CSS or JS experts). Also, I'd like it (the theme clientlib) to be codified and portable so that future developers can pull down a repo, build and install a package, and get right to developing locally without a lot of hassle or reinventing the wheel. I appreciate that this is a lengthy post, but I have spent a couple of days trying to suss out the correct way to do this and I am still not sure. Thanks for your help.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

@SeanCu there is two approaches that can get you started fast:

1. You are correct that the OOTB theme might have guide classes, so I suggest you create a new theme from the available theme library go to the theme editor, and edit the object styling without worrying about the under-the-hood.

2. Override the styles using the client libs approach.

View solution in original post

1 Reply

Avatar

Correct answer by
Employee Advisor

@SeanCu there is two approaches that can get you started fast:

1. You are correct that the OOTB theme might have guide classes, so I suggest you create a new theme from the available theme library go to the theme editor, and edit the object styling without worrying about the under-the-hood.

2. Override the styles using the client libs approach.