Create Simple Form using AEM Forms Designer

Transcript

Let’s add an object from the object library into the design view. We’re going to start by adding some text. Text can be added by simply selecting the text tool from the object library and dragging it into the design view and positioning it where you would like the text to appear. Now that we have the text object in the design, it can be configured in the lower right side section of the forms designer. As you can see, we have paragraph, font, accessibility, layout, and object configuration parameters. To edit the text, simply double click on the object in the design view and type the text you would like to display. To change the font size, choose the font tab and select the size of the font you would like. If the text is too large to display in the allotted space, a red plus sign will appear, selecting the red plus will automatically adjust the size allotment. Now let’s add the agency logo. Select the image object and drag it onto the design. You can add the image by selecting the URL in the object tab or by double clicking on the image object in the design view. As you can see, we have a number of additional objects we can choose from. Take some time on your own to experiment with the different objects to get a feel for what each object does. For our simple form, we’re going to add text field and name it full name. Social Security number and current date are available in the custom dropdown and the object library. Objects in the custom dropdown have been pre-configured with default captions, calculations, and other settings.

Transcript

Custom objects can also have multiple fields associated with them. As we see here, the address block, name, address, city, state, zip code, and country are all included as part of the object. This comes in handy as your organization standardizes on the form fields in their configurations. Once custom objects are in the design, they can be modified. In this case, we’re going to remove name from our custom object since we already have full name in the form. To create a custom object, simply select the field or fields and drag them into the custom tab and give it a name. Now we can reuse it in other forms. Custom objects can also be shared with other users. This is a very powerful capability of AEM Forms Designer. As changes are made to your custom objects, those changes are not reflected across your forms libraries. As you create your forms libraries, updating all your forms to the new standard automatically will be a huge time saver. To facilitate this capability, AEM Forms Designer has form fragments. To create a form fragment, simply select the form field or fields and drag them into the fragment library. Once a fragment is created, you can recognize the fragments in the existing forms by the purple puzzle piece. Any time this fragment is updated, any form that references this fragment will also be updated with the changes made to that fragment. To finish things off, we’re going to add a button and give it the name of submit.

Transcript

These videos are very high-level how-tos. There are additional tutorials available to help get you started as well. For additional information, you can go to the Help menu. By clicking on Samples in the Help menu item, you will find designer samples tutorial that are included in your installation. The sample forms and snippets can be found in the Program Files x86, Adobe, Adobe Experience Manager Forms Designer, EN, Samples, Forms Directory. Here, in this case, I’m opening one of the purchase order forms. There are also some very useful form snippets that are in the Snippets directory and provide very useful information. In this case, you can see how to calculate the field sum.