Creating Adaptive Form creating-adaptive-form

Transcript

Hi, in this video, I’m going to create my first adaptive form. So before I create my adaptive form, I’m going to create a folder and to create that folder I’ve logged into AEM, navigate into the form section, go into the forms & documents, and here I’m going to create my folder. So click on Create, Folder, provide a meaningful title to your folder, application forms and click Create.

Drill down into the folder and click on Create and create adaptive form.

Every adaptive form is based on a template. The template of an adaptive form defines the header and the footer and some initial content that adaptive form will have. AEM forms provides you with three out of the box templates. For our adaptive form, we’re going to select this particular template and this is the same template that was created in the earlier video.

Provide a title to your adaptive form, if you want to you can provide a description for the adaptive form. Every adaptive form is based on a team, the team defines the look and feel of the various components that make up an adaptive form.

We going to accept the default settings in the Form Model tab and click on Create.

Open the form in the edit mode.

So make sure you are in the edit layer of this particular adaptive form. So as you can see, this form has a header and a footer and an empty component section which will allow you to add adaptive form components. So this is coming from the template that we have based our adaptive form on. On the left hand side, you’ll see some content hierarchy, there’s a form container and the root panel. So any form level actions that you want to specify are done to the form containers. So for example, if you open up the configuration properties of the form container, if you want to associate a prefilled service with the form you can do it from here, if you want to associate a client library with the form you would do it from here. You can specify the team that adaptive form will have or you can even specify the various submission options that you may want a data available, for example, you can configure the form to submit to a rest endpoint, or send an email or trigger an AEM workflow. So for now we’re going to leave it as is and go back to our content hierarchy. So the next thing we’re going to do is add a toolbar to the form container. So to add a toolbar, we click on this and from here we’ll add a toolbar.

So once a toolbar is added the next thing to do is to add some action buttons to the toolbox. So to do that, I click the Toolbar and click on the Plus icon to add some toolbar components. For example, I’m going to add a next button, I’m going to add a previous button, and I’m going to add a submit button.

So what this does is the submit button will submit the form, the back and the next button will allow you to navigate to the previous and the next sections of the form. So this completes our initial structure of the form. In the next videos, we will add some more child panels to this particular form. -