About style themes in Jitterbit App Builder

Themes have a Preview function, where you can get a quick visual representation of exactly how different screens and Panels in App Builder will look with the selected Theme applied. This guide describes the current implementation of Themes.

Overview

App Builder allows the customization of how an app visually appears in the Application Layer through leveraging Style Themes. In App Builder, Themes are defined pairings of Components and Value Types which allow you to control the appearance of defined areas of the Application Layer UI and UX. A Component here represents an area in the Application Layer UI that can have its properties changed, for example Page is a Component. Value Types represent the specific properties that can be changed or defined, for example Background color is a Value Type.

For example: Set the Background color [Value type] of the Links [Interface] to be purple.

Several predefined Base Themes are shipped with App Builder which can easily be used by your application as is, or leveraged as a Base Theme which you can further customize. As well, the following options are available through Themes:

• Theme setting types are available to configure Alignment, Spacing, and CSS Transitions
• The following new areas of Pages from App Builder are exposed to be customized via Themes:
  • Chart, Map and Calendar Real Estate areas
  • Tile margin on Boards/Lanes, Tile centering in a Panel
  • Multi-row Panel Control Sets, headers and cells (allowing larger MRP rows)
  • Validations (Errors, warnings, prompts and exceptions presented to the user)
  • Back button
  • Load more rows button
• Ability to Hide Toolbar if all intrinsic controls are hidden, including disabling count
• Close button ('x') is now part of the Panel and can be styled similarly
• Support panel visibility that hides the Panel but reserves the space (value of "3")
• Can now hide Panel Headers, or adjust their size via Formats
• Site level fonts can be loaded remotely

Theme-less state

Without any Theme information defined and applied, App Builder at the Application Layer level appears in a theme-less state with minimal stylization. With the use of Themes, a designer can quickly improve the overall look and feel of an app.

Interfaces

Creating a brand new Theme and assigning it to an application will not result in any visible changes, since the new Theme has no Implementations. The colors chosen at a Theme level do not automatically apply to any parts of the Application Layer User Interface. To see custom colors through the Application Layer you need to configure Component Settings. Fig 2 has the Page - Title Bar Component Background Color set to purple for the Links Area.

Components are parts of the UI that can receive style implementations.

Value types

With a Component specified, you can select a Value Type to apply a property. Value Types can refer to font colors, background colors, images, alignment, gradient information, size information, etc. depending on what specific Real Estate area you have selected to customize. On the theme page, each Value Type has corresponding Help text information which contains helpful tips and instructions on what specific information to provide.

Referencing colors by reserved syntax

When specifying colors in the Themes area of App Builder, (border color, background color, etc.) you can reference the name of one of the three colors defined at the Theme level. This allows faster customization when using the Copy feature.

The reserved syntax terms you can specify are:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Adjusting colors

When using reserved names, colors can be adjusted as well for brightness or darkness and opacity.

Colors can be adjusted for brightness or darkness and opacity. This customization is available for the following reserved terms:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

To adjust color brightness and darkness, add a pipe character along with numeric decimal value (positive value to increase or negative value to darken the color). Expected values are -.9 - .9.

Syntax: {PrimaryColor|.25} or {PrimaryColor|-.25}

To adjust color opacity add the tilde character along with a numeric decimal value. Expected values are .1 - .9.

Syntax: {PrimaryColor~.25}

Copy button

Any Theme can be copied. Use this feature if you want to quickly get up and running with a Theme and just set the three colors for Primary, Secondary and Complementary. There are many predefined Themes available that can be selected and used as is or customized further to get up and running quickly.

App Builder predefined themes

App Builder ships with several predefined Themes. Although these are technically editable, when you upgrade any changes will be lost.

Suggestions

If you specify a dark Background Color, ensure you use a Font Color that is readable for all text. Take advantage of the text-shadow property included in Font Color to add extra contrast.

Appendix

Components

Value types