MaestroThe UI design product. | Form Builder | All versions This feature is related to all versions.
Maestro comes with a wide range of components, also known as widgets, that you use to build forms. Components are the modular building blocks that can be dragged and dropped into all types of designs, including forms, receipts, templates, and even other components. Some components are simple elements, such as the Text Field component or the Image, while others provide more complex functionality, such as the LinkedIn Auto-Fill component.
You can access all available components from the Palette pane of the Maestro editor where you can create, add, edit and delete them. Each component has a set of properties, rules and styles allowing you to configure it and its behavior to your requirements. A component inherits some of properties, rules and stiles from a parent component as well as it has its own configuration set, which gives you extra flexibility in building highly reusable components and templates.
Components are organized within category folders. You can browse each category to find the component you want to use on your form, or you can use the search box at the top of the Palette.
At the top of the component list, you find the favorites category, which displays the most commonly used components. You can add or remove components from the favorite list based on your own personal preferences. The changes you make to the Favorites list are stored in your Maestroaccount, not within the form. The components you add to or remove from favorites are displayed each time you open a form in the Maestro editor.
Maestro distinguishes between the following types of components:
Now, let's look at each component type in detail.
Core components, also known as Native components, are fundamental components and are shipped with Maestro software so you can use them out of the box. They are the low level components and include HTML, CSS and JS. Native components can be customized and combined to create shared components or added directly into forms, templates, and receipts.
Native components are the basic widgets that are supplied with Maestro. These include components for entering a single data value, such as data entry fields, checkboxes, radio buttons, and dropdown lists. There are also a number of more sophisticated components such as numeric and number fields, and more. Many components have at least two sub-parts, the label and the data entry area. Some also include an icon (such as a currency indicator), and most will allow for an optional help icon to display help text. A date field is arguably a more complex component, because it includes a pop-up calendar control - but is still really just a simple component.Under the covers, a simple component consists of an HTML definition, a Maestro descriptor that tells Maestro what properties to display in the Properties tab, and optional JavaScript and CSS. However, as a Maestro user, you are shielded from the underlying complexity, and simply drag and drop the component into your form. These components are usually shipped in the product, although they can be built by anyone with HTML, CSS and JavaScript skills.
A component can have translation settings which are used to translate error messages, calender entries, display format, and right-to-left formatting when displayed to form users.
We recommend getting familiar with the complete list of components so you know what is available to you while creating a form.
Most of native component have a keyboard shortcut assigned to them.
Custom shared components are the components that you can create using the Maestro editor to implement your business requirements. Usually, you use existing core components, create specific business rules for them, bundle them as a resource, and finally publish it. This makes the resource shared so you can use it across your forms. Shared components are not native components, so they have some limitations. Shared components are the components that users can build in the editor when they create a component that can use native components or other shared components.
In other words, shared components are combinations of existing components. You can, for instance, create a "Full Name" component that contains two Text Field components -- one for the first name and one for the last name. This component would be visible via the Palette pane, configurable via the Properties pane, and completely reusable -- just like any of the components included with Maestro.
Custom native components are the components that you or somebody else can create, package and import as a Maestro library. These components are an advanced type of components that are created outside of the Maestro editor Custom Native components should only be created when absolutely necessary. In most cases, a custom shared component will meet your business requirements and should be used prior to creating custom native components. Custom native components are native components built outside the product team and are usually client specific, but could be, for example, Exchange components.
You can embed non-native components in your form, like address, you can add it and then right click on it and select embed and it will remove the component reference and add the properties, etc to the definition used in the form.
As with all design types, components support versioning. To learn more, refer to Versions.
Maestro distinguishes two types of complex, composite components - Dialogs and Modal Pages - which are designed to perform specific actions:
There are various actions you can perform on a component or its fields. One of the actions is to enable or disable a component or a field, which you can define using the Editable if rule.
Next, learn how to add a component to a form.