Brands Overview
MaestroThe UI design product. |
Template Designer 
Form Builder | 21.11
This feature was updated in 21.11.
When an organization creates a template, they often want to reuse the structure of the template while still being able to adjust many of its attributes, such as background colors and button styles. This is commonly done for the sake of white-labelling, so an organization can create configurable copies of its templates to eliminate the need of creating a new template every time they enter into a white-labeling deal. This means that the same template can be used for different companies.
To streamline this process, Maestro allows you to use a brand, which is a variation of a template.
A brand defines the physical appearance of a Maestro form and is stored within a template. Brands control colors, fonts, images, translation, and other aspects of a form. Brands are created in the template by a Template Designer, which ensures that all forms, using a particular brand, have consistent colors, fonts, and other design elements. If a change to a brand is required, for instance a new color, all that is needed is a modification to the brand and a re-publish of the form – each form does not need to be modified individually.
For example, you may want to have a template defining the same form structure, but with different colors, heights, and widths configured in several brands. This is illustrated in the example below.
Every Maestro template has at least one brand, named Default. Even if you don't plan to have multiple brands, you still need to use the Default brand to configure the Theme Options and Item Properties within the template. You can't rename or delete the Default brand.
You can create as many brands as required and then apply a brand to a form as you work on. When a brand is not needed any longer, you can remove it. It's recommended that only a Template Designer manages templates.
A brand shares the same underlying structure as the original template, meaning all of the components in the View pane are the same, but the properties and styles can be adjusted on a per-brand basis.
When you edit a form with multiple brands in the Maestro editor, you can see extra options, such as the Brand button where you can switch a brand and the Build with Options where you can choose which brand to use while generating a TM Form Version file.
When creating a brand, a Template Designer will:
- Configure Theme Options
- Configure Item Properties
Maestro allows you to use design-time and runtime branding in your forms. Let's look at them in more detail.
Design-time branding
Design-time branding is when you create a form based on a certain brand available in your template, then build the form using that brand, and, finally, deploy the form to Manager where it is rendered as per the brand's definition.
Since Maestro 21.11, you can generate multiple form versions of a form using several brands as ZIP files. However, these files need to be imported separately as they will either be going to the same Manager instance in different organizations and form spaces or different Manager instances.
Runtime branding
Runtime branding is a new powerful concept in branding, which is available starting with Maestro 21.11. Runtime branding is based on JSON configuration file that specifies the details of a brand, such as images, CSSCSS stands for Cascading Styles Sheets and is used to define styles for a Maestro Form, including the design, layout, and variations in the form’s display on different devices and screen sizes. The CSS on a Maestro form is primarily taken care of by the Template Designer. The Template Designer will implement the branding and/or styling of the form’s assets.CSS can be applied to the template of the form, individual components, and any other asset associated with a Maestro form., translation setting, and brand properties, that can be referenced by business rules.
The runtime branding is made up of the following methods, which you call individually based on requirements:
Form.updateImageByName()Form.updateCssByName()Translation.fetch()
You can also use only one method - Form.updateBranding() - that handles all the above functionality. In this case, you have to pass in the RuntimeBrandUpdate object, which is the JSON file specifying a brand. For more information, see the Maestro API Reference.
When you create a form, you define a brand in a JSON file, which is stored in Manager. Every time the form is rendered, Manager passes this file into the form using various methods, such as a form prefill, a service call, or an HTTP GET / POST. This way, if you need to change something in a brand, you don't need to do any changes in the form using the Maestro editor. Instead, you simply update the JSON file in Manager and the form will pick up the changes from there.
Runtime branding utilizes the enhanced form build process and the new framework as well as the Runtime CSS Resource and Bundle Resource Library components. The Bundle Resource Library adds resources, which the form has access to, into the FAR file, so you can add JavaScript, CSS and images that will be available at runtime without needing to first include them in the form as a direct resource. There is also the ability to specify images to use a URL so they can be picked up from a portal resource.
Next, learn how to create a brand.