Theme

The Journey Workspaces user interface (UI) design is based on a theme that includes a color palette of optimized tones and shades derived from a primary color. The theme property defines a set of overrides of the default look and feel; in particular, you can modify the primary color to match your brand.

note

It is strongly recommended to modify the primary color only. Other overrides should be used only if there are contrast issues. If you need to change the primary color, we have guidance to help you select a color that's compliant with WCAG 2.0 level AA contrast guidelines.

There are three places that you can set the theme and the path to the logo image and subsequent levels of precendence that apply. These are as follows:

• If no theme settings are provided, the default colour(#293290) will apply. This is set in the code.
• If theme properties are provided:
  • in transact-config.json, this will override the default colour.
  • via the Organisation Properties API, they will override the values provided in transact-config.json.
  • in the User Profile in TJM, they will take precedence and override all other theme properties

The same precedence listed here applies to the logo path. Add the logo file to the /public/static folder in the template, it will get copied to the build folder on deployment.

Set via TJM User Profile

This option allows the theme to be set dynamically based on the user's profile setting. If the user's profile doesn't contain the theme settings, the app's default theme is applied.

1. Login to Journey Manager.
2. Select Security > User accounts. Locate the user to update, then click the Login Name or the Edit icon in the Action column.
3. Switch to the User Profiles tab, then click the Profile Name or the Edit icon in the Action column.
4. Switch to the User Properties tab.
5. Click New, then enter the user property details.
   1. To add a Theme user property:
      1. In the Type list, select Theme.
      2. In the Value box, enter the theme JSON.
   2. To add a Logo path user property:
      1. In the Type list, select Logo.
      2. In the Value box, enter the logo path as a string.
6. Click Save.

If the Theme or Logo option doesn't exist, you need to add it as a form property type.

1. Login to Journey Manager.
2. Select Forms > Property Types.
3. Click New.
4. In the Name box, enter either Theme or Logo, corresponding to the type of property being created.
5. In the Scope list, select User.
6. Select an appropriate Data Type according to the property type:
   1. For a Theme property, select JSON.
   2. For a Logo property, select string.

Set via configuration file

Add or update the theme JSON object in the appDef object. The logo property is set inside the theme object. For example:

transact-config.json

{
  "buildDir": "build",
  "domainModelFile": "transact-schema.json",
  "appDef": {
    ...
    "theme": {
      "logo": "static/logo.png"
      "primary": {
        "main": '#025197',
      },
      "text": {
        "main": '#4A4A4A',
        "light": '#6B6E71',
      },
      "grey": {
        "darkest": '#000000',
        "dark": '#3B3B3B',
        "primary": '#757575',
        "light": '#E5E5E5',
        "lightest": '#F2F2F2',
      },
      "white": '#ffffff',
      "black": '#000000',
      "green": {
        "main": '#5A9B12',
        "light": '#7ED321',
      },
      "red": {
        "main": '#D0021B',
        "light": '#FBF3F4',
      },
      "blue": {
        "main": '#4A90E2',
        "light": '#eef3f8',
      },
      "orange": '#F5A623',
      "snack": {
        "info": {
          "backgroundColor": "#ff33cc"
        }
      }
    },
  }
}

Set via Organization Properties

1. Login to Journey Manager.
2. Select Forms > Organizations, then edit the appropriate Organization Name
3. Select Properties, then edit Workspaces Theme (if the Workspaces Theme property doesn't exist, create it). Example:

Workspaces Theme Property Example

{
  "theme": {
    "logo": "static/logo.png",
    "primary": {
      "main": '#025197',
    },
    "brand":"brand-sb"
  },
}

Branding

Additionally a brand property can set in the theme. Workspaces has the ability to pass branding information to other forms from the app. When an Organistation Property has been created with the required branding information in TJM, that property can be passed to the form via the URL. The form can then utilise the branding information contained within.

1. Navigate to Forms > Organizations
2. Pick the appropriate Organization
3. Select Properties
4. Create or edit the appropriate Organization Property and add the branding information(JSON). The name of this Organization Property will be the value of the brand property specified in the theme object(as shown in the example above). In this case, the name of the Organization Property is brand-sb.
5. This name will be passed along with the URL to the form, as shown below. The form will then have access to the branding information within the Organization Property file, eg. <domain>/workspaces/servlet/SmartForm.html?formCode=daofraudreview&pageId=new-form&brand=brand-sb

Attributes

To review the list of supported attributes, see API Reference.