This guide also applies to on-premises implementations

3Page Customization

This chapter contains the following:

Customizing Pages: Overview

Use Page Composer to customize page content, layout, and more. Using other tools, you can create new pages and customize UI text, themes, infolets, and so on.

For example, you can:

  • Use tools such as User Interface Text Customization to customize UI text.

  • Use the Appearance page to change the look and feel of the application.

  • Open an infolet page in Page Composer to customize it.

  • Use the Page Integration page to create and manage pages for hosting third party applications.

Page Composer Overview

Prerequisites for Customizing Existing Pages: Explained

Before customizing pages, do the following tasks:

  • Understand the typical workflows for working with run time customizations.

  • Verify that the page is customizable. To do so, check if either the Customize Pages or the Customize <Page Name> Pages menu item is available under the Administrator menu. If no, then that means the page can't be customized.

  • Confirm that your privileges are sufficient for customizing the page.

  • Activate a sandbox.

Page Composer Views: Explained

You can use either Design view or Source view for viewing and customizing page content and layout in Page Composer. To open a view option, select it from the View menu at the top left corner of the page. Although both views share many common customization features, you can use some unique features in each view.

Tip: Use the Dock option at the bottom right corner of the page to specify whether the page source appears on top, bottom, left, or right of the Selection pane. This option is available only when you open the page in Source view.

Design View

In Design view, you see one region that shows a WYSIWYG rendering of the page and its content. Work with components directly and access their properties from the toolbar in the chrome of the individual component.

Source View

In Source view, you see two regions:

  • Selection pane, showing a WYSIWYG rendering of the page and its content

  • Source pane, showing a hierarchical ordering of the page components, including some components that otherwise don't appear on the page. You can select and configure such components in Source view.

Tip: Controls on individual components are inactive in Source view, but you can click an individual component to select it.

In Source view, you can:

  • Click a component in the Selection pane to highlight the component in the hierarchical list. The cursor turns to a magnifier and a blue outline appears around the component selection. You can also traverse the hierarchy and select components directly.

  • Click Edit on the view header to work with components indirectly and access their properties. You can also right click the object in the hierarchy, and click Edit.

Page Component Properties: Explained

All components have configurable properties that control, or express their appearance and functionality. Many properties are common to all component types, while some properties are unique to one component type. Use the Component Properties dialog box to view the properties of a component. To open this dialog box, select the component that you want to edit, and click Edit. You can see properties of similar functions under tabs that name the category of the properties.

Note: Properties and tabs can vary from component to component.

Component Property Tabs

This table describes the tabs that you may see in a component properties dialog box.

Tab Description

Parameters

Settings that control component aspects that are specific, or often unique to the component.

For example, on a page containing a map, a component may have a parameter that provides a choice between units of measurement.

Display Options

Settings that affect the chrome of a component, including:

  • Header, header text, and border

  • Actions menu

  • Edit, Remove, Expand, Collapse, and other icons

  • Tooltips

For example, display options on image layout components specify the image source URL and its optional link target.

Child Components

The list of all components contained within and under the control of the parent component, including controls for ordering the child components.

Style

Content Style

Settings that affect the look and feel of the component chrome or the component contents. These settings override corresponding values from a parent object, such as a component, page, and application, providing an opportunity to fine-tune appearance.

For example, font, color, and dimension.

Some style properties may be disabled at the component level if other page or application elements (such as the skin) don't support modification to the property.

Events

Events and event handlers for all the components on the current page that the current component can consume.

For example, an event can be selecting a check box within the current context. The code that runs and drives the result of an event, such as making another component visible, is an event handler.

Working With Components in Page Customizations: Procedure

Use the Resource Catalog to customize pages. This catalog provides a selection of task flows, portlets, and layout components. Open the Resource Catalog in Page Composer from either Design view or Source view.

Aspects of components pertinent to page customizations include:

  • Opening the Resource Catalog

  • Adding components

  • Hiding components manually

  • Hiding components programmatically

Prerequisites

Activate a sandbox.

Opening the Resource Catalog

In Design view:

  1. Open the page that you want to customize in Page Composer.

  2. From the existing components, select the one that you want to be the parent component.

    Tip: Alternatively, use the Add Box icons (Add Box Above, Add Box Below, Add Box Left, and Add Box Right) to insert a box component. Then select the component as the parent component.
  3. Click the Add Content button associated with the parent component.

    The Resource Catalog appears.

Adding Components

In Design view:

  1. Open the Resource Catalog.

  2. In the Resource Catalog, find the component that you want to add.

  3. Click the Add icon associated with the component.

  4. Cut and paste, or drag and drop the component to place it.

In Source View:

  1. Select the container component in the selection pane.

  2. In the Source view toolbar, click Add Content.

  3. In the Resource Catalog, find the component you want to add.

  4. Click the Add icon associated with the component.

Hiding Components Manually

Use the Show Component property to specify whether the component appears to users at run time. By default, all components are visible. To manually hide a component, deselect Show Component on the Component Properties dialog box.

If the component is a:

  • Child component, then deselecting the Show Component property hides only the child component.

  • Parent component, then deselecting the Show Component property of the parent component hides the parent and all child components it contains. So, when you hide a parent component, you automatically hide all child components.

You can do any of the following:

  • Hide a child component directly

  • Hide a child component from within the parent component

  • Hide a parent component and all child components

To hide a child component directly:

  1. Click the Edit icon in the header of the child component. This opens the Component Properties dialog box.

  2. Click the Display Options tab.

  3. Deselect Show Component.

  4. Click OK.

To hide a child component from within the parent component:

  1. Click the Edit icon on the containing box's toolbar.

  2. Click the Child Components tab.

  3. Deselect the box next to the component you want to hide.

  4. Click OK.

To hide a parent component and all child components:

  1. Click the Edit icon in the box header.

  2. Click the Display Options tab.

  3. Deselect Show Component.

  4. Click OK.

Hiding Components Programmatically

You can add an Expression Language (EL) expression to a component that enables you to set a condition for hiding the component. For example, suppose you have two check boxes (1 and 2) on a page. You also have a button (B) that you want to be visible only if check box 2 is selected. To step through the logic, ask yourself questions such as the ones in the following table.

Question Answer Purpose of Question

What's the condition?

What action or event must happen?

Check box 2 is selected

Determines what the occurrence, or event, is.

Determines the component that triggers the event.

Determines what expression to write.

What happens when the condition is met?

What happens when the event happens?

Button "B" appears.

Show the component: Button B

(The implication is that button B is hidden until the event occurs.)

Determines the effect of the action.

What property determines whether a component is visible?

The Show Component property

Determines the property the code affects.

So the logic is: If 2 is checked, then the Show Component property of B is activated.

You place the expression on the component that receives the action.

Here's a sample code that you may add to the component.

#{if checkbox2.selected = true}

After you think through the logic and find the correct expression, add it to the property. You can add an expression using the expression builder for the Show Component property only on dashboard pages; not on work area pages. Also, only administrators can perform this task.

To open the EL Editor and add an expression to a property for a dashboard page:

  1. Click the Edit icon in the component header.

  2. Click the Display Options tab.

  3. Click the Edit icon next to the Show Component property, and select Expression Builder....

  4. Add an expression to check for an event or condition, and set the property. Based on the result, turn the property on or off.

To hide a parent component and all child components programmatically for a dashboard page:

  1. Click the Edit icon in the box header.

  2. Click the Display Options tab.

  3. Click the Edit icon next to the Show Component property, and select Expression Builder....

  4. Add an expression to check for an event or condition, and set the property. Based on the result, turn the property on or off.

Customizing Tabs on Application Pages Using Page Composer: Worked Example

This example demonstrates how to customize tabs on pages using Page Composer.

The following table summarizes the key decisions for this scenario.

Decisions to Consider In this Example

Who do you want to make the customization for?

All users

What customizations are you going to do?

Hide the Incentive Management tab and the Projects tab from the Worklist: Notifications and Approvals page

Prerequisites

Activate a sandbox.

Customizing Tabs

Do the following:
  1. From the Navigator menu, select Tools - Worklist.

  2. Click your user name in the global area, and select Customize Pages under Administration.

  3. Select Site layer as the customization layer, which affects all users.

  4. In the View menu at the top of the page, make sure that the Design view is selected, which lets you navigate to the component you want to customize.

  5. Click the Select tab.

  6. Hover over any tab on the page, and click when the cursor turns to a magnifier and a blue outline appears around the tab.

  7. Select Edit Parent Component.

  8. In the Component Properties dialog box, click the Children tab.

  9. Deselect Incentive Compensation and Projects to hide these tabs from the page.

  10. Click OK.

  11. Close Page Composer.

Making Customizations Visible Based on User Roles: Worked Example

This example demonstrates how you can make customizations visible to a specific user role.

To control page components conditionally based on user role:

  • Create security privileges

  • Add an Expression Language expression to the component property that you want to control

The following table summarizes the key decisions for this scenario.

Decisions to Consider In This Example

What's the page object you're securing?

Reports link

To which user role you want to make the customization visible?

Hiring managers, Sherry Callaway and Terrance Whitaker

Tip: Create a role just for testing customizations. Call it DEVCUST_TEST_ROLE. When you're sure that the customization works, change the security to the appropriate role.

Which expression to add for verifying whether a user has the appropriate privilege?

#{securityContext.userGrantedPermission['MANAGER_REPORTS_LINK_PRIV']}

As a prerequisite, activate a sandbox.

Making Customizations Visible to a User Role

Follow these steps:

  1. Create a privilege.

  2. Add the 'MANAGER_REPORTS_LINK_PRIV' object to 'DEVCUST_TEST_ROLE'.

  3. Assign DEVCUST_TEST_ROLE to Terrance and Sherry.

    Note: Make sure that Terrance and Sherry have access to the page before you make any changes.

  4. Open the page, having the Reports link that you want to customize, in Page Composer, and select the Reports link component.

  5. Click the Edit icon. This opens the Component Properties dialog box.

  6. Click the Display Options tab.

  7. Click the Edit icon next to the Show Component property, and select Expression Builder....

  8. Add an expression to verify whether the user has the appropriate privilege. Use this sample code: #{securityContext.userGrantedPermission['MANAGER_REPORTS_LINK_PRIV']}

  9. Save the property changes, and close Page Composer.

    After you change the show component property, whenever users open this page, the application evaluates the expression. Since Sherry and Terrance have the privilege, the Show Component property evaluates to be selected. Hence, Sherry and Terrance can see the Reports link while all other users can't.

    Tip: Use Oracle JDeveloper to define custom permissions that render UI components based on the user's access rights. (Oracle JDeveloper is not available in Oracle Cloud implementations.)

Customizing Objects That Appear on Multiple Pages: Points to Consider

Use Page Composer to customize objects that appear on multiple pages. Whether your customizations affect one or more pages depends on the way you include the object on the page and the applications that you use.

Consider these points when you customize objects that appear on multiple pages.

Customization Appearance Based on Shared and Non Shared Task Flows

The following table briefly describes the task flow scenarios when object customizations appear on one or more pages.

If the object is... Then the customizations...

Not part of a shared task flow

Don't appear on other pages

Part of a shared task flow

Do appear on all pages that include the shared task flow

Caution: When shared task flows include embedded logic that uses data from the page, the logic can override the customizations that you make in Page Composer.

FAQs for Page Composer Overview

How can I move page components?

To move page components using Page Composer:

  • In Design view, drag and drop the component

  • In Source view, do any of the following:

    • Cut and paste the component

    • Drag and drop the component

    • Open the Component Properties for the container component and rearrange the components on the Child Components tab

How can I delete components from a page?

Click the Delete icon in the component header in Page Composer.

Caution:
  • Delete a component only if you're certain that no other components or processes depend on that component. If you're unsure whether any dependencies exist, then hide the component instead of deleting it.

  • If you delete a parent component, you delete all the child components automatically.

How can I work on customizations, but prevent users from viewing them until the customizations are complete?

Create or select an appropriate sandbox, and set it as active to capture your customizations using Page Composer. When you're ready, publish the sandbox to make your changes available to users.

What happens if my customizations or personalizations make the page inaccessible?

You must contact an administrator, and the administrator can use the Manage Customizations task to view and, if necessary, delete your changes.

How can I reset a page or task flow to a previously saved version?

To reset a page to a previously saved version or the original out-of-the-box state, click Reset Page in Page Composer (Design or Source view).

To reset a task flow to a previously saved version or the original out-of-the-box state, click Reset Task Flow in Page Composer (Source view only) while you have the task flow open.

How can I use metadata to perform customization-related tasks that I can't do in Page Composer?

In Page Composer, open the Manage Customizations dialog box, and download the metadata to inspect the existing customizations in the metadata.

Page Content and Template Customization

Changing Page Layout Using Page Composer: Procedure

Page layout defines the number, placement, and orientation of content regions on a page. Although you set the layout style while creating a page, for some layouts, you can change the layout style even after adding content to the page.

Note: You can't change the page layout for all pages.

Prerequisites

Activate a sandbox.

Changing Page Layout

To change the layout of a page:

  1. Open the page in Page Composer.

  2. From the View menu, select Design.

  3. Click Change Layout.

  4. Select the new layout.

Customizing the Global Page Template: Explained

The global page template provides a common header area and the footer panel for all pages in your application. You can use Page Composer to customize the global page template. To open the global page template in Page Composer, click your user name in the global area, and select Customize Global Page Template from the Administration menu.

You can make the following customizations to the global page template:

  • Add components

  • Edit components

    Example: Add expression language to hide the tags link

  • Delete components

    Example: Remove the tags link

Tip: When you move your cursor over the global page template, the areas that you can edit display a blue outline.

You have two separate global page templates - one for the desktop user interface (UI) and the other for the simplified UI. If you click Customize Global Page Template from a desktop page, you will customize the template for the desktop UI. Similarly, if you click Customize Global Page Template from a simplified page, you will customize the template for the simplified UI. Hence, to ensure a consistent look and feel for all pages, you must customize the global page template twice, once for each UI.

Adding Components to the Global Page Template

To add components to the global page template:

  1. Open the global page template in Page Composer.

  2. Select the portion of the global area to which you want to add a component, and click Add Content.

  3. In the component catalog, select Components to display the list of available components.

  4. Click the Add button associated with the component you want to add.

    The component appears in the global area.

  5. Change component properties, as appropriate. For example, if you added the Text component, enter the text that you want to display.

  6. After completing your changes, click Close. When prompted, click Save to save your changes.

Editing Components in the Global Page Template

To edit components in the global page template:

  1. Open the global page template in Page Composer.

  2. Select the component that you want to edit.

  3. Click Edit.

  4. Edit the component properties, and click OK to save your changes.

  5. After completing your changes, click Close. When prompted, click Save to save your changes.

Deleting Components from the Global Page Template

To delete components from the global page template:

  1. Open the global page template in Page Composer.

  2. Select the component that you want to delete.

    When you move your cursor over the global page template, the areas that you can edit display a blue outline.

  3. Click Delete. When prompted, click Delete to delete the component.

  4. After completing your changes, click Close. When prompted, click Save to save your changes.

Editing Footers in the Global Page Template

To edit footers in the global page template:

Note: For simplified pages, you can't customize footers in the global page template.
  1. Open the global page template in Page Composer.

  2. Select the left region of the footer area. In the Source region, make sure the spacer: 40px node is selected after you select the left region of the footer area.

  3. In the Source region, select the panelGroupLayout: horizontal node that appears above the spacer, and click Add Content.

  4. In the component catalog, select Components to display the list of available components.

  5. Click the Add button associated with the component you want to add. The component appears in the footer.

  6. Change component properties, as appropriate.

  7. After completing your changes, click Close. When prompted, click Save to save your changes.

For information about making skin customizations, such as selecting a different color palette, see the Oracle Fusion Applications Extensibility Guide for Developers.

Customizing Page Titles: Procedure

Page titles appear in multiple places in the application: the browser header, page headings, tab titles, and as items in task lists and the Navigator.

Three separate title and label properties control the different places where the title appears. The properties are:

  • Task list Page Title property

  • Task list task Label property

  • Navigator item node Label property

To customize a page title, you must enter the same value for all three properties. You can change the two task list properties using Page Composer, and the navigator item node property using the Structure page.

Tip: You can also make text changes in page titles, task labels, and navigator item nodes using the User Interface Text tool.

If your application requires language localization, you must provide the translated custom text. For more information about translating custom text, see the Oracle Fusion Applications Extensibility Guide for Developers.

Prerequisites

Activate a sandbox.

Task List Page Title Property

Use this property to control the text that appears in the browser header.

To change this property:

  1. Open the page you want to customize, and then open Page Composer.

  2. From the View menu, select Source.

  3. In the Selection pane, click a task list link. An edit warning confirmation dialog box appears.

  4. Select Do not ask next time.

  5. Click Edit.

  6. In the Source pane, right-click the panelFormLayout node, and select Edit. The panelFormLayout Component Properties dialog box appears.

  7. Select the Tasks List Properties tab.

  8. Enter the new value in the Page Title field.

  9. Click Apply to save the changes, if you are changing the next property now. If you keep the dialog box open, skip the next step and then start at step 6 in the next section.

  10. Click OK to save the changes and close the Component Properties dialog box.

Task List Task Label Property

Use this property to control the text that appears:

  • In page headings and tab titles

  • As menu items in task lists

To change this property:

  1. Open the page you want to customize, and then open Page Composer in Source view.

  2. In the Selection pane, select the task list. A confirmation dialog box appears.

  3. Click Edit to edit the task flow.

  4. In the Source pane, click the Edit Task Flow link next to the first subordinate region node.

  5. Click the Edit icon to edit the task flow. The Component Properties dialog box appears.

  6. Click the Tasks List Task Properties tab.

  7. Expand the tree to display the child items in the task list hierarchy.

  8. Right-click the child item that you want to customize and click Edit in the toolbar.

  9. Enter the new value in the Label field.

  10. Click OK to save the changes and close the Component Properties dialog box.

Navigator Item Node Label Property

Use the Structure page to control the names of categories and page entries that appear as navigator menu items.

To change this property:

  1. From the Navigator menu, select Tools - Structure.

  2. On the Structure page, click the name link for the category or page entry.

    Tip: You can use the search panel on the Structure page to find the category or page entry that you want to rename.
  3. On the Edit Page Entry or Edit Category page, enter the new value in the Name field.

  4. Click Save and Close.

Customizing Task Lists: Procedures

Use task lists to organize direct links to task flows in your application and web pages outside your application. You link task flows and web pages to tasks through the Tasks List Task Properties in the Component Properties dialog box. Use the Source view of Page Composer to customize task lists.

To customize task lists, you should know how to:

  • Insert tasks into the task list.

  • Remove tasks from the task list.

  • Reorder tasks in the task list.

  • Change properties associated with tasks and task lists.

To perform these customizations:

  1. Navigate to the task list that you want to change and open Page Composer.

  2. If you are in Design view, change to Source view. You customize task lists in Source view only.

  3. In the Selection region, click the task list.

  4. Click Edit to confirm your intent and automatically select the task list entry in the Source region.

  5. In the Source region, click the Edit Task Flow link next to the task list region.

  6. Click Edit to confirm your intent and automatically select the task list entry in the Source region.

  7. In the Source region, right-click the panelFormLayout node, and select Edit.

    The Component Properties: panelFormLayout dialog box appears.

  8. Click the Tasks List Task Properties tab.

  9. Expand the tree to view the hierarchy of items in the task list.

  10. Select an item in the task list hierarchy.

  11. The toolbar provides multiple customization options. You can edit the selected item or insert a new task in the task list.

  12. If you insert a new task in the task list, you must enter values in several properties.

    The following table describes the properties that you use to create a task in your task list.

    Property Description or Value

    Web Application

    Select the target web application from the list of web applications that you defined in the deployments tables.

    Oracle Cloud customers must contact the help desk at https://support.oracle.com to log a service request and obtain a list of valid values.

    Focus View Id

    Enter the focusViewId value of the target page, for example, /ServiceRequest.

    Focus View ID and Web Application are mutually inclusive properties.

    Action

    Enter the action that occurs when the user selects this item in the task menu.

    Pages with actions appear in the adfc-config.xml file. These actions can take the user to a particular page. If you specify an action here, then the Web Application and Focus View ID values are ignored. This Action attribute is used in an ADF Controller navigation.

    Label

    Enter a name for the new task.

    This name appears in the task list menu and on the task tab when opened if the value of the page attribute isDynamicTabNavigation is true.

    Rendered

    Select this to display the item in the task list. Deselect to hide the item.

    To help you identify hidden items quickly, deselected items appear in italics on the customization dialog box.

    Destination

    Enter the full URL for the item, such as http://www.example.com. Use to open a new window that takes you out of the Oracle Fusion Middleware UI Shell pages.

    Destination takes precedence over any specified Web Application value.

    Task Type

    Select the task type for newly created items from the list of these values:

    • dynamicMain

    • defaultMain

    • defaultRegional

    • taskCategory

  13. Save any changes that you made to the properties, and then save the page in Page Composer.

Customizing Dialog Box Content Using Page Composer: Procedure

Use Page Composer and work in source view to customize the content in your dialog boxes.

Prerequisites

Activate a sandbox.

Customizing Dialog Boxes

To customize dialog box content:

  1. Open the page where the dialog box appears, and then open Page Composer.

  2. From the View menu, select Source. You must be in Source view to customize dialog box content.

  3. Select the button that opens the dialog box.

  4. Click Edit to open the Component Properties dialog box.

  5. Click the Child Components tab.

  6. Edit the dialog box content.

  7. Click Apply to save your changes, then OK to save your changes and close the Component Properties dialog box.

Saved Search Customization

Making Saved Searches Available to All Users: Procedure

Use Page Composer to customize saved searches, and make them available for all users. Create and edit saved searches using Page Composer at the site layer. Users can run these saved searches again later to use the same search criteria and other settings. You must create or edit saved searches only at the site layer to make them available for all users.

Customizing Saved Searches for All Users

Follow these steps:

  1. Activate a sandbox.

  2. On the search page that has a Save button, click your user name in the global area, and select Customize <Page Name> Pages under Administration.

  3. If prompted to select a customization layer, select the site layer to open the search page in customization mode.

  4. From the View menu, select Design.

  5. Create and edit saved searches.

    Note: The steps for creating and editing saved searches are the same regardless of whether you're working on saved searches for yourself or for all users.
  6. Save your changes and close Page Composer.

  7. After testing your changes, publish the sandbox to make your changes available to all users.

Saving Searches for Searches with Multiple Criteria: Procedure

On many pages, you can run a search with multiple search criteria to find specific business objects. Some of these searches have a Saved Search list, as well as a Save button below the search criteria. A saved search captures search criteria and other settings so that you can easily run the same search again later. Aside from using any predefined saved searches, you can create and edit them for your own use. If you have the right roles, you can also customize saved searches for other users using Page Composer.

Search on the page with multiple search criteria
Creating Saved Searches

Follow these steps:

  1. Go to a search that has a Save button.

  2. Optionally add or reorder fields, if available.

  3. Enter your search criteria values, and, click the Save button.

  4. Name your saved search and define its settings:

    • Set as Default: The saved search is automatically selected whenever you open this page.

    • Run Automatically (if available): The saved search runs on this page as soon as you select it from the list of saved searches.

    If you select both options, then the saved search automatically runs whenever you open this page.

  5. Close the dialog box.

Your saved search can be limited to the current page, or in some cases available in other searches for the same object.

Changing the Search Criteria in Saved Searches

Follow these steps:

  1. Select the saved search if it's not selected already.

  2. Set your search criteria, including any additional fields.

  3. Click the Save button.

  4. If the saved search is one that you created, save without changing the name.

    If it's predefined, then you can't overwrite it, so you create a new saved search with a unique name.

Changing Settings or Renaming and Deleting Saved Searches

Follow these steps:

  1. Go to a search that has a Save button.

  2. Select Personalize from the Saved Search list.

  3. In the Personalize Saved Searches dialog box, select a saved search.

  4. Change any of the settings, where available.

    • Set as Default: The saved search is automatically selected whenever you open this page.

    • Run Automatically: The saved search runs on this page as soon as you select it from the list of saved searches.

    • Show in Search List: The saved search is available for you to select and run on this page.

      • You can still find hidden saved searches in the Personalize Saved Searches dialog box.

      • You can't change this setting if the saved search is currently selected on your page.

    Note: Some settings can't be changed for predefined saved searches. What you do change applies only to you, unless you're customizing the saved search using Page Composer.
  5. If you selected a saved search that you created, then you can rename or delete it. You can't do so for predefined saved searches.

  6. Save your changes and close the dialog box.

Saving Searches for Keyword Searches with Filters: Procedure

One type of search you might find on the page is a keyword search with filters. Some of these searches have predefined saved searches, and you can also create and edit saved searches for your own use. A saved search captures entered search terms, filters, and other settings so that you can easily run the same search again later. If you have the right roles, you can also customize saved searches for other users using Page Composer.

Creating and Editing Saved Searches

Follow these steps:

  1. Enter search terms in the search field, and click Search, or select a saved search in the autosuggest.

  2. Click the Show Filters link if filters are currently hidden

  3. Optionally add or reorder filters, if available.

  4. Set filter values, and click the Save button.

  5. Name your saved search.

    • To create a saved search, enter a new, unique name.

    • To update an existing saved search that you created, save with the original name.

    You can't overwrite predefined saved searches by using their names, but you can create a copy with a unique name.

  6. Click Set as Default if you want the saved search to be automatically selected whenever you open this page.

  7. Click OK.

Your saved search can be limited to the current page, or in some cases available in other searches for the same object.

Changing Settings or Renaming and Deleting Saved Searches

Follow these steps:

  1. Click the Show Filters link if filters are currently hidden.

  2. Select Manage from the Saved Search list.

  3. Define settings for any saved search, predefined or custom, in the Manage Saved Searches dialog box:

    • Default: The saved search is automatically selected whenever you open this page.

    • Show in Saved Search List: The saved search is available for you to select and run on this page. You can still find hidden saved searches in the Manage Saved Searches dialog box.

    Note: Changes you make to predefined saved searches apply only to you, unless you're customizing the saved search using Page Composer.
  4. The Active setting identifies the saved search that's currently selected on the page. You can designate a different active saved search to have that saved search automatically selected as soon as you click OK in this dialog box.

  5. For custom saved searches only, you can also rename or delete the saved search.

  6. Click OK.

Simplified Pages Layout and Content

Customizing Simplified Pages Using Page Composer: Procedure

On a simplified page, you can customize user interface (UI) components by updating their properties, for example to change field labels, hide the component, or make a check box required.

When you start customizing simplified pages, by default, you can use the Design view. In the Design view, you can add content and make layout changes only in some pages. For other pages, you must use the Source view to make such customizations.

Note: Any changes you make apply:
  • Only to the page you're on.

  • To all or specific groups of users, depending on the customization layer you select before making changes.

Prerequisites

Activate a sandbox.

Customizing a UI Component

To update component properties:

  1. Click your user name in the global area and select Customize Pages.

  2. Select a customization layer, for example to make changes only for users with a specific job role.

    Note: When you customize a UI component for a specific job role, that job role must be assigned to you for you to test the customization in the sandbox. Your security administrator can either assign the job role to you directly, or make the job role self-requestable for you to add it yourself from the resource directory.
  3. By default, you start in the Design view, which lets you navigate to the component you want to customize.

    You can tell you're in this view when the Design button above the page is highlighted. To use the Source view, you must select Source from the View menu. This menu isn't displayed by default. To display the View menu, and then select Source, set the Source View for Page Composer Enabled profile option (FND_PAGE_COMPOSER_SOURCE_VIEW) to Yes.

  4. When you have found your UI component, click the Select button above the page.

  5. Hover over the UI component until a border appears around the component, and click.

  6. Select Edit Component.

  7. Update the component's properties to make the customization you want.

    Each component has its own set of properties, which may include some of the properties in this table. In Design view, you get the main properties only; but in Source view, you get all properties.

    Property Description

    Description

    Text used by screen readers, for information in addition to what is provided in the Short Desc property.

    Label

    Display text for the component, for example the field prompt or the single prompt for a group of check boxes.

    Read only

    Whether users can edit the component, for example if a check box can be selected or not.

    Rendered

    Whether the component is visible or hidden to users on the page.

    Required

    Whether users must enter something for the component before saving the page.

    Short Desc

    Text that appears when users hover or focus on the component, for example hover over a field label or click in the text box.

    Show Component

    Whether the component is visible or hidden to users.

    Show Required

    Whether an asterisk is displayed to indicate that the component is required.

  8. To customize more components, click Add Content to return to the Design mode and repeat steps 4 to 7.

  9. Click Close to save.

    If available, click Save and Label instead to also label your changes so that you can later revert to the customizations you're saving. Labels are saved with a prefix of composer_. For example, if you enter myLabel, then the label is composer_myLabel.

How can I post announcements on the home page?

Use the Announcements page to create, edit, and delete announcements. From the Navigator menu, select Tools - Announcements.

  • Only the announcement's content (not subject) appears on the home page.

  • If social networking features appear instead of announcements, then on the Set System Options page, change the home panel settings to display announcements. To open this page from the Navigator menu, select Tools - Structure, and then click Set System Options.

  • What you do on the Announcements page applies immediately to all users, even if you saved your changes while a sandbox is active and not yet published.

New Page Creation

Creating Pages for Hosting Third Party Applications: Procedure

Use the Page Integration pages to create pages for hosting third party applications to address needs specific to your organization. All these new pages are grouped under a single category on the Navigator menu and springboard.

Prerequisites

Activate a sandbox.

Creating the First Page

Follow these steps:

  1. From the Navigator menu, select Tools - Page Integration.

  2. Click New Page.

  3. On the Create Page page, enter a page name.

  4. In the Category Name field, enter a name for the category to place your page under.

    Note: You can move your new pages to other categories later using the Structure page.
  5. Search and select an icon for the page.

  6. Select the role to whom you want to grant access to the page.

  7. In the Web Page field:

    • Enter the application URL that you want to host on this page.

    • Alternatively, you can create a secure web page URL:

      1. Click the Create Secure Web Page URL icon.

      2. Select the name of the web application.

      3. Enter the destination for the web application.

      4. Enter a secure token name.

      5. Save and close the Create Secure Web Page URL dialog box.

      In a secure web page, the application validates the secure token and uses it to authenticate web services within the end-user context. Using this mode of customized access, a partner can directly perform an action or display information to the specific user without any additional authentication.

  8. To create a partner application for exporting to Oracle Marketplace, do the following:

    1. Select Partner Application for Oracle Marketplace. Once you create the first page without selecting this check box, you can't create partner applications any more.

    2. Enter the extension name and the extension short name for the partner application. The extension short name must start with an alphabet letter or underscore, and contain only alphanumeric characters and underscores.

      Caution: If the extension short name is invalid, you may destabilize the environment.
  9. Click Save and Close.

    New pages are secure. Your security administrator must assign the privileges shown on the Page Integration Overview page to users such that they can access these pages.

If you have only one page under a category, then that page icon appears at the top level (not under any category) on the springboard. However, such page icons appear under their respective categories on the Navigator menu.

Creating Subsequent Pages

After creating the first page, follow these steps to create more pages:

  1. On the Page Integration Wizard: New Pages page, click New Page.

  2. Enter a page name.

  3. Follow steps 5 to 7 in the procedure for creating the first page.

  4. Click Save and Close.

After you have created the first page, all subsequent pages are added in the same category as that of the first page, by default.

Managing Pages Hosting Third Party Applications: Procedure

After creating pages for hosting third party applications, manage them using the options available on the Page Integration Wizard: New Pages page and the Page Integration Wizard: Existing Pages page.

You can do the following actions:

  • Edit page settings.

  • Add tabs to new and existing pages.

  • Edit page tabs.

  • Rename Categories.

  • Navigate to pages.

Prerequisites

Activate a sandbox.

Editing Page Settings

Follow these steps:

  1. On the Page Integration Wizard: New Pages page, click the name link for the page that you want to edit.

  2. On the Edit Page page, make the required changes.

  3. Click Save and Close.

You can make the following changes to a page:

  • Change the icon for the page.

  • Change the web page URL that you want to host on this page.

  • Add tabs to the page.

  • Delete the page.

    Note: If a page has additional tabs, apart from the one created by default with the page, then you can delete the page only after deleting its tabs.
  • Edit the page tabs.

Adding Tabs to New and Existing Pages

When you create a page, a page tab is created by default. You can then add more tabs to your new and existing pages, as required.

To add tabs to new pages, follow these steps:

  1. On the Page Integration Wizard: New Pages page, click the name link for the page containing the tab that you want to edit.

  2. On the Edit Page page, click Add Tab.

  3. On the Create Tab page, enter a tab name.

  4. Search and select an icon for the page.

  5. Select the application role to whom you want to grant access to the page.

  6. In the Web Page field:

    • Enter the application URL that you want to host on this page.

    • Alternatively, you can create a secure web page URL:

      1. Click the Create Secure Web Page URL icon.

      2. Select the name of the web application.

      3. Enter the destination for the web application.

      4. Enter a secure token name.

      5. Save and close the Create Secure Web Page URL dialog box.

  7. Click Save and Close.

To add tabs to existing pages, follow these steps:

  1. Click the Page Integration Wizard: Existing Pages icon on the left region of the Page Integration Wizard: New Pages page.

  2. Click Add Tab to Existing Page.

  3. In the Select Page dialog box, select a page to add a new tab to.

  4. Follow steps 2 to 7 in the procedure for adding tabs to new pages.

Editing Page Tabs

To edit page tabs, follow these steps:

  1. On the Page Integration Wizard: New Pages page, click the name link for the page containing the tab that you want to edit.

  2. On the Edit Page page, click the name link for the page tab that you want to edit.

  3. On the Edit Tab page, make the required changes.

  4. Click Save and Close.

You can make the following changes to a page tab:

  • Change the icon for the page.

  • Change the web page URL that you want to host on this page tab.

  • Delete the page tab.

Renaming Categories

All pages that you create using the Page Integration Wizard: New Pages page are grouped under a single category. To rename the category for all pages, click Rename Category on the Page Integration Wizard: New Pages page.

Navigating to Pages

On the Page Integration Wizard: New Pages page, click the icon for the page that you want to navigate to, and view its content.

User Interface Text Customization

Selecting a Text Customization Tool: Points to Consider

You can modify and replace words or phrases that appear on pages, in messages, and other areas of user interface using several tools or tasks.

Text customization tools include:

  • Application Composer

  • User Interface Text

  • Page Composer

Multiple factors influence the option you select. For example:

  • The offering you use

  • The extent and scope of your customization

  • The components that you customize

This table presents the navigation and offering availability options associated with the tools you can use to customize user interface text.

Tool or Task Navigation Offering Availability

Application Composer

In the Navigator, select Tools - Application Composer.

Oracle Sales Cloud

User Interface Text

In the Navigator, select Tools - User Interface Text.

All applications

Page Composer

Click your user name in the global area, and select Customize <Page Name> Pages under Administration.

If the Customize <Page Name> Pages option isn't available under the Administration menu, then select Customize Pages instead.

All applications

Projects Custom Objects (Application Composer)

In the Navigator, select Tools - Projects Custom Objects.

Oracle Project Portfolio Management Cloud

Text Customization Scenarios

The following table includes possible scenarios for customizing user interface text. Compare your situation to the scenario in the table to determine the most appropriate tool for customizing text in your application.

Task Scope Tool or Task Example

Simultaneously replace multiple occurrences of a word or phrase that appear on multiple pages in multiple contexts

Comprehensive.

The customization affects multiple pages throughout your application. You can customize the embedded help (for example, hints) using this method.

User Interface Text

Change the word Employee to Associate on every page associated with Employee Self Service, Benefits, and Payroll.

Simultaneously replace multiple occurrences of a word or phrase that appear in parts of messages in the message dictionary

Comprehensive.

The customization affects multiple messages throughout your application.

User Interface Text

Change the word Employee to Associate in every message associated with Employee Self Service, Benefits, and Payroll.

Simultaneously replace multiple occurrences of the singular and plural forms of a word or phrase that appear in messages and on pages

Comprehensive.

The customization affects multiple pages and multiple messages throughout your application.

User Interface Text

Change the word Employee to Associate and Employees to Associates.

Replace a word or phrase that appears on a specific page

Targeted: A page

The customization affects user interface text on a specific page or page fragment.

Page Composer

Change the word Customer to Account on two specific pages.

Replace a word or phrase that appears in a specific message in the message dictionary

Targeted: A message

The customization affects part of a specific message in the message dictionary.

Manage Messages task

Change the word Recruit to Potential Employee, but only in two specific messages. All other messages continue to use the word Recruit.

Simultaneously replace a word or phrase associated with a specific object wherever the object appears

Targeted: A business object

The customization affects a specific component of a specific message in the message dictionary.

User Interface Text

In Oracle Sales Cloud, change the label of the opportunity business object, from Opportunity to Deal. You want the change to affect the business object wherever it appears.

Replace words or phrases that appear in menus and menu items

Targeted: Navigator menu item text

User Interface Text

Change the menu item label from Total Compensation Statements to Compensation Package Statements.

Regardless of the tool you use to make changes, all customizations are written in a single override bundle. Hence, the latest customization overwrites the previous ones.

Note: If you customize using plain text as input, it supersedes any customizations that use the override bundle. For example, if you enter a direct string in Page Composer, then Page Composer writes these customizations to a page customization file (not string resource). Hence, such customizations overwrite the customizations in the override bundle.

Bulk Text Customizations: Explained

Use the User Interface Text tool to simultaneously customize multiple occurrences of entire words or phrases in the user interface (UI).

You can use this tool to do the following activities for bulk text customization:

  • Sandbox integration

  • Case-sensitive and whole word searches

  • Singular and plural text replacement

  • Contextual previews

Note: You must activate a sandbox to use the User Interface Text tool.

To use the User Interface Text tool, from the Navigator menu, select Tools - User Interface Text. Then, click Search and Replace to search and replace texts in bulk. The User Interface Text tool searches text on pages and in messages in the message dictionary. The search includes user assistance only if the user assistance text is in the message dictionary. The customization functionality for this tool doesn't extend to text in service oriented architecture (SOA) processes.

In the User Interface Text tool, you can:

  • Search and replace

  • Preview and adjust

  • Save and publish

Search and Replace

After you activate a sandbox and click Search and Replace, enter the search text and the replacement text. You can enter the singular and plural forms of whole words or phrases. You can also use the following check boxes:

  • Match Case - To perform case-sensitive searches.

  • Match Complete Word or Phrase - To search for an exact match of your search text value.

Note: You can't perform partial word searches, nor can you use wildcard characters as part of the search text.

Use the sample values in this table as a guide when you enter search text.

Search Text Expected Match Match? Reason

Flex

flex

Flex

Yes

The application searches for any occurrence of your search string without regard to its position in the strings it searches.

Unless you select Match Case, all matches are considered exact.

flex

flexfields

Flexfields

A flexfield is a...

A Flexfield is a...

No

The application treats your search text value as a whole word. The text flex isn't the same as the text flexfields.

^Flex$

flexfields

Flexfields

A flexfield is a...

A Flexfield is a...

No

Use ^string$ in the search field to say this string must match the complete field.

The application treats your search text value as the entire value of the strings it searches.

Alternatively, select Match Complete Word or Phrase to search for an exact match of your search text value.

^Flex$

flex

Flex

Yes

Use ^string$ in the search field to say this string must match the complete field.

The application treats your search text value as the entire value of the strings it searches.

Unless you select Match Case, both matches are considered exact.

Use just ^string in the search field to say this phrase must appear at the beginning of a field.

flex credits

Flex Credits Configuration

Allow rollover of flex credits

Flex Credits

Manage Flex Credits Configuration

Yes

The application searches for the exact spelling and sequence of words without regard to their position in the strings it searches.

Unless you select Match Case, all matches are considered exact.

flex credits

flex credit shell plan

Allow rollover of flex credit for...

No

The application searches for the exact spelling and sequence of words without regard to their position in the strings it searches.

credits configuration$

Flex Credits Configuration

Manage Flex Credits Configuration

Yes

Use string$ in the search field to say this phrase must appear at the end of a field.

The application searches for the exact spelling and sequence of words, where the words appear at the end of the strings it searches.

Unless you select Match Case, both matches are considered exact.

Include one or more of the following match categories in your search:

  • User Interface Text

  • Oracle Transactional Business Intelligence Repository Definition Text

  • Enterprise Scheduler Text

  • Global Menu Label Text

  • Multipart Validation Message

After you enter the search text and replacement text, click Preview Changes. The tool looks for exact whole word matches.

Preview and Adjust

The preview sorts the search results and presents the matches on tabs based on match categories. Data grids on each tab present the matches in rows. You can adjust each row independently. The grids on each tab are similar, but not identical.

Caution: Some tab names on the Preview Text Changes page are followed by an asterisk (*) (for example, the Messages tab). For these tabs, once you save the preview text changes, these text changes are applied to the mainline metadata, that is, outside the sandbox. So you can't undo your changes after you preview and save them even though you are currently in a sandbox. Also, on destroying the sandbox, these changes remain as is.

Each row on all tabs includes:

  • A view of the existing text and the immediately surrounding text for context. You can't edit the existing view.

  • A preview of the replacement text and the immediately surrounding text for context. You can edit the preview.

  • An option to exclude the row and the specific match you see in the row from the customization.

Each row on the Messages tab includes an indicator. This indicator identifies when the search text appears in a message subcomponent, not necessarily in the message body displayed in the row. You can expand the row and view subordinate rows that display the message subcomponent containing the match and the preview, in context as previously described.

For each row in the preview, you can:

  • Do nothing to accept the customization as you see it.

  • Select Exclude to eliminate the row from the batch customization and maintain the existing text.

  • Modify the replacement text to fine-tune the customization for the specific match in the row. The row remains part of the batch customization, even if the actual customization differs from the other rows.

In the Global Menu Label Text tab, you can't update a secure JSON Web Token (JWT).

If you have multiple languages in your application and you want to make similar text changes in those languages:

  1. Change your language preference

  2. Search and replace text

  3. Validate your changes

Save and Publish

After you review and adjust the matches:

  1. Save your customizations.

  2. Thoroughly test the run time pages to make sure that every occurrence of the text is replaced, as you wanted.

  3. Publish the sandbox.

Note the following points:

  • Do not publish a sandbox before you visually inspect and validate all pages and messages that contain text that you customized.

  • Users can view:

    • Message, business intelligence, and enterprise scheduler text customizations when you save them, even if you don't publish the sandbox.

    • Page text customizations when you publish the sandbox.

Adding Translations of Customized Text: Overview

If you install and use multiple languages in your application and you customize text, then enter translations of the customized text for all languages. You can either add translations at run time, or export strings for offline translations. You can enter custom text translations for existing and newly added strings manually at run time.

You can use several customization tools for updating or adding strings. For example, you can use lookups to add translations at run time. However, you can use the User Interface Text tool to update all strings and enter translations, as well as to perform offline translations.

Translating Existing Strings at Run Time: Worked Example

This example demonstrates how to translate existing strings manually at run time.

The following table summarizes the key decisions for this scenario.

Decisions to Consider In this Example

What's the sandbox name that you want to use for translating existing strings?

Sandbox1

What's your base language?

English

What's the existing text that you want to customize?

Page

What's the replacement text that you want to replace the existing text with?

Work area

Entering Custom Text Translations for Existing Strings

  1. Activate Sandbox1.

  2. From the Navigator menu, select Tools - User Interface Text.

  3. Click Search and Replace.

  4. In the Search For field, enter the text, "page".

  5. In the Replace With field, enter the text, "work area".

  6. Click Preview Changes to preview and adjust the matches, as necessary.

    Caution: Some tab names on the Preview Text Changes page are followed by an asterisk (*) (for example, the Messages tab). For these tabs, once you save the preview text changes, these text changes are applied to the mainline metadata, that is, outside the sandbox. So you can't undo your changes after you preview and save them even though you're currently in a sandbox. Also, on destroying the sandbox, these changes remain as is.

  7. Save your text changes.

    Note: Repeat steps 4 to 7 for any customizations required in other installed languages.

  8. Test and verify all messages and pages affected by the text changes. Be sure to test across all applications.

  9. Publish Sandbox1.

    Your replacement text for the existing string is now available to all users.

Translating New Strings Added Using Customization Tools: Worked Example

This example demonstrates how to translate new strings that were added using customization tools. While creating strings using customization tools, such as the Structure page, always use the same language, that is, your base language.

The following table summarizes key decisions for this scenario.

Decisions to Consider In this Example

What's the sandbox name that you want to use for translating newly added strings?

Sandbox2

What's the language you want to translate your newly added English string to?

French

What's the newly created English text that you want to translate in French?

Computer

What's the French replacement text that you want to replace the newly created English text with?

Ordinateur

Entering Custom Text Translations for Newly Added Strings

  1. Activate Sandbox2.

  2. From the Navigator menu, select Tools - User Interface Text.

  3. Select French as the language you want to translate your new English string to.

  4. In the Search For field, enter the newly created English string "computer". You must search in English because the French equivalent has not yet been created.

  5. Enter the French string "ordinateur" as the replacement text.

  6. Click Preview Changes to preview and adjust the matches, as necessary.

    Caution: Some tab names on the Preview Text Changes page are followed by an asterisk (*) (for example, the Messages tab). For these tabs, once you save the preview text changes, these text changes are applied to the mainline metadata, that is, outside the sandbox. So you can't undo your changes after you preview and save them even though you're currently in a sandbox. Also, on destroying the sandbox, these changes remain as is.

  7. Save your text changes.

  8. Test and verify all messages and pages affected by the text changes. While testing, you must sign in with French as the language and use sandbox2.

    Note: Repeat steps 3 to 8 for every active language.

  9. Publish Sandbox2.

    Your replacement text for the newly added string is now available to all users.

FAQs for User Interface Text Customization

Can I undo customizations that I made using the User Interface Text tool if I haven't published the sandbox?

It depends on types of text customizations in the sandbox. You can undo all text customizations done in the user interface and global menu label by destroying the sandbox before publishing it. However, you can't undo the text customizations done in messages, analyses and reports, and scheduled processes.

Can I get a report of all customized text if I want to analyze, troubleshoot, and diagnose the cause of unexpected action?

No, but you can use Customization Setup Manager to export all your application customizations to a zip file format. You can find the text customizations in files ending in ".xlf.xml". These files list all text customizations done in your application using browser-based tools, such as Application Composer, Page Composer, and Customize User Interface Text. You can use the contents of these files for diagnosis and troubleshooting purposes. These files are read-only, so you can't edit their contents.

Why didn't text in my BI reports and SOA processes change when I used the User Interface Text tool to perform comprehensive text customizations?

The bulk customizations that you perform using the User Interface Text tool affect only the text that appears on application pages and in message dictionary messages.

Theme Customization

Customizing Themes: Overview

Use themes to customize the look and feel of your application. You can change the branding logo, background colors, icon styles, and so on.

You can apply an existing theme to your application pages, or create your own theme and apply it. Use the simple theme editor, that is, the Appearance page to create or edit themes.

Prerequisites for Customizing Themes

Before customizing themes:

  1. From the Navigator menu, select Tools - Appearance.

  2. Activate a sandbox. If you're not in an active sandbox, click Edit on the Appearance page. You're prompted to activate a sandbox.

    Note: If you're already in an active sandbox, then the Edit button doesn't appear on the Appearance page.

Once you complete customizing your themes, you can preview and test your changes, and then publish the sandbox to make your changes available to users.

Customizing Themes

Use the Appearance page to create themes and edit custom themes. For example, you can determine the following look and feel aspects of your application pages:

  • Logo

  • Background image

  • Size and style of icons on the springboard

  • Style of the cards, which appear on a page in a grid view. These cards present a summary of a single record, with attributes on the front side and optional back side. You can specify whether all cards should display with a dark-colored or a light-colored finish for users.

  • Shape of buttons, menus, and tabs

  • Colors for the background, global region, headings, page links, and buttons

When you edit your theme using the Appearance page, the themes for both desktop UI and simplified UI are edited simultaneously.

Apart from the editing options available on the Appearance page, if you need advanced controls to edit your themes, then use the advanced theme editor.

Caution: Once you edit a theme using the advanced theme editor, you can't edit that theme using the Appearance page anymore. Also, using the advanced editor, you must separately edit your theme twice - once for the desktop UI and again for the simplified UI.

To edit a theme using the advanced editor, on the Appearance page, select Advanced from the Actions menu, and then select either of the following:

  • Edit Desktop UI - <Theme Name>

  • Edit Simplified UI - <Theme Name>

Creating Themes: Procedure

Create your own custom themes using the simple theme editor, that is, the Appearance page.

Prerequisites

Activate a sandbox.

Creating Themes Using the Simple Theme Editor

Follow these steps:

  1. From the Navigator menu, select Tools - Appearance.

  2. On the Appearance page, select a theme as your base theme from the Appearance list.

  3. Make changes to the theme, for example, change the logo, background, style of icons, and heading colors.

  4. From the Actions menu, select Save As.

  5. On the Save As dialog box, enter a theme name without any spaces.

  6. Optionally, select Apply this theme.

  7. Click OK. If you have selected the Apply this theme check box, then your theme is saved and set as the current theme. If you haven't selected the check box, your theme isn't applied to the application. However, the theme is saved and set as the current theme.

When you create a theme using the simple editor, two new themes are saved - one for the desktop UI and another for the simplified UI.

Managing Themes: Procedure

Use the Appearance page to manage your themes. To open the Appearance page, from the Navigator menu, select Tools - Appearance.

You can edit custom themes, apply themes to your application pages, and delete custom themes. You can't edit or delete any predefined theme.

Prerequisites

Activate a sandbox.

Applying Themes

Select a theme from the Theme list, and click Apply. If the selected theme is a predefined one, then save it as a new theme, and then edit and apply the theme, as required.

Applying the Default Theme

From the Actions menu, select Apply Default. The default theme is applied to your application.

Deleting Themes

From the Theme list, select a custom theme that you want to delete, and then select Delete from the Actions menu.

Editing Themes

Follow these steps:

  1. From the Theme list, select a custom theme that you want to edit.

  2. Make changes to the theme specifications, for example, change the logo, background image, icon style, and color schemes, such as heading and button colors.

  3. Click Apply.

    Note: Although you can't edit a predefined theme, you can save it as a new theme, and then edit and apply it to your application. Use the Save As option from the Actions menu to save a predefined theme as a new theme.

Changing the Logo and Background Watermark

Use the Appearance page to define the following:

  • Branding logo, which appears above all application pages. Use an image that's as close to 119 by 25 pixels as possible. In general, an image that's wider than it's tall works best.

  • Watermark, which appears in the background of all simplified pages. Use an image that's as close to 1024 by 768 pixels as possible.

You can use any of the following options to select a logo and a background image:

  • File: Browse and select a file from your local machine.

  • Predefined: Select a file from the list of predefined images.

  • URL: Enter a full URL for the logo or the watermark.

Editing Themes Using the Advanced Theme Editor

Use the Theme Editor page only if you want to edit your themes using advanced controls, which are not available on the Appearance page. Unlike the simple editor, you can't use the advanced editor to edit themes for the desktop UI and the simplified UI simultaneously. So, to ensure a consistent look and feel of your application across these UIs, you must edit each theme separately for each UI.

Caution: Once you edit a theme using the advanced editor, you can't edit it using the simple editor anymore. You must use only the advanced editor for subsequent edits to that theme.

Follow these steps:

  1. On the Appearance page, select the custom theme that you want to edit using the advanced editor, from the Theme list.

  2. Click Advanced from the Actions menu, and then select either of the following options:

    • Edit Desktop UI - <Theme Name> to edit the theme for the desktop UI

    • Edit Simplified UI - <Theme Name> to edit the theme for the simplified UI

    The theme opens in the advanced theme editor.

  3. Edit the theme, for example, make changes to the branding area, buttons, links, and tabs.

  4. Click Save.

Changing the Logo and Color Schemes of the Application: Worked Example

This example demonstrates how to change a company logo and the color schemes of an application using the Appearance page. Users see the logo in the global area.

Note: If the company logo is changed using Page Composer, then this overwrites the changes done using the Appearance page.

The following table summarizes the key decisions for this scenario.

Decisions to Consider In This Example

What's the name of the new theme?

MyCompany

Which existing theme are you going to base this theme on?

Default

Which image are you going to use as the new logo?

MyCompany.gif

Tip: The recommended image size of the logo to be used for any theme is 119x25 px.

Prerequisites

Activate a sandbox.

Changing the Logo and Color Schemes

  1. On the Appearance page, select the Default theme from the Theme list.

  2. From the Logo list, select File as the type of location where your logo is stored.

  3. Browse for and select MyCompany.gif.

  4. For the icons, select the style as Flat Dark, the size as Large, and the corner rounding value as 5.

  5. In the Color Scheme section, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Background Color

    A9A9A9 (that is, Dark Gray)

    Global Region Label Color

    A52A2A (that is, Brown)

    Global Region Background Color

    FFFFFF (that is, White)

    Heading Color

    8B008B (that is, Dark Magenta)

    Page Color Link

    0000FF (that is, Blue)

    Button Colors

    Label: A52A2A (that is, Brown)

    Border: 000000 (that is, Black)

    Background: FFA07A (that is, Light Salmon)

    Card Style

    Light

  6. From the Actions menu, select Save As.

  7. On the Save As dialog box, enter the theme name as MyCompany.

  8. Select Apply this theme.

  9. Click OK.

    The following two new themes are saved in the repository:

    • MyCompanyalta for the simplified UI

    • MyCompanyskyros for the desktop UI

FAQs for Theme Customization

What happens to my theme if changes that affect themes are made using Page Composer?

Customizations made using Page Composer overwrite the changes made using the simple or the advanced theme editor.

Caution: Before using theme editor to change the look of your application, you must undo any customizations affecting the theme done using Page Composer. Otherwise, the customizations that you make using theme editor may not show up in your application as you wanted.

Infolet Customization

Customizing Infolets: Overview

Use infolets to aggregate key information for a specific area, for example, your sales pipeline, employee turnover, or other business transactions. You can click the navigation dots on the home page to open infolets and view important information at a glance.

If the navigation dots aren't available on the home page, you can enable infolets using the system options on the Structure page.

Customizing Infolets

You can open the infolets page in customization mode and perform the following customization tasks:

  • Create infolets.

  • Add content to infolets, for example:

    • You can add a task flow or a performance tile report.

    • If an infolet contains a performance tile report, then you can add a link to a detailed report in the same infolet.

      Note: In the context of infolets, report can mean analysis.
  • Edit infolets:

    • Edit infolet content.

    • Add, change, or remove link to detailed report.

  • Delete infolets

Enabling Infolets

You can enable infolets, that is, display the navigation dots on the home page using Set System Options on the Structure page.

Creating Infolets

Watch video

Watch: This video tutorial shows you how to create infolets.

Creating Infolets: Procedure

Use the infolet page to create infolets and set their views.

Prerequisites

You must use the infolet page in customization mode, that is, open the infolet page in Page Composer.

Follow these steps:

  1. Activate a sandbox.

  2. Click a navigation dot on the home page to open the infolet page.

  3. On the infolet page, click your user name in the global area, and select Customize Pages under Administration.

  4. Select a customization layer. The infolet page opens in customization mode.

Note: Once you complete your customizations, click Close to leave Page Composer. After testing your changes, you must publish the sandbox to make your changes available to users.

To create an infolet:

  1. On the infolet page, click the Infolet Repository icon, and select Create Infolet.

  2. Enter a title for the infolet.

  3. Set the infolet views as follows:

    • Specify the dimensions for the front view.

    • Enable or disable the back view.

    • Enable or disable the expanded view, and specify its dimensions.

  4. Click Save and Close.

Managing Infolets: Procedure

On the infolet page, use the options available on each infolet to manage it. You can add and edit infolet content, add and edit detailed report links to infolets, and delete infolets. While adding and editing infolet content, you can't add a business intelligence dashboard to an infolet because a dashboard report is generally bigger than an infolet.

Prerequisites

You must use the infolet page in customization mode, that is, open the infolet page in Page Composer.

Follow these steps:

  1. Activate a sandbox.

  2. Click a navigation dot on the home page to open the infolet page.

  3. On the infolet page, click your user name in the global area, and select Customize Pages under Administration.

  4. Select a customization layer. The infolet page opens in customization mode.

Note: Once you complete your customizations, click Close to leave Page Composer. After testing your changes, you must publish the sandbox to make your changes available to users.

Adding Content to Infolets

Follow these steps:

  1. Click Add Content on the infolet. This button is available on an infolet only if the infolet doesn't have any content in it.

  2. Select a performance tile or a task flow, and click Add. You can browse the business intelligence (BI) catalog to find the analytics and reports that you want to add.

  3. Close the Add Content dialog box.

Editing Infolet Content

You can edit the tile content of an infolet.

Follow these steps:

  1. Click the Actions icon on the top right corner of the infolet, and select Edit Content.

  2. Click Add Content to replace the existing content of the infolet.

  3. Select a performance tile or a task flow, and click Add. You can browse the business intelligence (BI) catalog to find the analytics and reports that you want to add.

  4. Close the Add Content dialog box.

Linking Detailed Reports to Infolets

To provide detailed information about a subject matter on an infolet, add a link to a detailed report. After you add the link, users can click anywhere in the infolet area to drill down to that detailed report. The detailed report doesn't replace the existing infolet content.

Adding Links to Detailed Reports

First, add a performance tile report to the infolet content, and then follow these steps:

  1. Click the Actions icon on the top right corner of the infolet, and select Link Detailed Report.

  2. On the Detailed Report page, click Add Content.

  3. Select a report, and click Add to add it to the infolet.

  4. Close the Add Content dialog box.

  5. Click Done.

Editing Detailed Report Links

To edit a detailed report link in an infolet:

  1. Click the Actions icon on the top right corner of the infolet, and select Edit Detailed Report.

  2. On the Detailed Report page, click Edit Report and make changes to the detailed report.

    Tip: To remove the report link, click Remove Report.
  3. Click Done.

Deleting Infolets

To delete an infolet, click the Actions icon on the top right corner of the infolet, and select Delete.

FAQs for Infolet Customization

How can I enable infolets?

Follow these steps:

  1. Select Tools - Structure from the Navigator menu.

  2. Click Edit.

  3. On the Sandbox Required dialog box, click Activate Sandbox.

  4. Select a sandbox and set it as active.

  5. On the Structure page, click Set System Options.

  6. Select Enable Infolets.

  7. Click Save and Close.

Note: To make the settings changes available to users, publish the sandbox.

What's the difference between a performance tile report and a detailed report added to the infolets content?

Performance tile report shows data in the small infolet format. When you add a performance tile report to an infolet, users can see only the summary information about the subject matter. But this report doesn't provide detailed information.

To provide detailed information about the subject matter on the same infolet, add a link to a detailed report. Users can click this link to gather more information.

Design Time Page Customization

Customizing Pages Using Design Time Tools: Highlights

Developers can customize pages at design time, for example, to change the color theme for all pages. These changes include complex ones that you need to deploy into the run time environment.

Note: Design time customizations and extensions aren't available in Oracle Cloud implementations.

Design Time Tools

Customizing the Same Page with Multiple Tools: Points to Consider

Using both Oracle JDeveloper and Page Composer, design time customizations and run time customizations can coexist on a page.

Note: Design time customizations aren't available in Oracle Cloud implementations.

When you use multiple tools to edit the same page, consider these points:

  • You can't use both tools at the same customization layer.

  • If you customize the same component with both tools, the customization at the higher level layer takes precedence.

    For example, suppose you use Page Composer to change a field label from Employee to Associate in the site layer. Meanwhile, someone uses Oracle JDeveloper to change the same label from Employee to Worker in the global layer. The global layer is the base customization layer, as it's only for design time customizations and applies to all users. Your users see Associate, not Worker, because the site layer is at a higher level than the global layer.

  • Run time customizations aren't automatically visible in Oracle JDeveloper. To view them, you must:

    1. Export the customizations from the run time environment to a Java archive (JAR) file.

    2. Import the customizations into the Oracle JDeveloper customization application workspace.

    For more information about importing run time customizations into Oracle JDeveloper, see the Oracle Fusion Applications Extensibility Guide for Developers.