13.2 Customizing the OAA User Interface

You can customize certain features of the OAA user interface (UI), such as the Administration Console UI, User Preferences Console UI, and the Runtime UI using the configuration properties.

You can customize the UI by setting configuration properties using the REST API:
PUT  <PolicyUrl>/policy/config/property/v1

Note:

In this case remove /oaa-policy from the <PolicyUrl>, for example use https://<host>:<port>/policy/config/property/v1 not https://<host>:<port>/oaa-policy/policy/config/property/v1.

For details about finding the PolicyUrl and authenticating, see OAA Admin API.

For details about the Configuration Properties REST Endpoint, see Configuration Properties REST Endpoints

You must bear the following points in mind while setting the configuration property:

  • Image type must be png, jpg, or jpeg.
  • Image values must be set to an existing image available on an external URL.
  • When updating the footer parameters, ensure that you update all the footer-specific parameters in one go for the changes to be visible in the UI.
  • The default out-of-the box values are internal only and are not displayed when fetched. For example, GET <PolicyUrl>/policy/config/property/v1?propertyName=<property> returns [] as the default value. Only when a property is custom defined, the value is returned with GET.
  • To reset a property to the out-of-the-box default value, use DELETE <PolicyUrl>/policy/config/property/v1?propertyName=<property>.

The following sections describe how to customize the various UI's by setting their configuration properties.

13.2.1 Configuration Properties to Customize the Administration Console UI

Learn about the configuration properties that you can set to customize the Administration Console UI.

Table 13-1 Configuration Properties to Customize the Administration Console UI

Property Name Description Sample Value
oaa.admin.ui.theme.default.image.path.logo Logo image path https://www.example.com/content/images/logo.jpg
oaa.admin.ui.theme.default.image.path.logo.useMaxSpace Size for custom logos. By default custom logos render to 50x42 pixels (px), regardless of size. For example, if the logo is 40x40 px, the logo will stretch to 50x42 px. If you set useMaxSpace to true, the dimensions of the 40x40px logo will remain intact. This is true as long as the logo width is < 200px and logo height is <42 px. Anything over this limit will resize to 200x42px. true
oaa.admin.ui.theme.default.image.path.background Background image path https://www.example.com/content/images/background.jpg
oaa.admin.ui.theme.default.image.path.favicon Favicon image path https://www.example.com/content/images/favicon.jpg
oaa.admin.ui.theme.default.font.text.header Application header text Example Company Advanced Authentication
oaa.admin.ui.theme.default.font.color.header Application header color #ffffff
oaa.admin.ui.theme.default.font.text.title Application title text Example Company Advanced Authentication
oaa.admin.ui.theme.default.footer.color Footer text color #00688c
oaa.admin.ui.theme.default.footer.color.copyrightNotice "copyrightNotice" text color rgba(22, 21, 19, .6)
oaa.admin.ui.theme.default.footer.text.about Footer text for "about" About Example Company
oaa.admin.ui.theme.default.footer.text.contactus Footer text for "contactus" Contact us
oaa.admin.ui.theme.default.footer.text.legalnotice Footer text for "legalnotice" Legal Notice
oaa.admin.ui.theme.default.footer.text.termsofuse Footer text for "termsofuse" Terms of use
oaa.admin.ui.theme.default.footer.text.privacyright Footer text for" privacyright" Privacyright
oaa.admin.ui.theme.default.footer.link.about Footer "about" link http://www.example.com/us/corporate/index.html#menu-about
oaa.admin.ui.theme.default.footer.link.contactus Footer "contactus" link http://www.example.com/us/corporate/contact/index.html
oaa.admin.ui.theme.default.footer.link.legalnotice Footer "legalnotice" link http://www.example.com/us/legal/index.html
oaa.admin.ui.theme.default.footer.link.termsofuse Footer termsofuse link http://www.example.com/us/legal/terms/index.html
oaa.admin.ui.theme.default.footer.link.privacyright Footer privacyright link http://www.example.com/us/legal/privacy/index.html
oaa.admin.ui.theme.default.footer.text.copyrightNotice Footer text for copyright Copyright © 2021, Example Company and/or its affiliates. All rights reserved.
oaa.admin.ui.theme.default.image.tiled.background If specified as true, background image will appear in a tiled manner FALSE
oaa.admin.ui.theme.default.font.family If specified, custom font family name will be used. Refer to <Generic font families> Oracle Sans

13.2.2 Configuration Properties to Customize the User Preferences Console UI

Learn about the configuration properties that you can set to customize the User Preferences Console UI.

Table 13-2 Configuration Properties to Customize the User Preferences Console UI

Property Name Description Sample Value
oaa.prefs.ui.theme.default.image.path.logo Logo image path https://www.example.com/content/images/logo.jpg
oaa.prefs.ui.theme.default.image.path.logo.useMaxSpace Size for custom logos. By default custom logos render to 50x42 pixels (px), regardless of size. For example, if the logo is 40x40 px, the logo will stretch to 50x42 px. If you set useMaxSpace to true, the dimensions of the 40x40px logo will remain intact. This is true as long as the logo width is < 200px and logo height is <42 px. Anything over this limit will resize to 200x42px. true
oaa.prefs.ui.theme.default.image.path.background Background image path https://www.example.com/content/images/background.jpg
oaa.prefs.ui.theme.default.image.path.favicon Favicon image path https://www.example.com/content/images/favicon.jpg
oaa.prefs.ui.theme.default.font.text.header Application header text Example Company Advanced Authentication
oaa.prefs.ui.theme.default.font.color.header Application header color #ffffff
oaa.prefs.ui.theme.default.font.text.title Application title text Example Company Advanced Authentication
oaa.prefs.ui.theme.default.footer.color Footer text color #00688c
oaa.prefs.ui.theme.default.footer.color.copyrightNotice "copyrightNotice" text color rgba(22, 21, 19, .6)
oaa.prefs.ui.theme.default.footer.text.about Footer text for "about" About Example Company
oaa.prefs.ui.theme.default.footer.text.contactus Footer text for "contactus" Contact us
oaa.prefs.ui.theme.default.footer.text.legalnotice Footer text for "legalnotice" Legal Notice
oaa.prefs.ui.theme.default.footer.text.termsofuse Footer text for "termsofuse" Terms of use
oaa.prefs.ui.theme.default.footer.text.privacyright Footer text for" privacyright" Privacyright
oaa.prefs.ui.theme.default.footer.link.about Footer "about" link http://www.example.com/us/corporate/index.html#menu-about
oaa.prefs.ui.theme.default.footer.link.contactus Footer "contactus" link http://www.example.com/us/corporate/contact/index.html
oaa.prefs.ui.theme.default.footer.link.legalnotice Footer "legalnotice" link http://www.example.com/us/legal/index.html
oaa.prefs.ui.theme.default.footer.link.termsofuse Footer termsofuse link http://www.example.com/us/legal/terms/index.html
oaa.prefs.ui.theme.default.footer.link.privacyright Footer privacyright link http://www.example.com/us/legal/privacy/index.html
oaa.prefs.ui.theme.default.footer.text.copyrightNotice Footer text for copyright Copyright © 2021, Example Company and/or its affiliates. All rights reserved.
oaa.prefs.ui.theme.default.image.tiled.background If specified as true, background image will appear in a tiled manner false
oaa.prefs.ui.theme.default.font.family If specified, custom font family name will be used. Refer to <Generic font families> Oracle Sans
oaa.prefs.ui.theme.default.menu.button.color To change the color of the menu button rgb(31,92,255)
oaa.prefs.ui.theme.default.primary.button.color.focus To change the color of the submit button rgb(31,92,255)
oaa.prefs.ui.theme.default.primary.button.color.hover To change the color of the submit button rgb(31,92,255)
oaa.prefs.ui.theme.default.primary.button.color.active To change the color of the submit button rgb(31,92,255)
oaa.prefs.ui.theme.default.header.bar.color To change the color of the header bar rgb(99,99,0)
oaa.prefs.ui.theme.default.footer.bar.color To change the color of the footer bar rgb(99,99,0)

13.2.3 Configuration Properties to Customize the Runtime UI

Learn about the configuration properties that you can set to customize the Runtime UI.

Table 13-3 Configuration Properties to Customize the Runtime UI

Property Name Description Sample Value
oaa.rui.ui.theme.default.image.path.logo Logo image path https://www.example.com/content/images/logo.jpg
oaa.rui.ui.theme.default.image.path.logo.useMaxSpace Size for custom logos. By default custom logos render to 50x42 pixels (px), regardless of size. For example, if the logo is 40x40 px, the logo will stretch to 50x42 px. If you set useMaxSpace to true, the dimensions of the 40x40px logo will remain intact. This is true as long as the logo width is < 200px and logo height is <42 px. Anything over this limit will resize to 200x42px. true
oaa.rui.ui.theme.default.image.path.background Background image path https://www.example.com/content/images/background.jpg
oaa.rui.ui.theme.default.image.path.favicon Favicon image path https://www.example.com/content/images/favicon.jpg
oaa.rui.ui.theme.default.font.text.title Application title text Example Company Advanced Authentication
oaa.rui.ui.theme.default.footer.color Footer text color #00688c
oaa.rui.ui.theme.default.footer.color.copyrightNotice "copyrightNotice" text color rgba(22, 21, 19, .6)
oaa.rui.ui.theme.default.footer.text.about Footer text for "about" About Example Company
oaa.rui.ui.theme.default.footer.text.contactus Footer text for "contactus" Contact us
oaa.rui.ui.theme.default.footer.text.legalnotice Footer text for "legalnotice" Legal Notice
oaa.rui.ui.theme.default.footer.text.termsofuse Footer text for "termsofuse" Terms of use
oaa.rui.ui.theme.default.footer.text.privacyright Footer text for" privacyright" Privacyright
oaa.rui.ui.theme.default.footer.link.about Footer "about" link http://www.example.com/us/corporate/index.html#menu-about
oaa.rui.ui.theme.default.footer.link.contactus Footer "contactus" link http://www.example.com/us/corporate/contact/index.html
oaa.rui.ui.theme.default.footer.link.legalnotice Footer "legalnotice" link http://www.example.com/us/legal/index.html
oaa.rui.ui.theme.default.footer.link.termsofuse Footer termsofuse link http://www.example.com/us/legal/terms/index.html
oaa.rui.ui.theme.default.footer.link.privacyright Footer privacyright link http://www.example.com/us/legal/privacy/index.html
oaa.rui.ui.theme.default.footer.text.copyrightNotice Footer text for copyright Copyright © 2021, Example Company and/or its affiliates. All rights reserved.
oaa.rui.ui.theme.default.image.tiled.background If specified as true, background image will appear in a tiled manner false
oaa.rui.ui.theme.default.font.family If specified, custom font family name will be used. Refer to <Generic font families> Oracle Sans
oaa.rui.ui.theme.default.button.color.active Active button color rgb(79, 105, 63)
oaa.rui.ui.theme.default.button.color.hover Hovered button color rgb(87, 115, 70)
oaa.rui.ui.theme.default.button.color.focus Focused button color rgb(95, 125, 79)
oaa.rui.ui.theme.default.font.color.factor Text color rgb(22, 21, 19)
oaa.rui.ui.theme.default.font.color.factorlink Link color #00688c
oaa.rui.ui.theme.default.font.color.label Label color rgba(22, 21, 19, .6)
oaa.rui.ui.theme.default.font.color.header Factor header color rgb(22, 21, 19)

13.2.4 Configuration Values for Generic Font Families

Learn about the possible configuration values that you can set for the generic font families.

Table 13-4 Configuration Values for Generic Font Families

Font family Possible Values
'sans-serif': normal fonts without serifs

Arial

Helvetica

Verdana

Trebuchet MS

Gill Sans

Noto Sans

Avantgarde

TeX Gyre Adventor

URW Gothic L

Optima

Arial Narrow

'serif': normal fonts with serifs

Times

Times New Roman

Didot

Georgia

Palatino

URW Palladio L

Bookman

URW Bookman L

New Century Schoolbook

TeX Gyre Schola

American Typewriter

'monospace': fixed-width fonts

Andale Mono

Courier New

Courier

FreeMono

OCR A Std

DejaVu Sans Mono

'cursive': fonts that emulate handwriting

Comic Sans MS

Comic Sans

Apple Chancery

Bradley Hand

Brush Script MT

Brush Script Std

Snell Roundhand

URW Chancery L

'fantasy': decorative fonts, for titles, etc.

Impact

Luminari

Chalkduster

Jazz LET

Blippo

Stencil Std

Marker Felt

Trattatello