1. Developing with Oracle WebCenter Content
  2. Changing the Look and Feel of the Content Server Interface
  3. Customizing the WebCenter Content User Interface

6 Customizing the WebCenter Content User Interface

This chapter provides information about customizing the WebCenter Content user interface with a custom Oracle Application Development Framework (Oracle ADF) skin and with Oracle Metadata Services (MDS) seeded customizations.

This chapter includes the following sections:

6.1 Customizing the WebCenter Content User Interface

You can customize the WebCenter Content user interface in two areas:

  • Custom Oracle ADF skin

  • MDS seeded customizations

Prerequisites

To customize the WebCenter Content user interface, you need to know how to use Oracle JDeveloper to define a skin and to define seeded customizations. To create a custom Oracle ADF skin, you should be familiar with the JDeveloper skin editor, HTML, and cascading style sheets.

Note:

You must be an administrator for the domain in which you want to implement the custom skin.

The overall steps to customize the WebCenter Content user interface follow:

  1. Install and configure Oracle JDeveloper 12.2.1 Studio Edition.
  2. Set up the WccAdfCustomization application.
  3. Define a custom skin and generate WccAdfCustomSkin.jar.
  4. Define seeded customizations and generate WccAdfCustomization.mar.
  5. Apply customizations to the installed environment.

6.2 Install and Configure Oracle JDeveloper Studio Edition

You can use Oracle JDeveloper 12.2.1 Studio Edition to customize the Oracle WebCenter Content user interface. After you download and install JDeveloper, you can configure it to support defining seeded customizations.

Installing and configuring JDeveloper for customizing the WebCenter Content user interface includes these tasks:

  1. Install JDeveloper
  2. Install WebCenter Content Connection Extension for JDeveloper
  3. Creating an Integrated WebLogic Server Domain
  4. Configuring JDeveloper for Defining Seeded Customizations

For more information about these tasks, see Installing and Configuring Oracle JDeveloper.

6.3 Setting up the WccAdfCustomization Application

You can use the prebuilt WccAdfCustomization application to define and package your WebCenter Content user interface customizations.

To set up the WccAdfCustomization application:

  1. Copy the following file from the installed environment to the machine where you run JDeveloper:

    WCC_MW_HOME/wccontent/wccadf/WccAdfCustomization.zip

  2. Unzip WccAdfCustomization.zip.

    This creates a WccAdfCustomization folder that contains the WccAdfCustomization application.

  3. Open the WccAdfCustomization application in JDeveloper:

    1. Select Open Application….

    2. In the Open Application(s) dialog box, navigate to the WccAdfCustomization folder created in a step 2.

    3. Select WccAdfCustomization.jws.

    4. Click Open.

  4. Configure the RIDC connection URL and the administrator user name:

    1. In the Application Navigator, under the Application Resources panel, expand Descriptors and then ADF META-INF.

    2. Open the connections.xml file in the editor.

    3. Replace wccadmin with the real administrator user name. For example: 

      <Contents>weblogic</Contents>

    4. Replace example-cs with the real host name where your Oracle WebCenter Content Server instance is running.

    5. Update the IDC port number, 4444, if your Content Server listens on a different IDC port. For example: 

      <Contents>idc://cshost.example.com:4444</Contents>

    6. Click Save.

  5. Run the WccAdfCustomization application:

    1. In the Application Navigator, expand ViewController and then Web Content.

    2. Right-click index.html and choose Run.

      This starts the JDeveloper integrated Weblogic Server and deploys the WccAdfCustomization application to the server.

    3. When the browser displays the index.html page, click the link on that page to navigate to the WebCenter Content user interface.

    4. Log in as the weblogic user

    5. Verify that the WebCenter Content user interface works as expected.

  6. Stop the WccAdfCustomization application:

    1. Click the red Terminate button to stop the WccAdfCustomization application.

    2. (Optional) You can stop the IntegratedWebLogicServer application as well.

6.4 Define a Custom Skin and Generating WccAdfCustomSkin.jar

In the WccAdfCustomization application, there is a prebuilt custom skin called wcc-custom-skin. You can define your CSS customizations for the WebCenter Content user interface in this custom skin. The skin is located in JDeveloper at ViewController > Web Content > skins > wcc-custom-skin > wcc-custom-skin.css or, in the file system, at ViewController/public_html/skins/wcc-custom-skin/wcc-custom-skin.css.

The application also includes an images folder in which you can place your custom images. This folder is located at ViewController > Web Content > images or, in a file system, at ViewController/public_html/images/.

For universal changes, such as changing the logo and the title in the branding bar, you do not have to create a custom skin. Instead, you can update the application configuration directly and modify the values for customBrandingLogo and customBrandingTitle. See User Interface Commands in Oracle Fusion Middleware WebCenter WLST Command Reference.

When you save a change you made to the skin, you must refresh the user interface to see the results.

Note:

You may need to clear the browser's cache to see changes in the user interface, particularly when the change relates to images.

6.4.1 Designing and Testing Customizations in the Custom Skin

You can design and test customizations for the following items within the custom skin:

  • Branding bar logo

  • Default font size

  • wcc-skin selectors

The following sections provide instructions and examples for customizing skins. For details about how to use the JDeveloper skin editor, see the Skin Editor User Guide.

6.4.1.1 Customizing the Branding Bar Logo with Your Own Images

You can customize the branding bar logo in the WebCenter Content user interface with your own images.

To customize the branding bar logo with your own images:

  1. Create and copy custom images for your customization.

    From the file system, create or copy any custom images you want to use into the folder:

    WccAdfCustomization/ViewController/public-html/images

  2. On the Skin Editor Selectors tab, select the following: 

    Style Classes/Miscellaneous/.AFBrandingBarLogo

  3. In the Property Inspector under Common, click the menu (far right) for Background Image and choose Edit.

  4. Locate and select the new logo image in the folder you created in step 1, and click OK.

  5. Adjust the width and height properties as necessary to accommodate the image (by default, .AFBrandingBarLogo has a height of 2.5 em and a width of 119 px).

  6. From the File menu, choose Save.

  7. To see the generated selectors and rules, switch to the Source tab. For example: 

    .AFBrandingBarLogo
{
  background-image: url("../../images/my-company-logo.png");
  height: 3.2em;
  width: 128px;
}
6.4.1.2 Customizing the Default Font Size

You can specify your own default font size for the WebCenter Content user interface.

To customize the default font size:

  1. On the Skin Editor Selectors tab, select the following:
    Global Selector Aliases/Font/.AFDefaultFont:alias
  2. In the Property Inspector under Font/Text, enter a new value for Font Size.
  3. From the File menu, choose Save.
  4. To see the generated selectors and rules, switch to the Source tab. For example:
    .AFDefaultFont:alias
{
  font-size: 14px;
}
6.4.1.3 Customizing Selectors

If you want to customize selectors, you must add and modify their rules directly on the Source tab for the .css file for the custom skin.

You can find selector information on which to base your customizations in the following files:

  • wcc-styles.css: This file contains all of the WebCenter Content selectors and aliases (those with prefix 'Wcc').

  • wcc-skin.css: This file contains WebCenter Content extensions that override base ADF definitions. No new selectors are defined in this file.

It is easiest to copy the rule where you find it in one of these files, paste it into the Source tab for the .css file for your custom skin, and then modify the rule there.

Note:

You cannot modify selector rules directly in the wcc-styles.css and wcc-skin.css files.

The .css file for your custom skin is an extension to the wcc-styles.css and wcc-skin.css files. The rules you specify override the associated rules in those files.

For example, to customize Web UI Branding Bar Title Selector:

  1. In the upper left corner of the Skin Editor, Selectors tab, click the Extended Skins menu and choose simple.desktop > wcc-styles.css.
  2. On the Source tab, use the Search bar to find WccBrandingBarTitle. If necessary, use the down arrow to the right of the search bar to search for subsequent instances.
  3. Select the lines containing the name and the associated definition, right-click the selection, and choose Copy:
    .WccBrandingBarTitle
{
  -tr-rule-ref: selector(".AFBrandingBarTitle");
}
  4. If the wcc-custom-skin.css file is open in the editor, click its tab to switch to that file. If it is not open, locate it on the Application Navigator tab, and double-click it to open it in the editor: 
    ViewController > Web Content > skins > wcc-custom-skin > wcc-custom-skin.css
  5. Click the Source tab, position the cursor in the file where you want the definition, and right-click and choose Paste to paste the rule.
  6. Specify the path to the logo image file, and adjust the width and height properties as necessary to accommodate the image. Delete any line whose definition you do not want to override as part of the custom extension, and add line for your customization. For example, choose a custom color like this: :
    .WccBrandingBarTitle
{
  color: #993300;
}
  7. From the File menu, choose Save.

    When you are done customizing the skin, stop the application. From the Run menu, choose Terminate, and then choose WccAdfCustomization.

6.4.2 Packaging the Custom Skin As WccAdfCustomSkin.jar

In JDeveloper, you can deploy the custom skin for the WebCenter Content user interface to package it in the WccAdfCustomSkin.jar file.

To package the custom skin:

  1. On the Application Navigator tab, right-click the ViewController project, and from the Deploy menu, choose WccAdfCustomSkin.
  2. Stay with the default deployment action, which should be Deploy to ADF Library JAR file, click Finish. This generates the WccAdfCustomSkin.jar file under ViewController/deploy/.

6.5 Define MDS Seeded Customizations and Generating WccAdfCustomization.mar

The WebCenter Content user interface has defined a seeded customization layer, called customer, for customers to define seeded customizations for the user interface. Customers can define one or multiple layer values for this customer layer. In most cases, one layer value would be sufficient. However, if multiple layer values are defined, the customizations for those values are applied in the order in which they are defined.

6.5.1 Defining customer Layer Values

You can define values for the customer layer in the adf-config.xml and CustomizationLayerValues.xmlfiles.

  1. In the Application Navigator, under the Application Resources panel, expand Descriptors and then ADF META-INF.
  2. Open the adf-config.xml file in the editor.
  3. On the Source tab, find the <customerCustomizationLayerValues> tag and edit its value. For example:
    <customerCustomizationLayerValues>demo</customerCustomizationLayerValues>
  4. On the Overview tab, choose MDS in the left panel.
  5. Click the link Configure Design Time Customization Layer Values on the right side.

    This opens the CustomizationLayerValues.xml file in a new editor window. Locate the customer layer, and define the same layer value or values for the layer. For example: 

    <cust-layer name="customer" id-prefix="c">
  <cust-layer-value value="demo" display-name="Demo" id-prefix="d"/>
</cust-layer>
  6. Click Save All.

6.5.2 Defining Seeded Customizations for Each Layer Value of the customer Layer

In the customer layer, you can define multiple seeded customizations for each layer value.

To define seeded customizations for each layer value:

  1. Start JDeveloper with the Customization Developer role.

    The first time the WccAdfCustomization application is opened in JDeveloper with the Customization Developer role, its application file is modified by JDeveloper. So click Save All.

  2. For each layer value of the customer layer, do the following steps:

    1. Go to WccAdfCustomization - Customization Context window, select a specific layer value in the customer tip layer, and then click Save All.

    2. Under the ViewController project, locate WccAdfLibrary.jar (usually near the end of library list), expand it, and then expand wcc.

      All the WebCenter Content user interface pages (.jsf) and page fragments (.jsff) are listed there.

    3. For each page or page fragment that you want to define seeded customizations, take the following actions, in order:

      • Open it in the editor.

      • Define seeded customizations on the page or page fragment, including but not limited to these customizations:

        Hide or remove certain UI components.

        Move UI components around.

        Add new UI components.

        Modify properties of UI components.

        Change resource strings.

      • Click Save All.

    4. Run the WccAdfCustomization application to test the seeded customizations:

      • Right-click index.html and choose Run.

      • After the test is done, stop the WccAdfCustomization application.

6.5.3 Defining MDS Seeded Customizations

You can define MDS seeded customizations in JDeveloper to modify the WebCenter Content user interface. For example, the following procedure shows how to modify the Document Properties page with these customizations:

  • Rename the Summary tab to Overview

  • Hide the System Metadata section on the Metadata tab

To define MDS seeded customizations for the Document Properties page:

  1. In JDeveloper, open docInfoTabs.jsff in the editor.

  2. Select the af:showDetailItem component with the ID summtab.

  3. In the Property Inspector window, pull down the menu for the Text property and choose Select Text Source . . . .

  4. In the Select Text Resource dialog box, do these steps:

    1. Make sure the entry oracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr) is selected.

    2. In the input box for Display Value, enter Overview.

    3. Click Save and Select.

    4. If prompted by a Confirm override popup, click Yes to dismiss it. If you do not want to see this confirmation popup again, you can select Skip This Message Next Time.

    5. Wait until JDeveloper becomes responsive again. This may take several seconds.

  5. Select the same af:showDetailItem component again.

  6. In the Property Inspector window, pull down the menu for the ShortDesc property, and choose Select Text Source . . . .

  7. In the Select Text Resource dialog box, do these steps:

    1. Make sure the entry oracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr) is selected.

    2. In the table for Matching Text Resources, select the row whose Display Value is Overview.

    3. Click Select.

    After these changes, the beginning of the af:showDetailItem component looks like this: 

     <af:showDetailItem text="#{viewcontrollerBundle.OVERVIEW}" id="summtab"
shortDesc="#{viewcontrollerBundle.OVERVIEW}

  8. Select the af:showDetailHeader component whose Text property has the value #{diBundle.MTAB_SYSTEM_METADATA}.

  9. In the Property Inspector window, edit the value of the Rendered property, and choose False. Click Enter to save the change.

  10. Click Save All.

6.5.4 Packaging Seeded Customizations in WccAdfCustomization.mar

After you finish specifying and testing your seeded customizations, you package them for deployment in the WccAdfCustomization.mar file.

To package seeded customizations:

  1. Right-click the WccAdfCustomization application and choose Deploy, then WccAdfCustomization….
  2. In the Deploy WccAdfCustomization dialog box, leave the deployment action with the default selection, which is Deploy to MAR, and click Finish.

    This will generate a WccAdfCustomization.mar file in the deploy/ directory.

6.6 Applying Customizations to the Installed Environment

To apply customizations to the installed Oracle WebCenter user interface environment, you can apply the custom skin and the seeded customizations.

6.6.1 Applying a Custom Skin

To apply a custom skin defined by the new WccAdfCustomSkin.jarfile to WebCenter Content user interface in an installed environment, update the application configuration for the user interface to point to the new skin and to replace the WccAdfCustomSkin.jarfile under the WebCenter Content user interface domain with the new one.

  1. Run a WLST command to update the configuration of the WebCenter Content user interface application to point to the new skin:
    1. Go to WCC_MW_HOME/oracle_common/common/bin, and run wlst.sh or wlst.cmd.
    2. Connect to the port of WCCADF_server1, which by default is 16225. For example:
      wls:/offline> connect()
Please enter your username :weblogic
Please enter your password :
Please enter your server URL [t3://localhost:7001] :t3://localhost:16225
    3. Run the updateWccAdfConfig command to update the skinFamily property to point to the custom skin. For example:
      wls:/wccadf_domain/serverConfig> updateWccAdfConfig(appName='Oracle WebCenter Content - Web UI', skinFamily='wcc-custom-skin')
  2. Stop WCCADF_server1 in the WebCenter Content user interface domain.
  3. Replace the WccAdfCustomSkin.jar file under WCC_MW_HOMEwccontent/wccadf with the generated one.
  4. Start WCCADF_server1 again in the WebCenter Content user interface domain.

The custom skin defined by the new WccAdfCustomSkin.jarfile will take effect immediately. Clear your browser's cache and log in to the WebCenter Content user interface to see the customizations.

6.6.2 Applying the Seeded Customizations to the WebCenter Content User Interface

To apply the seeded customizations defined by the WccAdfCustomization.mar file to the WebCenter Content user interface in an installed environment, update the configuration of the WebCenter Content user interface application to define values for the customer customization layer and to import the WccAdfCustomization.mar file to the MDS repository of the WebCenter Content domain.

To apply the seeded customizations to the WebCenter Content user interface:

  1. Copy the WccAdfCustomization.mar file to a stage location; for example, /tmp/WccAdfCustomization.mar.
  2. Run a WLST command to update the configuration of the WebCenter Content user interface application configuration to define the value(s) for the customer customization layer.
    1. Go to WCC_MW_HOMEoracle_common/common/bin, and run wlst.sh or wlst.cmd.
    2. Connect to the port of WCCADF_server1, which by default is 16225. For example:
      wls:/offline> connect()
Please enter your username :weblogic
Please enter your password :
Please enter your server URL [t3://localhost:7001] :t3://localhost:16225
    3. Run the updateWccAdfConfig command to update the customerCustomizationLayerValues property to the values of the customer layer. For example:
      wls:/wccadf_domain/serverConfig> updateWccAdfConfig(appName='Oracle WebCenter Content - Web UI', customerCustomizationLayerValues='demo')
  3. Run a WLST command to import the WccAdfCustomization.mar file to the MDS repository of the WCCUI domain:
    1. Go to WCC_MW_HOMEoracle_common/common/bin, run wlst.sh or wlst.cmd.
    2. Connect to the port of the Administration Server, which is 7001 by default. For example:
      wls:/offline> connect()
Please enter your username :weblogic
Please enter your password :
Please enter your server URL [t3://localhost:7001] :
    3. Run the importMetadata command to import the metadata defined by the WccAdfCustomization.mar file to the MDS repository. For example:
      wls:/wccadf_domain/serverConfig> importMetadata('Oracle WebCenter Content - Web UI', 'WCCADF_server1', '/tmp/WccAdfCustomization.mar')
  4. Stop WCCADF_server1 in the WebCenter Content domain.
  5. Start WCCADF_server1 again in the WebCenter Content domain.

The seeded customizations defined by the WccAdfCustomization.mar file will take effect immediately. Clear your browser's cache and login to the WebCenter Content user interface to see the customizations.