Creating Form Fragment

Hi, in this video, we will take a look at creating an adaptive form fragment. While every form is designed for a specific purpose, there are some common segments in most forms, such as to provide or capture personal details like name and address, family details, spouse details, and so on. Form developers are required to create these common segments every time a new form is created. Adaptive forms provides a convenient mechanism to create form segments like a panel or a group of fields only once and reuse them across adaptive forms. These reusable and standalone segments are called adaptive form fragments. So to create an active form fragment, I’ve logged into AEM forms UI, go into Forms & Documents, I’ve created a folder called Form Fragments.

And in that folder, I’m going to create our first adaptive form fragment.

Provide a meaningful title to our fragment. In this case it’s going to be spouse details. A form fragment can be based on a form model. And there are some advanced settings here which we are not going to go into right now.

We just created a basic form fragment which has a title called spouse details. Click on Create.

And open the form fragment in the edit mode.

Every form fragment has a guideRootPanel. So, let’s go ahead and add some components to the guideRootPanel. The first thing I’m going to do is add a panel to my guideRootPanel.

Panel. And to this panel, I’m going to add two other components. The first thing is going to be a date input field component. And the second component is going to be a simple text box component.

So, as you can see, these two fields are stacked on top of each other. I want to align them next to each other. And to do that, I’ll open up the layout layer of the form and drag this field so that it occupies only half the screen. In a similar manner, I change the text box here.

So now they are next to each other. I’m satisfied with the layout. I go back to my edit layer.

From the edit layer, I’m going to change certain properties of this particular field. So, the first thing I’m going to do is set the title of the input field to date of birth. And then the title of the text box, title of the text box is set to be spouse name.

Spouse name. The next thing I wanted to do was to change the title of the panel in which these two fields are residing. I’ll change the title to spouse details. And also, the description will be spouse details.

Save the settings. So, this is our fairly basic form fragment which has a panel and two fields in it. Our fragment is now ready to be used in a form. -