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, and other aspects of a form. Brands are created in the template by the Template Designer. Brands ensure that all the forms 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 manage 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.
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 it uses.
Since Maestro 21.11, you can generate multiple form versions of a form using several brands. However, these form version files need to be imported separately as they will either be going to the same Manager instance in different organizations or form spaces or going to 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 that contains 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. content, translation setting, brand properties that can be referenced by rules. The runtime branding is made up of several blocks, such as Form.updateImageByName(), Form.updateCssByName(), Translation.fetch(), which a developer can use (or call) individually based on their requirements. Alternatively, they can use Form.updateBranding(), which when used with a specified JSON structure can handle the above functionality while just specifying the JSON file. For more information, see the Maestro API reference documentation.
When you create a form, you define your brand in a JSON file, which you store in Manager. Manager pass this file into the form using various methods, such as the form prefill option, a Manager service call, a HTTP GET / POST, so the form is rendered accordingly. If you need to change something in a brand, you don't need to change anything in the form in Maestro. Instead, you simply update the JSON file in Manager so the form picks up the changes from there.
Runtime branding uses 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 can be used at runtime without needing to first include them in the form as a direct resource that is used. 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.