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
- in
The same precedence listed here applies to the logo
path.
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.
- Login to Journey Manager.
- Select Security > User accounts. Locate the user to update, then click the Login Name or the Edit icon in the Action column.
- Switch to the User Profiles tab, then click the Profile Name or the Edit icon in the Action column.
- Switch to the User Properties tab.
- Click New, then enter the user property details.
- To add a Theme user property:
- In the Type list, select Theme.
- In the Value box, enter the theme JSON.
- To add a Logo path user property:
- In the Type list, select Logo.
- In the Value box, enter the logo path as a string.
- To add a Theme user property:
- Click Save.
If the Theme or Logo option doesn't exist, you need to add it as a form property type.
- Login to Journey Manager.
- Select Forms > Property Types.
- Click New.
- In the Name box, enter either Theme or Logo, corresponding to the type of property being created.
- In the Scope list, select User.
- Select an appropriate Data Type according to the property type:
- For a Theme property, select JSON.
- 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:
{
"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',
},
}
}
Set via Organization Properties
- Login to Journey Manager.
- Select Forms > Organizations, then edit the appropriate Organization Name
- Select Properties, then edit Workspaces Theme (if the Workspaces Theme property doesn't exist, create it). 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.
- Navigate to Forms > Organizations
- Pick the appropriate Organization
- Select Properties
- 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 thetheme
object(as shown in the example above). In this case, the name of the Organization Property isbrand-sb
. - 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.