3Page Modification

This chapter contains the following:

Overview of Page Modification

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

For example, you can:

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

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

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

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

Note: You cannot use Page Composer to configure your home page. Instead, you can use other tools such as, Structure and Appearance for home page configurations.

Overview of Using Page Composer

Guidelines for Page Modification

Before modifying pages, do the following tasks:

  • Understand the typical workflows for working with runtime application changes.

  • Verify that the page can be modified. To do so, check if either the Edit Pages or the Edit <Page Name> Pages menu item is available in the Settings and Actions menu. If no, then that means the page can't be modified.

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

  • Activate a sandbox.

Page Composer Views

You can use either Design view or Source view for viewing and changing 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 page modification features, you can use some unique features in each 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

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 in 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.

Considerations for Modifying Objects That Appear on Multiple Pages

Use Page Composer to modify objects that appear on multiple pages. Whether your application changes 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 modify objects that appear on multiple pages.

Appearance of Object Modifications Based on Shared and Non-Shared Task Flows

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

If the object is... Then the modifications...

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 application changes that you make in Page Composer.

Page Content and Template Configuration Using Page Composer

Modify Page Components Using Resource Catalog

Use the Resource Catalog to modify 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 modifications include:

  • Opening the Resource Catalog

  • Adding components

  • Hiding components manually

  • Hiding components programmatically

Before You Start

Activate a sandbox.

Open the Resource Catalog

In Design view:

  1. Open the page that you want to modify 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.

Add 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.

Note: If you added an HTML markup with references to an external CSS as your component, ensure that:
  • The CSS has Access-Control-Allow-Origin header in its server.

  • Your link tag has crossorigin attribute specified.

Hide Components Manually

Use the Show Component property to specify whether the component appears to users at runtime. 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.

If the component is a 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.

Hide 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.

Modify Pages

You can modify your user interface (UI) components by updating their properties. For example, you can change field labels, hide components, or make a check box required.

When you use Page composer, you always begin in Design view. You can use Design view to add content and make layout changes. But not in all pages. For these other pages, you must use Source view to make content and layout changes.

Note: Any changes you make apply only to the page that you're on. These changes also apply to all or specific groups of users. But that depends on the context layer you choose when you make your changes.

Before You Start

Activate a sandbox.

Modify UI Components

  1. Click your user image or name in the global header and select Edit Pages.

  2. Select the context layer in which you want to make your changes. For instance, you could make changes for only specific job roles.

    Note: When you modify a UI component for a specific job role, that job role must be assigned to you for you to test the application change 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 modify.

    To use Source view, you must select Source from the View menu. This menu isn't displayed by default. To display the View menu, 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 on top of the page.

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

  6. Select Edit Component.

  7. Update the component's properties to make your changes.

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

    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. If you want to modify more components, click Add Content to return to Design view. You can now repeat steps 4 to 7 to modify more components.

  9. Click Close to save.

    If available, click Save and Label instead to also label your changes. If you do this, you can revert to this configuration at any point in the future. Labels are saved with a prefix of composer_. For example, if you enter myLabel, then the label is composer_myLabel.

Modify Tabs on Pages

This example demonstrates how to modify 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 changes for?

All users

What changes are you going to make?

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

Before You Start

Activate a sandbox.

Modify Tabs

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

  2. Click your user image or name in the global header, and select Edit Pages in the Settings and Actions menu.

  3. Select Site layer as the context 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 modify.

  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.

Change Page Layout

You can configure a page layout to define the number, placement, and orientation of content regions on your pages. Ordinarily, you set the layout style while creating a page. But 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.

Change Page Layout

  1. Open the page you want to edit.

  2. Click your user name or image and select Edit Pages to open Page Composer.

  3. From the View menu, select Design.

  4. Click Change Layout.

  5. Select the new layout.

Modify Dialog Box Content

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

Before You Start

Activate a sandbox.

Modify Dialog Boxes

To modify 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 modify 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.

Configure the Global Page Template

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 configure the global page template. To open the global page template in Page Composer, click your user image or name in the global header, and select Edit Global Page Template from the Administration menu.

You can make the following changes 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.

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 header 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 header.

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

    Note: If you added an HTML markup with references to an external CSS as your component, ensure that:
    • The CSS has Access-Control-Allow-Origin header in its server.

    • Your link tag has crossorigin attribute specified.

  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.

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

Make Application Changes Visible Based on User Roles

This example demonstrates how you can make application changes 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 changes visible?

Hiring managers, Sherry Callaway and Terrance Whitaker

Tip: Create a role just for testing application changes. Call it DEVCUST_TEST_ROLE. When you're sure that the application change 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.

Make Application Changes 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 modify, 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.

FAQs for Page Content and Template Configuration

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 application changes, but prevent users from viewing them until the changes are complete?

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

What happens if my configurations make the page inaccessible?

You must contact an administrator, and the administrator can use the Manage Configurations dialog box 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 ready-to-use state, click Reset Page in Page Composer (Design or Source view).

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

Saved Search Management

Make Saved Searches Available to All Users

Use Page Composer at the site layer to create and edit 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.

Create and Edit 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 image or name in the global header, and select Edit <Page Name> Pages in the Settings and Actions menu.

  3. If prompted to select a context layer, select the site layer to open the search page in Page Composer.

  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.

Save Searches with Multiple Criteria

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 after 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 appropriate roles, you can also create and edit saved searches for other users using Page Composer.

The following figure shows an example of a search with multiple search criteria fields and a Save button. For each field, you can select an operator and enter search terms. You can also select from the Saved Search list to use an existing saved search.

Example of a search on the page with multiple search
criteria
Create 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.

Change 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.

Change Settings or Rename and Delete 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 editing the saved search within 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.

Save Keyword Searches with Filters

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 appropriate roles, you can also create and edit saved searches for other users using Page Composer.

Create and Edit 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 organize filters as follows, depending on what's available to you:

    • Use the Add or Reorder buttons.

    • Click the Personalize icon to show, hide, or reorder filters, and click OK.

  4. Set filter values or select filters, 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.

Change Settings or Rename and Delete 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 user-defined, 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 editing the saved search within 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 user-defined saved searches only, you can also rename or delete the saved search.

  6. Click OK.

Create and Enable an Announcement

You can create, edit, or delete company announcements. After you create an announcement, you can enable it to display on your home page.

Create an Announcement

  1. From the Navigator, select Tools > Announcements.

  2. Click Create.

  3. Specify the details, such as subject, start date, and end date.

  4. Select a category. If you select User-Defined, a text box appears, where you can provide additional details.

  5. Select any of these options:

    • Predefined: Select an image from the list.

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

    • URL: Enter a full URL for the image

    Note: Make sure your image size is 776x437 px or larger to avoid image distortion.
  6. Add the content in the text box. Add the content in the text box. You can format your text using the formatting options.

  7. Click Save and Close.

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

Edit or Delete an Announcement

  1. From the Navigator, select Tools > Announcements.

  2. Select the announcement that you want to edit or delete.

  3. Edit the announcement details or click Delete.

Enable an Announcement on the Home Page

After you create or edit an announcement, you can determine whether to display the announcement on your home page.

  1. From the Navigator, select Configuration > Appearance.

  2. Click the Home Page Display tab.

  3. Based on your home page layout, use any of these options:

    • Panel or Banner: Select Announcements from the home panel options, and then click Apply.

    • News feed: Select Yes for News and Announcements, and then click Apply.

Your default home page layout also determines how the home page displays the announcement.

  • Panel or Banner: The home page displays only the announcement content, not the subject or image.

  • News feed: The home page displays the entire announcement along with the subject and image in the News and Announcements section.

New Page Creation

Create Pages for Hosting Third Party Applications

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 in a single group on the Navigator menu and springboard.

Prerequisites

Activate a sandbox.

Creating the First Page

Follow these steps:

  1. From the Navigator menu, select Configuration > 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 group to place your page in.

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

  6. From the list of application roles, select the role to whom you want to grant access to the page. This list contains only custom roles because you can't modify predefined roles.

  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 modified access, a partner can directly perform an action or display information to the specific user without any additional authentication.

  8. 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 in a group, then that page icon appears at the top level (not in any group) on the springboard. However, such page icons appear in 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 group as that of the first page, by default.

Manage Pages Hosting Third Party Applications

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. From the list of application roles, select the role to whom you want to grant access to the page. This list contains only custom roles because you can't modify predefined roles.

  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 in 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 Modification

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

Following are the tools for making text changes:

  • 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 changes

  • The components that you modify

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

Tool or Task Navigation Offering Availability

Application Composer

In the Navigator, select Configuration > Application Composer.

Oracle Engagement Cloud

User Interface Text

In the Navigator, select Configuration > User Interface Text.

All applications

Page Composer

Click your user image or name in the global header, and select Edit <Page Name> Pages in the Settings and Actions menu.

If the Edit <Page Name> Pages option isn't available in the Settings and Actions menu, then select Edit Pages instead.

All applications

Text Modification Scenarios

The following table includes possible scenarios for modifying user interface text. Compare your situation to the scenario in the table to determine the most appropriate tool for modifying 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 changes affects multiple pages throughout your application. You can edit 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 change 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 change 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 change 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 change 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 change affects a specific component of a specific message in the message dictionary.

User Interface Text

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 application changes are written in a single override bundle. Hence, the latest application changes overwrites the previous ones.

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

Overview of User Interface Text Tool

You can use the User Interface Text tool to modify text in these application components:

  • User Interface

  • Messages

  • Global Menu Label

  • Enterprise Scheduler

You can use this tool to modify or translate your text at runtime. You can also export your strings to make your changes offline, if you opt in for User Interface Text Update.

User Interface Text Update

With the User Interface Text Update opt in, you get greater control of your text, and how it's edited.

Here are some things you can do:

  • Export and import your text for offline translation and modification.

  • Select and replace your text more easily.

  • Edit your text in an improved UI.

How to Opt In

In the Offerings work area, enable the User Interface Text Update feature as follows:

  • Functional Area: Application Extensions

  • Feature: User Interface Text Update

  • Task: Click Continue if you're sure about enabling this feature.

Note: If you want to disable this feature, you can opt out by repeating this same flow.

Use the User Interface Text tool to simultaneously update 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 modification:

  • 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, on the Navigator, select Configuration > 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 modification 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.

The following table lists the sample values that you can use as a guide while entering 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 text changes, these changes are applied to the mainline metadata. You can't undo your changes after you preview and save them, even though you are currently in a sandbox. The changes will still remain even if you delete the sandbox.

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 change.

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 change as you see it.

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

  • Modify the replacement text to fine-tune the change for the specific match in the row. The row remains part of the batch update, even if the actual update 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 changes.

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

  3. Publish the sandbox.

Note the following points:

  • Don't publish a sandbox before you visually inspect and validate all pages and messages that contain text that you updated.

  • Users can view:

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

    • Page text modifications when you publish the sandbox.

Modify Text with User Interface Text Update

You can use the User Interface Text Update feature to modify or translate multiple strings together at runtime.

Before You Start

  • Activate a sandbox.

  • Opt in for User Interface Text Update feature.

Modify Text

  1. On the Navigator, select Configuration > User Interface Text.

  2. In the Find field, enter the word or phrase you want to search for.

  3. In the Replace field, enter your replacement word or phrase.

  4. You can specify additional search parameters such as Match Case or Match Complete Word or Phrase.

  5. Select the language in which you want to modify your text.

  6. Select the application components you want to modify your text for.

  7. Click Search. The search results are grouped into different tabs based on the application components you select.

    Caution: Tabs marked with an asterisk (*) have live changes that are saved directly to the mainline metadata. You can't undo these changes once you save them. Make sure you review changes carefully before replacing your strings.
  8. Preview and adjust changes in your search results.

    Here are a few things you can do:

    • Exclude specific strings you don't want to change by selecting Exclude for those particular rows.

      For results in the User Interface Text component, you can select options in the Exclude menu for advanced string selection. Your options are:

      • None: Don't exclude any result.

      • All: Exclude all results.

      • None (Page): Don't exclude any result on the page.

      • All (Page): Exclude all results on the page.

      You can also choose how many results you want to display on a page for this component.

    • Manually tune your replacement text for specific strings.

      For instance, let's say you have a string that says "Generate a bill". If you replace "bill" with "invoice", this string becomes "Generate a invoice", which is incorrect. You can tune your replacement text for this string to say "Generate an invoice" by manually editing the text in the replacement text box.

    • For the User Interface Text component, you can click Export All to export your search results to view in a .csv file.

    • Query your search results in the User Interface Text component to find specific strings.

  9. Click Replace Strings. If you have live changes in your results, you will get a warning message. Click Yes if you have reviewed these changes carefully and want to proceed.

  10. Test your changes in the sandbox.

  11. Publish your changes to merge them with the mainline metadata.

If you install and use multiple languages in your application and you modify text, then enter translations of the modified text for all languages. You can enter translations for existing and newly added strings manually at runtime. You can also translate your strings offline. But you need to opt in for the User Interface Text Update feature for offline translation.

You can use several configuration tools to update or add strings. For example, you can use lookups to add translations at runtime, or you can use the User Interface Text tool to update all strings and enter their translations.

Translate Existing Strings at Runtime

This example demonstrates how to translate existing strings manually at runtime.

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 modify?

Page

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

Work area

Enter Text Translations for Existing Strings

  1. Activate Sandbox1.

  2. On the Navigator, select Configuration > 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 changes are applied to the mainline metadata. You can't undo your changes after you preview and save them, even though you're currently in a sandbox. The changes still remain, even if you delete the sandbox.

  7. Save your text changes.

    Note: Repeat steps 4 to 7 for any text changes 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.

Translate New Strings Added Using Configuration Tools

This example demonstrates how to translate new strings that were added using configuration tools. While creating strings using configuration 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 Text Translations for Newly Added Strings

  1. Activate Sandbox2.

  2. From the Navigator menu, select Configuration > 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 changes are applied to the mainline metadata. You can't undo your changes after you preview and save them, even though you're currently in a sandbox. The changes still remain, even if you delete the sandbox.

  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.

Translate Strings Offline

You can translate your modified strings offline if you opt in for the User Interface Text Update feature. To translate your strings offline, export them, add the necessary translations, and then import them back into the application.

Note: You can export only modified strings.

Before You Translate Your Strings Offline

  • Activate a sandbox.

  • Opt in for User Interface Text Update.

Export Strings

  1. On the Navigator, select Configuration > User Interface Text.

  2. Click the Export tab.

  3. Select the source language for the text you want to export for translation.

  4. Click Export, and download the file with the modified strings.

Translate Strings

  1. Extract the .zip file you downloaded, and open the .xlf file inside it using a text editor of your choice.

  2. Locate the strings you want to edit. You can find these strings inside <source> and </source>.

  3. Replace the <target/> tag following the </source> tag with the translation you need. The translated string should be inside <target> and </target>.

    Let's look at an example of an English to Spanish translation.

    <source>All Receipts</Source>
    <target>Todos los Recibos</target>
  4. Save the file when you're done translating your strings.

  5. Compress the translated .xlf file into a .zip file.

Import Translated Strings

  1. On the Navigator, select Configuration > User Interface Text.

  2. Click the Import tab.

  3. Select the target language you want to import the translated strings to.

  4. Click Browse, and select the .zip file you want to import.

  5. Click Import.

Note: After importing your strings, test your text changes inside the sandbox. Publish the sandbox to apply your changes to the application.

FAQs for User Interface Text Modification

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

No, but you can use Configuration Setup Manager to export all your configurations to a .zip file. You can find the text changes in files ending in ".xlf.xml". These files list all text changes done in your application using browser-based tools, such as Application Composer, Page Composer, and 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.

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

Theme Management

Overview of Configuring Themes and Home Page Settings

Use the Appearance work area to configure the general look and feel of your application, and the default layout and display settings of the home page. To open this work area, on the Navigator, select Configuration > Appearance. The Appearance work area has 2 tabs: Themes and Home Page Layout. Use the Themes page to configure the default home page layout, and to 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 Home Page Layout page to configure the display settings of the home page.

Themes and Default Home Page Layout

Use the Themes page of the Appearance work area to:

  • Set the default home page layout as Panel, Banner, or News Feed. The home page with the:

    • Panel or banner layout contains a springboard with icons that you can use to open work areas. Also, based on setup, the home page shows either company announcements or social networking conversations. This information appears in a panel for the panel layout, and in a banner for the banner layout.

    • News feed layout mainly contains the Apps section and a series of updates with important information.

  • Create and edit saved themes, that is, themes that are not predefined. For example, you can change the following look and feel aspects of your application pages:

    • Logo

    • Background image

    • Panel image and style

    • Size and style of the icons on the springboard

    • Style of the cards, which appear on a page in a grid view. These cards display 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

Tip: While making changes on the Themes page, you can click Apply any time to preview your changes.

Display Settings of the Home Page

Use the Home Page Layout page of the Appearance work area to configure the display settings of the home page.

  • For panel and banner layouts, you can specify the default content to be displayed on the home page panel and banner, and the display photo on the main panel of the home page.

  • For the news feed layout, you can rename the home page sections, show or hide them, and reorder them.

Use the Themes tab of the Appearance work area to create themes.

Before You Start

Activate a sandbox.

Create Themes

Follow these steps:

  1. On the Navigator, select Configuration > Appearance.

  2. From the Themes list, select your base theme.

  3. From the Default Home Page Layout list, select Panel, Banner, or News Feed.

    • Panel or banner layout contains a springboard with icons that you can use to open work areas. Also, based on setup, the home page shows either company announcements or social networking conversations. This information appears in a panel for the panel layout, and in a banner for the banner layout.

    • News feed layout mainly contains the Apps section with icons to open work areas and a series of updates with important information.

  4. Configure the various appearance settings for your application, as required. For example, select a branding logo, and specify color schemes.

  5. On the Actions menu, select Save As.

  6. Enter a theme name.

  7. Optionally, deselect Apply this theme if you don't want to apply the theme to the application immediately.

  8. 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 you can apply it to your application later.

Use the Themes page to manage your themes. To open the Themes page, on the Navigator, select Configuration > Appearance.

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

Before You Start

Activate a sandbox.

Apply Themes

From the Themes list, select a theme, 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.

Apply the Default Theme

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

Edit Themes

Follow these steps:

  1. On the Navigator, select Configuration > Appearance.

  2. From the Themes list, select your base theme.

  3. Set the default layout of the home page, and configure the various appearance settings for your application, as required. For example, select a branding logo and specify color schemes.

  4. Click Apply. If the base theme you have selected is a:

    • Predefined theme, then enter a theme name, and click OK to create another theme with your modifications. This new theme is then applied to your application.

    • Saved theme, then your theme changes are directly applied to your application.

Delete Themes

From the Themes list, select a saved theme that you want to delete, and then on the Actions menu, select Delete.

Change the Logo and Background Image

Use the Themes page to define the:

  • Branding logo, which appears above all application pages. You can use a logo of any size, but the recommended width is lesser than 200 px and height is lesser than 50 px.

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

To select a logo and a background image, use one of the options:

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

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

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

You configure the various appearance settings for your application using the Themes tab of the Appearance work area.

These tables summarize the appearance settings that you can configure while creating and editing your themes and their default values.

General Settings

Setting Description Values Default Value

Default Home Layout

The default layout of the home page.

  • Panel

  • Banner

  • News Feed

When you select a Panel or Banner layout, the home page contains a springboard with icons that you can use to open work areas. Whereas, when you select the News feed layout, your home page mainly contains the Apps section and a series of updates with important information.

Panel

Logo

The type of location where your logo for the global header is stored. You can browse and select your logo from that location.

  • File

  • Predefined

  • URL

Predefined

Configure bookmark icon for desktop

Selecting this check box displays the Desktop Icon list for you to choose a bookmark icon for your desktop.

  • Checked

  • Unchecked

Unchecked

Desktop Icon

The bookmark icon that appears on your desktop.

This list is available only if you selected the Configure bookmark icon for desktop check box.

  • URL

  • File

URL

Configure shortcut icon for mobile

Selecting this check box displays the Mobile Icon list for you to choose a shortcut icon for your mobile device.

  • Checked

  • Unchecked

Unchecked

Mobile Icon

The shortcut icon that appears on your mobile device.

This list is available only if you selected the Configure shortcut icon for mobile check box.

  • URL

  • File

URL

Background Image

The type of location where your background image of all application pages is stored. You can browse and select the image from that location.

  • None

  • File

  • Predefined

  • URL

Predefined

Repeat Image

Selecting this check box repeats the specified background image to display it both vertically and horizontally in the background of all application pages.

  • Checked

  • Unchecked

Unchecked

Background Image Position

The position of the background image for all application pages.

  • Center

  • Start

Center

Global Region

The background color of the global header, which is the uppermost region in the user interface.

Color palette

Transparent

Global Region Background Color

The background color of the global header, which is the uppermost region in the user interface.

Color palette

Transparent

Global Text and Icon Color

The color of the text that appear in general and with icons in the global header. This excludes the company logo.

Color palette

2E444C

Enable color gradient

Selecting this check box enables color gradient for global text and icons. This excludes the company logo.

  • Checked

  • Unchecked

Unchecked

Gradient Type

The gradient type for global text and icon colors. This excludes the company logo.

This field is available only if you enabled color gradient.

  • Top to bottom

  • Left to right

  • Top left to bottom right

  • Top right to bottom left

Left to right

Start Color and End Color

The start and end colors of the gradient for global text and icon colors.

This field is available only if you enabled color gradient.

Color palette

8CD3FF

Cover Image

The type of location where your cover image, which displays in the background of the home page panel or banner, is stored. You can browse and select the image from that location.

  • None

  • File

  • Predefined

  • URL

Predefined

Panel Style

Specifies the style for the main panel or banner on the home page.

This field is available only if you selected the default home page layout as Panel or Banner.

  • Light: Overlays a portion of the home page panel or banner with a semi-transparent white layer and makes the text on top of it black.

  • Dark: Overlays a portion of the home page panel or banner with a semi-transparent black layer and makes the text on top of it white.

Light

Navigation Icons

Setting Description Values Default Value

Icon Type

The type of navigation icons on the home page.

  • Solid

  • Outlined

Solid

Size

The size of the navigation icons on the home page.

This field is available only if you selected the default home page layout as Panel or Banner.

  • Extra large: Sets the size of the icons to 96px.

  • Large: Sets the size of the icons to 72px.

  • Medium: Sets the size of the icons to 64px.

  • Small: Sets the size of the icons to 48px.

Extra large

Image Color

The image color of the navigation icon on the home page.

This field is available only if you selected the default home page layout as Panel or Banner.

Color palette

2E444C

Group Indicator Icon

The color of the three dots that appear on certain icons on the home page to indicate that these icons are group icons.

Color palette

FFFFFF

Label Color

The color of the label text of the navigation icons.

Color palette

2E444C

Background Shape

The shape that displays behind the navigation icons.

  • None

  • Circle

  • Square

  • Rounded square

  • Transparent square

The Transparent square option is available only if you selected the default home page layout as News Feed.

Circle

Background Card Color

The background color of the navigation icons on the News Feed home page.

This field is available only if you selected:

  • The default home page layout as News Feed.

  • The background shape for navigation icons as Transparent square.

  • Light

  • Dark

Light

Background Card Opacity

The background opacity of the navigation icons on the News Feed home page.

This field is available only if you selected:

  • The default home page layout as News Feed.

  • The background shape for navigation icons as Transparent square.

Any value between 1–99

10

Background Color

The color of the shape that displays behind the navigation icons.

This field isn't displayed if you have selected None or Transparent square as the background shape for the navigation icons.

Color palette

Multicolor

Page Settings

Setting Description Values Default Value

Heading color

The text color of the headers and subheaders of application pages.

Color palette

333333

Link Color

The color of the links that appear on the application pages.

Color palette

0A6DAA

Selection Color

The color of a selected or highlighted UI element on a page.

Color palette

047BC4

Highlight Color

The color used to highlight application items that need attention. For example, the part of the Notifications icon on the global header that displays the number of new notifications in your list.

Color palette

C74200

Card Style

The style of cards displayed on the application pages having a grid view.

  • Dark: Displays the cards with a white or light grey background color and dark text.

  • Light: Displays the cards with a dark grey background color and light text.

Dark

Landing Page Icons for Employees

The icon color of the landing pages for all work areas related to employees, for example Personal Information, Benefits, and Absences.

Color palette

309FDB

Button Settings

Setting Description Values Default Value

Label

The color of the label text of the buttons on all application pages.

Color palette

000000

Border

The color of the button borders on all application pages.

Color palette

C4CED7

Enable color gradient

Selecting this check box enables color gradient for buttons on all application pages.

This check box is available only if you selected the default home page layout as Panel or Banner.

  • Checked

  • Unchecked

Checked

Start Color and End Color

The start and end colors of the gradient for buttons on all application pages.

This field is available only if you enabled color gradient.

Color palette

  • Start Color: F1F3F3

  • End Color: E4E8EA

Background

The background color for buttons on all application pages.

This field isn't available if you enable color gradient for buttons.

Color palette

F1F3F3

Corner Rounding

The extent to which the corners of the buttons on all application pages are rounded.

  • None: Removes corner rounding from all buttons, which means applies a rectangular shape to all buttons.

  • Small: Applies a very small curve to the corners of all buttons.

  • Medium: Applies a moderate curve to the corners of all buttons.

  • Large: Applies a large curve to the corners of all buttons, thereby making a pill shape.

Small

This example demonstrates how to change a logo and the color schemes of an application using the Themes tab of the Appearance work area. Users see the logo in the global header.

Note: Changes made to the logo using Page Composer overwrite the changes done using the Appearance work area.

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 default home page layout are you going to use?

Banner

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

MyCompany.png

Tip: You can use a logo of any size, but the recommended width is lesser than 200 px and height is lesser than 50 px.

Which image are you going to use as your application's bookmark icon for desktop?

MyDesktopIcon.png

Tip: For best results, use a square-shaped icon with each side measuring lesser than 16 px.

Which image are you going to use as your application's shortcut icon for mobile devices?

MyMobileIcon.png

Tip: For best results, use a square-shaped icon with each side measuring more than 57 px and lesser than 144 px.

Which background image are you going to use?

WatermarkOracle.png

Before You Start

Activate a sandbox.

Change the Logo and Color Schemes

You can specify the look and feel aspects of various UI elements, such as navigation icons and buttons, using the Themes page. The fields available for you to change these appearance settings may vary based on what you select for some fields. For example, if you select News Feed as the default home layout, the Group Indicator Color field isn't displayed for selection because this field isn't applicable for the news feed home page layout.

Follow these steps:
  1. On the Navigator, select Configuration > Appearance. On the Appearance work area, click the Themes tab.

  2. From the Themes list, select Default.

  3. Select the default home layout as Banner.

    Note: When you select a Panel or Banner layout, the home page contains a springboard with icons that you can use to open work areas. Also, based on setup, the home page shows either company announcements or social networking conversations. This information appears in a panel for the panel layout, and in a banner for the banner layout. When you select the News feed layout, your home page mainly contains the Apps section and a series of updates with important information.

  4. From the Logo list, select File as the type of location where your logo is stored. Browse and select MyCompany.png.

  5. Select the Configure bookmark icon for desktop check box, and from the Desktop Icon list, select File. Browse and select MyDesktopIcon.png.

  6. Select the Configure shortcut icon for mobile check box, and from the Mobile Icon list, select File. Browse and select MyMobileIcon.png.

  7. From the Background Image list, select File as the type of location where your background image is stored. Browse and select WatermarkOracle.png.

  8. To specify the general appearance of the application, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Global Region Background Color

    A9A9A9 (that is, Dark Gray)

    This field specifies the background color of the global header, which is the uppermost region in the user interface.

    Global Text and Icon Color

    4169E1 (that is, Royal Blue)

    This field specifies the color of the text that appear in general and with icons in the global header.

    Enable color gradient

    Select the check box, specify the gradient type as Top to bottom, and start and end colors of the gradient as follows:

    • Start Color: 00BFFF (that is, Deep Sky Blue)

    • End Color: 4169E1 (that is, Royal Blue)

    Cover Image

    Select File as the type of location where your cover image is stored. Browse and select MyCover.png.

    For the home page with the:

    • Panel layout, this image appears on the main panel. The recommended image size is 344x622 px.

    • Banner layout, this image appears on the banner. The recommended image size is 2600x290 px.

    • News feed layout, this image appears in the Things to Finish section. The recommended image size is 2600x290 px.

    Panel Style

    Light

    This field specifies the style of the main panel on the home page.

  9. To specify the appearance of the navigation icons, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Icon Type

    Solid

    Size

    Small

    Image Color

    Multicolor

    Group Indicator Color

    D02090 (that is, Violet Red)

    This field specifies the color of the three dots that appear on certain icons on the springboard to indicate that these icons are group icons.

    Label Color

    000000 (that is, Black)

    This field specifies the color of the label text of the navigation icons.

    Background Shape

    Circle

    Background Color

    Multicolor

    This field isn't displayed if you have selected None as the background shape.

  10. To specify the appearance of the application pages, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Heading Color

    8B008B (that is, Dark Magenta)

    This field specifies the color of the header text on the application pages.

    Link Color

    0000FF (that is, Blue)

    This field specifies the color of the links that appear on the application pages.

    Selection Color

    FFB6C1 (that is, Light Pink)

    This field specifies the color of a selected or highlighted UI element on a page.

    Highlight Color

    FFB6C1 (that is, Yellow)

    Card Style

    Light

    This field specifies the style of cards displayed on application pages having a grid view.

    Landing Page Icons for Employees

    Blue

    This field specifies the icon color of the landing pages for all work areas related to employees, for example Personal Information, Benefits, and Absences.

  11. To specify the appearance of the buttons, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Label

    000000 (that is, Black)

    This field specifies the color of the label text of the buttons.

    Border

    000000 (that is, Black)

    This field specifies the color of the button borders.

    Enable color gradient

    Select the check box and specify the start and end colors of the gradient as follows:

    • Start Color: 4169E1 (that is, Royal Blue)

    • End Color: 00BFFF (that is, Deep sky Blue)

    Corner Rounding

    Small

    This field specifies the extent to which the button corners are rounded. For example, None indicates that the button corners are not rounded and Small indicates that the button corners are slightly rounded.

    Tip: While making changes on the Themes page, you can click Apply any time to preview your changes.

  12. On the Actions menu, select Save As.

  13. Enter the theme name as MyCompany.

  14. Make sure that Apply this theme is selected.

  15. Click OK.

Use the Home Page Layout tab of the Appearance work area to define the display settings of the home page. To open the Appearance work area, from the Navigator menu, select Configuration > Appearance. The home page display options available on the Home Page Layout page may vary based on the default home layout setting that you have configured in the General section of the Themes page.

Before You Start

Activate a sandbox.

Define Display Settings for Home Page with Panel or Banner Layout

If you have selected Panel or Banner as the default home page layout on the Themes page, then follow these steps:

  1. Select one of the following options to display on the home page panel or banner:

    • Social: Displays social networking content, such as the number of followers

    • Announcements: Displays employee announcements

    • Cover image: Displays the image for the main panel or banner, which you specify on the Themes page

    • None

  2. Specify whether to display the photo in the main panel or banner of the home page from the social network profile or from HCM.

  3. Click Apply.

Define Display Settings for Home Page with News Feed Layout

Use the Home Page Layout page to define the display settings for sections of the home page with the news feed layout. You can define these settings only if you have selected News feed as the default home page layout on the Themes page.

Follow these steps:

  1. Click the section name to rename it.

  2. Click the Visible field for a section to change its visibility setting. You can show or hide the section on the home page:

    • Yes: The section appears on the home page.

    • No: The section doesn't appear on the home page.

    • EL expression: The evaluation of the EL expression decides whether the section will appear on the home page.

  3. Use the Move Up and Move Down icons to adjust the relative positions of the sections on the home page.

  4. Click Apply.

FAQs for Theme Management

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

Application changes made using Page Composer overwrite the changes made using the Appearance work area.

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

Infolet Management

Use infolets to aggregate key information for a specific area, for example, social networking or your personal profile. On the home page, to open infolets and view important information at a glance, you can:

  • Click an icon in the page control, if your home page layout is panel or banner.

  • Click an infolet tab in the Analytics section, if your home page layout is news feed.

On the home page, if infolet pages aren't available in the page control or analytics section, you can enable them using the Home Configuration page in the Structure work area.

You can open the infolets page in Page Composer mode and perform the following 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

Enable Icons for Infolet Pages

You can use the Home Configuration page to enable icons for infolet pages. Based on your default home page layout, these icons appear in the page control or the Analytics section on the home page. To open the Home Configuration page, from the Navigator menu, select Configuration > Structure, and then click the Home Configuration tab.

Creating and Managing Infolets

Watch video

Watch: This video tutorial shows you how to create infolets. The content of this video is also covered in text topics.

Create Infolets

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

Before You Start

You must open the infolet page in Page Composer.

To create infolets, do these steps:

  1. Activate a sandbox.

  2. To open an infolet page on the home page:

    • Click an icon in the page control, if your home page layout is panel or banner.

    • Click an infolet tab in the Analytics section, if your home page layout is news feed.

  3. On the infolet page, click your user image or name in the global header, and select Edit Pages in the Settings and Actions menu.

  4. Select a context layer. The infolet page opens in Page Composer.

Note: Once you complete making changes, 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. The dimensions of the front and the back views must be the same, but the expanded view must be bigger because it displays more details.

  4. Click Save and Close.

  5. Add content to the infolet views and link a detailed report to the infolet.

  6. Preview the infolet's front view, drill down to the detailed report, and then preview the back and expanded view.

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

Manage Infolets

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.

Before You Start

You must open the infolet page in Page Composer.

To create infolets, do these steps:

  1. Activate a sandbox.

  2. To open an infolet page on the home page:

    • Click an icon in the page control, if your home page layout is panel or banner.

    • Click an infolet tab in the Analytics section, if your home page layout is news feed.

  3. On the infolet page, click your user image or name in the global header, and select Edit Pages in the Settings and Actions menu.

  4. Select a context layer. The infolet page opens in Page Composer.

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

You can add content to the following infolet views:

  • Front

  • Back

  • Expanded

To add content to the infolet's front view, follow these steps:

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

  2. Search and 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.

To add content to the infolet's back view, follow these steps:

  1. Click the Back View icon on the bottom right corner of the infolet.

  2. Click Add Content on the infolet's back view.

  3. Follow steps 2 and 3 in the procedure for adding content to the infolet's front view.

To add content to the infolet's expanded view, follow these steps:

  1. Click the Expanded View icon on the bottom right corner of the infolet's back view.

  2. Click Add Content on the infolet's expanded view.

  3. Follow steps 2 and 3 in the procedure for adding content to the infolet's front view.

Edit Infolet Content

You can edit the tile content of an infolet's:

  • Front view

  • Back view

  • Expanded view

Follow these steps:

  1. Click the Actions icon on the top right corner of the infolet's front view, back view, or expanded view, and select Edit Content.

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

  3. Search and 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.

Link 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.

Add 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. Search and select a report, and click Add to add it to the infolet.

  4. Close the Add Content dialog box.

  5. Click Done.

Edit 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.

Delete Infolets

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

Edit Infolet Visibility

You can show or hide an infolet on the infolet page. To edit the visibility settings of an infolet:

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

  2. Select one of the following:

    • Yes: The infolet appears on the infolet page.

    • No: The infolet doesn't appear on the infolet page.

    • EL expression: The evaluation of the EL expression decides whether the infolet will appear on the infolet page.

FAQs for Infolet Management

Why is the icon for my infolet page not available in the page control on the home page?

The icon for your infolet page may be hidden. Change the visibility setting of the icon using the Home Configuration page of the Structure work area. To open this page, select Configuration > Structure from the Navigator menu, and then click the Home Configuration tab.

How can I rename an icon for an infolet page in the page control on the home page?

You can rename an icon for an infolet page using the Home Configuration page of the Structure work area. To open this page, select Configuration > Structure from the Navigator menu, and then click the Home Configuration tab.

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.

Configure Infotiles on a Page

You can use Page Composer to decide how your infotiles appear on your page. You can show, hide, or reorder them any way you like.

  1. Activate a sandbox.

  2. Go to the page with your infotiles.

  3. Click your user image or name in the global header, and select Edit Pages.

  4. Click the Configure Layout icon.

  5. Make changes to your page.

    • Select the infotiles you want to show on your page, and deselect the ones you want to hide.

    • Hover over the infotile you want to reorder, and click Move Up or Move Down.

  6. Click OK.

  7. Click Close.

  8. Test your changes and publish your sandbox.