How to generate custom component that behaves like a panel

[adeivasigamani]

Hi Folks, 

I have a requirement, in which I need to generate a custom guide component, that when dragged and dropped into the form panel should create a Communication related fields in the form. is it possible to create such a component like a fragment in Livecycle designer, if yes, how to do the same.

Regards -

Ashok D

[varundua · Accepted solution]

Hi Ashok

Currently we do not support Designer like Fragments in Adaptive Forms. But there is a workaround with some known limitations to create a composite component (which can have multiple AF Fields/Panels) which when dropped onto an AF creates all the Fields/Panel in that Component. You can reuse the same component across multiple AFs. I am detailing out the steps for the same

1. Create an AF (choose the survey Template provided OOTB). Remove all the Panels/Fields except RootPanel.
2. Add the necessary Fields/Panels that you would want in your Fragment. Modify the labels, add expressions etc.
3. Navigate to CRXDE and copy the Panel component(present at /libs/fd/af/components/panel) and paste it in apps/mycompositecomponent and rename it to TestComponent
4. In the TestComponent node add sling:resourceSuperType property with the value /libs/fd/af/components/panel
5. Delete the panel.jsp and longDescription.jsp file.
6. Modify the icon.png, change the title, desc property as per your needs.
7. You have now created a new CQ Component. Leave other properties as is.
8. Navigate to the AF created in the 1st step (It must be present at /content/forms/af/ ). Find the rootPanel node inside the AF. Copy the items node.
9. Navigate to the TestComponent. Paste the items node copied in previous step inside cq:template node. You will also find a layout node inside the cq:Template. Leave it as is
10. Now create any AF or open any existing AF, you will see your TestComponent in the Sidekick.

Drop the TestComponent from the Sidekick and you will see all the Fields/Panels you created in step 2 being dropped in your AF.

I will reiterate that though this approach can be used to create reusable components like Communications Details but it is not comparable to Livecycle Fragments. The known limitations are

1. You won't get the custom styling changes or scripts you have added in the AF at step 2.
2. Updating the reusable component will not auto reflect the changes into the forms where it has been used.

Hope it makes sense and resolves your query.

Regards