13.2 Customizing the OAA User Interface
You can customize certain features of the OAA user interface (UI), such as the Administration Console UI, Self-Service Portal 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/v1Note:
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 keep in mind the following 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 Self-Service Portal UI
Learn about the configuration properties that you can set to customize the Self-Service Portal UI.
Table 13-2 Configuration Properties to Customize the Self-Service Portal 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 |