Custom components in AF Themes Editor

[#1]

Hey,

we´re working on a project for AEM 6.5 adaptive forms and we need to create custom components. The customer needs to style these components with the help of the themes editor and apply different themes to their forms.

As long as we can handle all styling of the components inside the themes editor (styles handled in the themes-json) there is no problem. At some point we need the help of some LESS which is included inside a clientlib connected to the theme. (e.g. there is no possibility to style link tags inside the theme editor...)

I can add the custom classes with the help of the styleConfig node, but the changes are only available inside the theme editor and not in the adaptive form using the theme.

Is there a documentation how to include custom components with custom styles in the theme editor with best practices or is there anybody who did more than changing some colors or sizes of the ootb forms components?

(I know the standard documentation, but that handles only very simple use cases)

In the end we want to have a base layout written in LESS which is displayed in the theme editor and the form and the possibility to change some colors or other properties in the theme editor

Best regards

Alex

[#2]

Hi Alex,

I totally get the situation you're mentioning about. In such a case, I would prefer that the person makes style changes to the form using inline style editor.  Of course, this might not hold good for the custom component again.

Did you manage to write your own components with custom styles AND you are still able to change the style (or at least some of them) with the help of the Forms Theme Editor?

->I haven't really tried this but let me check this once internally.

[#3]

Hey Mayank,

thanks for you response! I definitely want to have my classes separated, the problem is the connection to the theme editor. As long as you as a developer are the only one responsible for the styles there is no problem: custom components, styles, js and so on... But if you serve your adaptive forms application and the customer (maybe a marketing person) wants to change some styles with the help of that theme editor UI you run into troubles if you have custom components

Did you manage to write your own components with custom styles AND you are still able to change the style (or at least some of them) with the help of the Forms Theme Editor?

Best regards

Alex

[#4]

Hi Alex,

Why not let the custom component and its's associated classes be in the client libs only and you can map the client categories in the Adaptive form properties. This will create a distiction between your custom client libs and OOTB classes and is a recommended practise.

I prefer having my own stylesheet for the form and edit it based on the requirement.