Re-usable Components

   MaestroThe UI design product.  |    Form Builder  |  All versions This feature is related to all versions.

Journey Maestro provides a variety of different types of re-usable assets you can use to build many forms that require a high degree of consistency. Re-usable components are one of the more frequently reused assets, which allow Form Builders to create forms that encapsulate the same functionality.

Re-usable components can be anything from a customized address to a large multilayer component built using a repeating block template. You can apply them many times in various scenarios across different forms and projects.

Maestro allows you to reuse components at the following levels:

• Component level
• Form level
• Style level

Let's look at each of these levels in more detail.

Component Level

You can reuse the following Journey Maestro components at a component level.

Native components

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.

Custom Native components

A custom native component is often made up of more sub-parts than a simple component. For example, a Heading consists of not only the Heading text, but sub-text, help text, a collapse or expand button, and a significant amount of JavaScript and CSS. An even more complex component such as a Driver's License scanning component may have multiple data entry fields, a camera button, descriptive images, and more. However, logically it is still a completely self-contained component, and occupies only a single line in the structure pane. In reality, a complex component has exactly the same structure as a simple component, just there is more "stuff". It is still made up of HTML, JavaScript and CSS, it's just that there is usually more of it. There is no fixed boundary between a simple and a complex component, although any component with more than one visible data entry area within it would usually be considered to be complex. However, someone with HTML, CS and JavaScript skills can create these components.

Custom component

Sometimes it is useful to create a re-usable variant of either a simple or complex component. The main reasons for this are:A component with a re-usable business rule, particularly a validation rule. An email field is an example of this.A component (usually a radio button or drop down list) with a specific set of values. An example of this is a drop down list of countries.A component with a particular XML binding. A custom component can be defined and re-used only within a single form, or can be published to a library for use among multiple forms. A Maestro Developer can create these components.

Re-usable Block

A re-usable block is a re-usable collection of simple components. An example of a re-usable block is an Address Block, which consists of two lines of text plus City, State and ZIP Code. Unlike a complex component, each of the sub-elements of the custom block will be visible in the Structure tab, and can be modified individually by the person using your block. Any Maestro user can create these components.

Form Level

You can reuse the following Journey Maestro components at a form level:

Template

A template is an empty form that can be used as the starting point for new forms. Generally, a template contains all the so-called "chrome" that goes around the outside of the actual components that a Form Builder will add to the form. The chrome includes content such as navigators, headers and footers, and standard dialogs. A template can be created based on an existing template or can be built from scratch. A Maestro Template Designer can build this component.

Brand

A template usually contains one or more brands. A brand allows a Form Builder to select a particular set of colors, fonts and other visual elements that can be applied to a form. A brand generally applies to a specific template, because the colors and fonts are applied to the "chrome" of the template, such as headers, footers, and navigators.

The brand also applies to the components that will be added to the form.It is useful to separate the brand from the template in this way, because this allows an organization to come up with a single overall "shape" of all of their forms, but still allows them to define different color schemes, logos, and other branding elements for each of the sub-entities within their organization. This is particularly helpful for larger organizations who have multiple sub-organizations that have their own brand, or for organizations who white-label their products to other organizations. A Maestro Template Designer can build this component.

Style Level

You can reuse the following Journey Maestro components at a style level:

Simple Shared Style

Sometimes you may want to style a component in a particular way. For example, you may want to create a Red Text Input. One way to do this is just to change the color using the Styles tab. However, this might result in different people choosing a different shade of red. Instead, you can create a shared style that defines the correct shade of red, has a name, and can be applied to any Text input.The shared style can be used simply within your own form, or can be published to a library for re-use among multiple forms. Any Maestro User can reuse this component.

Complex Shared Style

Maestro provides the capability to modify many of the simpler CSS style elements using an intuitive graphical editor. However, sometimes it may be desirable to create much more complex visual effects using the power of CSS. Maestro allows custom CSS to be used, but this requires the skills of someone who understands the intricacies of CSS. A CSS expert can reuse this component.

Styles are usually created by a Template Designer who shares them in Journey Maestro, so a Form Builder can use them in new forms.

You can't make a Red Label Text Field as a Custom Component. This is because Custom Components only contain custom properties, which only affect functionality, but not look and feel. You will need to create a Red Label Custom Style, which can be applied to any Text Field.

You can control component functionality and styling by two different re-usable elements, which don't overlap:

• Custom components that are responsible for functionality.
• Custom styles that are responsible for look and feel.

Next, learn about component options.