MaestroThe UI design product. | Form BuilderTemplate Designer | 21.11 This feature was updated in 21.11.
Maestro allows you to create templates that accelerates application form development process and unifies look and feel of forms, which are based on the templates. Templates are mostly created by Template Designers.
If your organization creates forms using Maestro, they probably intend to create multiple forms with similar layouts and styles. To streamline this process, Maestro allows you to use templates. You can think of a template as a form that is published in a library so it can be used as a starting point in a new form development.
The primary purpose of a template is to define a structure that can be used across multiple forms. A template usually includes a header, footer, and navigation or progress bar. You might, for instance, want to use the same header, footer, and navigation for more than one form. To accomplish this, you can create these components once and place them in a template. Then, when creating a form, you select a template so the form is populated with these components.
From that point onward, any changes made to the template — and any changes made to the components in that template — will be reflected in any forms using the template.
Templates are also responsible for brands, which are used to control the appearance of templates, including their colors, heights, widths, and padding.
All templates have a default brand that cannot be deleted. Most organizations will only need this default brand. You can, however, create multiple brands to create variations of a template. This is called white-labellingWhite-label software is software that is purchased by a company from a service provider and re-branded as its own.. Maestro editor gives you all mechanisms to create your own while-label brands.
Using a template provides you with the following benefits:
If you have multiple forms with similar styles, the only way to implement those styles across the forms without templates is to duplicate the work. Even if you're just working on a couple of forms, this is an unproductive use of time.
When the design of forms are based on a template, updating the design of those forms is simply a matter of publishing a new version of the template. The changes will be automatically reflected in any form using the template.
When designing a template, you can use Extension Points to control what parts of the template the Form Builders can edit and add content to. This prevents them from making changes that should be made within the template, ensuring consistency across dozens (or even hundreds) of forms.
Templates and forms can be developed independently and simultaneously. This improves the overall workflow, as Template Configurators and Form Builders won't cause any conflicts as they will work on different resources - a template and a form..
In Maestro, all templates must be based on a template that we've bundled with the software. These templates are feature-rich starting points that allow you to quickly implement styles and functionality specific to your organization, rather than having to repeatedly reinvent the wheel.
You can't avoid testing your templates and forms entirely, but because your templates will be based on one of our templates, you'll benefit from the testing we do in-house.
In Maestro, all forms must be based on a template. Templates are responsible for the look and feel of forms. By using templates, you can define a source of truth of how an organization's forms should look. Then, if the organization wants to update the look and feel of its forms, the changes only need to be made in the template, rather than in each form
Most Maestro templates have the following common elements:
These elements can be present or positioned differently in various template. For more information, see common template elements.
Templates are created in the same Maestro editor that's used for creating forms. The same components are available via the Palette pane, but you'll mostly use different components in a template than you would in a form. Typically, templates contain components that you want to appear consistently across forms. They don't contain content that will most likely be different across forms, such as form fields or Page components.
The table below provides examples of components that typically appear in templates, forms, or both templates and forms. Maestro allows you to put any component in both templates and forms though, so these examples are just guidelines, rather than strict enforcements.
| Templates Only | Forms Only | Templates & Forms |
|---|---|---|
|
Template Controller |
||
|
Narrator Controller |
||
|
Progress Bar |
||
|
JavaScript Library |
||
Within a template, it's also possible to define Theme Options and Item Properties, which can then be used to configure a template without diving into the underlying code. These features are intertwined with brands.
When creating a template, a Template Designer:
A Template Designer uses the Maestro editor to:
However, more often than not, a Template Designer uses CSS directly to create a template and change its styles as needed.
As with any software development, creating complex, elegant and well designed form applications that provide smooth and intuitive customer onboarding journey is a task that needs to be carefully planned and executed. Maestro allows you to implement such forms, assuming the form designers and form builders follow some well-established guidelines. As always, Maestro is just a tool that helps you do complex tedious tasks faster and with fewer mistakes, but real success lies within clear and concise styles that are used consistently across the whole application, or even several applications belonging to one organization or a company.
Typically, work on a new form application starts with a Form Designer getting a form prototype outlining the styles of each page and its elements. The prototype, or a wireframe, can be a set of PDF or HTML pages, made up in a web design tool.
To get on with the task, a Template Designed creates a set of projects that will keep all relevant resources and configurations. This is a crucial point of getting things rights, which ensures easy changeability and maintenance of the form. This is especially true for complex forms, forms with brands, or white-label forms that will be used or extended by other parties.
The Template Designer creates a template for the new form design in a style project. This template will accommodate most, if not all, styles pertinent to the form look and feel.
The new template is usually based on one of the predefined templates shipped with Maestro. We recommend using the latest template, which is the Avalon template.
The Template Designer adjusts the structure of the template to reflect a user journey through the form. During this activity, the designer sets extension points to lock out the parts of the templates that only the Template designer can modify. This significantly improves manageability of forms based on the template, reduces clutter of different styles used in various forms to style similar or even same components. The list goes on.
When the preliminary version of the template is ready and, possible, shared with a Form Developer who can start working on a concrete form implementation, the Template Designer begins meticulous work creating styles that exactly copy the form wireframe design.
Before delving into changing existing component's styles used in the template, it's important to understand style's inheritance and how they are overridden either directly or via libraries that a form makes use of. For more information, see shared libraries.
The Maestro editor gives you several options working with styles - via the UI or more direct access to CSS and LESS syntax. We recommend using the later as it provides the better visibility of what styles are in use and how they are inherited.
As you are working on a particular style in the editor, you open the template in the Preview mode to check how each styled element looks on a rendered form. This gives you an option to view the HTML code using a developer plug-in, for example, Chrome browser's Developer Tools. Here you can check if the correct style is used and adjust a corresponding value, or try a different value or even a different style until the element is styled exactly as per the wireframe design.
Maestro comes with several ready-to-use templates:
Next, learn how to change default properties.