Creating Adaptive Form Template

Transcript

Hi, in this video, we will take a look at creating our own adaptive form template. Every adaptive form is based on a template. To create your own adaptive form template, I’ve logged into AEM Forms, go to the tools menu, and click on the configuration browser. Here, you will create our own folder, which will hold our template. The folder is going to be called peak application, and make sure you select the editable templates option and click on create.

Now that our folder is created, we will go ahead and create an adaptive form template in that particular folder. So, I go into the tool’s menu, again. Click on the templates, and select the folder in which you want to create their template, click on create, select adaptive form template and click next. Provide a meaningful title to the template. Here, is going to be big application template. If you want to can provide a description and click on create.

Open the template in edit mode.

So, every template at the minimum contains this layout container at the top. There’s an adaptive form container in the middle, And again, there’s a layout container at the bottom. So, template typically you will work with two layers. The first one is the structure which we just saw, and the second one is the initial content, which describes the initial content added to the template. And every template will have a form container and the root panels. So, let’s go ahead and add a header component to our layout container here. So click on the + button, and add a header component in a similar manner, we’ll add a photo component to this bottom layout container here.

As you can see, the header component is a complex component, which has an image and the static text component. So, let’s go ahead and change the static text here, edit.

And remove the default text and replace it with the text that we want. It’s called peak application. Then we’ll change the image here. We’ll upload our own image.

Select this big image and click on select.

And save your settings here. So now our header component has a custom logo and a static text here. The photo component, we are going to leave as it is. There’s another motion of locking and unlocking components. So in this case, if you want the header component to be locked, meaning the form autos should not be able to change the logo or the static text you can keep the component as locked. If you want the form authors, to be able to add their own custom logo or change this static text, you can unlock the component. In the similar manner, You could either lock or unlock the photo component. Then if you go to the initial content, layer. This content layer allows you to add various form components in your case, if you want, so we can add the various form components, which are provided over the box. For instance, a static, a static text box drop-down this radio button and so forth. But in our case, we are not going to add any form components. You’re going to leave these, these container as it is. So, this completes our adaptive form template. The next thing to do is to enable this adaptive form templates so that it is available for the adaptive form authors to use this, to do that you select the template, and click on enable.

So once the template is enabled, it is available for the form authors to base their adaptive forms on this particular template. -