How can we make this custom component authorable inside the wizard component, just like the standard Adaptive Form components?

[varaande]

We are using AEM 6.5.21 for an Adaptive Forms–only project (no Sites or DAM setup).

In the wizard layout, we're trying to add a custom component (dmaftitle) using this code:

<sly data-sly-resource="${resource @ resourceType='dmaf/components/dmaftitle'}"></sly>

The component shows up in the form, but we can’t author or edit it in the Touch UI editor.

How can we make this custom component authorable inside the wizard component, just like the standard Adaptive Form components?

[Sakshi5]

Hi @varaande , You will need to go to template and allow the custom component in content policy of wizard.

[varaande]

@Sakshi5 
Thank you. Instead of updating the template manually, we would like to add the custom component programmatically inside AF wizard core component  , in a way that provides the same authoring experience. That means the properties of the programmatically added component should be fully authorable, just like when the component is added through the Touch UI interface.

[Sakshi5]

@varaande Can you first try enabling the component via template and see if that is editable. If it is not then there is an issue with component definition. Otherwise just adding the component in cq:template would make it work. As Wizard navigates through all its children.
Also we would be keen in knowing  the usecase which you wish to achieve using this?

[varaande]

@Sakshi5 

We enabled the component at the template level, and it is working as expected. However, the issue arises when adding the component programmatically inside the Wizard component, based on a dialog field value.

Even though the component gets added correctly to the JCR, it lacks authoring capability in the editor. 

Use Case:
We are trying to dynamically add components to a Wizard step in an Adaptive Form (using Core Components), based on a value selected/configured in the Wizard's dialog.

The core issue seems to be that dynamically added components (based on dialog input) are not properly initialized with the authoring metadata or structure required for editing within AEM.

[Sakshi5 · Accepted solution]

@varaande Basically you need a node under wizard, to make the component editable in authouring. You can make it part of your cq:template of your custom wizard. Anything changed in authouring will be then saved on that node.

[sudhansh]

@varaande Could you help confirm if above response provides the clarity and meets your requirement.

[varaande]

@sudhansh @Sakshi5 

As part of creating our Adaptive Form proxy based on Core Components, we’ve already added the cq:template node. However, the components that we add programmatically are still not editable in authoring mode — meaning we’re unable to access their Touch UI properties.

This issue has been present from the beginning, and we’re trying to identify why authoring capabilities are missing despite the template setup.(refer below screens)
cq:template (node)

wizard.html (programatically added but missing authoring capablities but component added not able view touch UI component properties to author)

[Sakshi5]

@varaande What I meant was you need a node for the custom component, that is resource in following:

should be backed by a node. That is, either this can be a child of wizard in cq:template.
Currently it seems you are just re-rendering wizard resource (node of wizard sling resource type), with a different custom resource type at server. In authouring since sling resourcetype is of wizard, wizard's dialog will showup. You can also extend wizard, and add the additional properties to your custom wizard component dialog.