Creating custom toolbar layout

Toolbar layouts

When you create an adaptive form, you can specify a toolbar layout for the form. The toolbar layout defines the commands and the layout of the toolbar on the form.

Toolbar layout uses rely heavily on client-side processing driven by complex JavaScript and CSS code. Organizing and optimizing the serving of this code can be a complicated issue. To help deal with this issue, AEM provides Client-side Library Folders, which allow you to store your client-side code in the repository, organize it into categories, and define when and how each category of code is to be served to the client. The client-side library system then takes care of producing the correct links in your final webpage to load the correct code. For detailed information, see How client-side libraries work in AEM.

Sample layout of the toolbar

Adaptive forms provide a set of out-of-the-box layouts:

Toolbar layouts available out-of-the-box

In addition, you can create a custom toolbar layout.

The following procedure details the steps to create a custom toolbar that displays three actions in the toolbar and the other actions in a drop-down list in the toolbar.

The attached content package contains the entire code described below. After installing the content package, open /content/forms/af/CustomLayoutDemo.html to view the custom toolbar layout demo.