While customizations are generally advised against for SaaS solutions, personalizations play a necessary role in most Oracle Cloud implementations. Personalizations allow you to configure the look and feel of the user interface (UI) rather than modify the code directly. While there are a number of personalization tools, the Appearance tool is a common starting point for UI updates. This guide will cover how to best use the Appearance tool to align your Oracle Cloud User Interface with your organization’s branding needs.
Appearance Tool
The Appearance tool controls the look and feel of the application. This includes the company logo, background image, color scheme, springboard appearance, and design of other buttons and icons that appear throughout the UI. Each of these components comprises a theme, which you can create and/or modify to best reflect your organization’s branding.
Sandboxes
A sandbox is used to experiment with customizations. Any changes made while “playing around” in the sandbox will not be visible to anyone except the sandbox owner. If the owner wants to make the changes visible to the end-user, they can choose to publish the sandbox. If not, the sandbox owner can simply leave the sandbox and the changes will not be reflected in the UI.
Note: To access the sandbox work area, you must have the Application Developer job role.
Themes
Oracle recommends that you create your own theme (based upon a predefined theme) and save it. If you were to use a default theme, your changes would be limited to the company logo and cover image:
As most clients prefer a look and feel that reflects their company branding, these steps will walk you through creating your own theme, rather than using the default.
Selecting a Predefined Theme
1. After logging in to your cloud environment, click the Navigator icon. Select Configuration > Sandboxes.
2. In the Sandboxes work area, click Create Sandbox.
3. Enter in a unique sandbox name. Check the box next to Appearance to activate the tool.
4. Click Create and Enter to enter the sandbox.
5. Once the gold banner appears at the top of your screen, you are in the sandbox. From the banner, click the Tools drop-down and select Appearance.
6. If you were using the default theme, you could stop here and simply update the logo and/or cover image. Since you are creating a new theme, click the Themes drop-down and choose a predefined option.
a. Note: depending on who has configured a theme before you, there may be some saved themes that you can use as your starting point. Either way, you can play around with predefined themes until you find the one that is closest to your branding requirements.
7. Once you have selected a predefined theme, you will land on the theme configuration page.
Customizing a Predefined Theme
Once you have selected a predefined theme, you will land on the theme configuration page. This page is divided out into four sections: General (controlling the look and feel of the home page), Navigation Icons, Pages, and Buttons.
General
1. The first drop-down defines home page layout. The Newsfeed option is recommended, as it provides easy access to quick actions, assigned tasks and announcements.
Newsfeed Layout:
Tasks, News and Announcements:
Banner Layout:
Panel Layout:
2. Once you select your home page layout, add your company logo via file upload or URL.
a. This will appear next to the Navigator icon in the upper-left corner.
b. It is recommended to select a black or white monochrome logo. Choose whichever option will contrast the most with your background color.
3. If you want to configure a bookmark icon for desktop, or shortcut icon for mobile, check the applicable box and upload the corresponding image.
4. Optionally select a Background Image to appear on your home page.
a. The background image is the teal waterpark in this example:
5. Select a Global Region Background Color and Global Text and Icon Color.
a. The global region is the top banner that contains the navigator, logo, home icon, etc. It is the black banner in this example:
b. Note: often the Global Region Background Color will be set as transparent, or the same color as the background.
6. You can optionally select a cover image. This image would appear within most employee/manager self-services work areas, directly behind quick actions, and behind Things to Do on your home page. In this example, the cover image is the tan watermark:
Navigation Icons
- In this section, you can update the look and feel of the home page/springboard icons. You can preview these changes using the preview feature to the right of the dropdowns.
Pages
1. You can update the look and feel of various landing pages using the page section.
2. These updates would show up on the Settings and Actions menu, Worklist, and Setup and Maintenance pages.
a. You can see the heading color, link color, selection color, and highlight color (chat icon) reflected on this Worklist page:
3. Card style can be either light or dark.
a. Dark: Displays the cards with a white or light grey background color and dark text.
b. Light: Displays the cards with a dark grey background color and light text.
4. Landing Page Icons for Employees are reflected on employee and manager self-service pages, as well as admin work areas such as Profiles.
Landing Page Icons:
Buttons
- You can use the Buttons section to update the look and feel of buttons that appear throughout the application.
Applying Changes
1. Once you have applied your changes to the home page, navigation icons, pages and buttons, click Actions > Save As in the upper-right corner.
2. Enter in Theme Name and click OK.
3. Note: if you would prefer to view your changes without saving as a theme, click the Apply button instead. This will make your changes visible on the front-end, but you can continue to edit your theme upon reentering the Appearance tool.
For more information related to Cloud Personalization and Extendability, view the Oracle Cloud Solutions section of our website.
References:
For additional information regarding theme updates, check out the Oracle Help Center document Configuring and Extending Applications.
