Creating your own look and feel - overview

The steps in the following section take advantage of the Oracle BI 12c skinning and styling customization options. Modifying these options is predominantly manual in nature. The idea of look and feel as it relates to Oracle BI translates into skins, styles, and messages.

Messages are usually the textual elements that are shown in the Oracle BI portal (presentation services) and can be anything from the header logo and text, to the name of each link shown above the dashboard tabs. An example of the latter would be changing the sign out link on the portal dashboard to render Get out of here! instead.

Styles and skins relate to both the color scheme shown in the Oracle BI portal and the visible nature of Oracle BI Analysis Views. An example of modifying a style would be to change the background color of a dashboard from the default white color to a light gray. An example of skinning would be to modify the bar chart's color scheme from its default to a custom color palette.

Creating new styles and skins means creating the files and folders which contain your custom code, and deploying these files into the BI Server.

Tip

Two deployment methods:

The deployment of a new style can use either a full application method, or it can be using a shared folder. We will examine both methods.

Examples of the files and folder structures required for your custom code can be found in the analytics Enterprise Application aRchive (EAR) file. The analytics EAR file can be found in the <Oracle_home>bibifoundationjee.

Tip

You can open EAR and WAR files using the 7-zip utility. See http://www.7-zip.org/

Inside the EAR file is a Web Application Archive (WAR) file, which contains the res folder; for example, see <Oracle_home>bibifoundationjeeanalytics.earanalytics.warres. Here you will see the styles which are already available to your users, such as Skyros, Alta, blafp, Fusion, and FusionFX.

The folders that should be used as templates are prefixed with s_ and sk_, which specifies the style and skin folders respectively. As an example, one of the default sets of style and skin folders provided out-of-the-box are s_blafp and sk_blafp. If modifying both the skin and styles, both of these folders will be leveraged.

In addition to styles and skins, custom messages can be used to modify the Oracle BI dashboards. There are hundreds of messages within the Oracle BI 12c environment that are dynamically accessed and generated at runtime. The core messages can be located in XML files contained within the following folder: <Oracle_Home>bibifoundationwebmsgdbmessages.

Each XML file acts as a grouping container, as suggested by the name, containing one or more message objects that are referenced by Oracle BI at runtime. These messages can be overridden, and a few will be in this exercise. This dynamic messaging system also allows flexibility for localization (that is, translation into other languages or specific text to other languages). In order to either create custom templates or modify a template to another language, a separate custom messages folder and XML file will be established away from the default message folder referenced in the preceding section. The message that is desired to be overridden, is usually first assessed from the default messages folder location. Attributes about the message are noted and the overriding message is then created in a new arbitrarily named XML file. The XML file is placed in a filesystem folder, and is ultimately moved into a web application (or folder) that gets deployed to the WebLogic Application Server.

Tip

You should never modify the original default skin, styles, or messages folders and/or files directly. A copy of the base files should be made and then modified.

Creating your style

Before we can deploy the style code, we need to create it! We could do this from scratch, or by copying an existing style's folders, or you may prefer to take a shortcut and start with an existing pre-built structure. Luckily, Oracle have provided a simple EAR file to start with, called bicustom-template.ear. The bicustom EAR file is based upon the Skyros style. You can find this file in <Oracle_home>bibifoundationjee.

The first stage is to extract the files:

  1. Create a working folder, for example C:fmw_bookobiee_dev.
  2. Create a subfolder called ear.
  3. Create another subfolder called war.
  4. Copy the bicustom-template.ear into the ear folder.
  5. Extract the bicustom-template.ear file into c:obiee_devear using 7-zip, or use the Java command:
    cd c:fmw_bookobiee_devear
jar xvf bicustom-template.ear
  6. Check that you now have a folder call META-INF and a WAR file in the ear folder.
  7. Delete the bicustom-template.ear file.
  8. Extract the file bicustom.war into c:obiee_devwar, use 7-zip or a Jar command:
    copy bicustom.war c:fmw_bookobiee_devwar
cd c:fmw_bookobiee_devwar
Jar xvf bicustom.war
  9. Delete the file C:obiee_devearbicustom.war (we will generate our own war file).

    Tip

    If the Jar command is not recognized, either add the java JDK folder to the path environment or call JAR using the full pathname.

  10. You now have the files you need to make a style for your project:

    Creating your style

    Tip

    Code management:

    In this example, we have put our code into the folder, C:obiee_dev, which we have added to our code management system. We use GitHub, but you can use any form of SVN -- just make sure you are using one!

In this exercise, we will modify the Oracle BI 12c dashboard for a fictional organization, Company XYZ. Their standard company color palette is made up of the following:

  • Color #1: Light Steel Blue
  • Color #2: Gray
  • Color #3: Black

Modifying the code

We are now going to create our new style by renaming the component parts and mapping them to a style:

  1. Rename the folder s_Custom to s_BookStyleOne.
  2. Create a folder called sk_BookStyleOne in the same folder as s_BookStyleOne.
  3. Edit the file, filemap.xml, changing s_Custom to s_BookStyleOne, and sk_Cusom to sk_BookStyleOne.

    The code should now read as follows:

    <FileMap>
   <Styles Default="s_blafp">
      <Hierarchy>s_Skyros / s_BookStyleOne</Hierarchy>
   </Styles>
   <Skins Default="sk_blafp">
      <Hierarchy>sk_Skyros / sk_BookStyleOne</Hierarchy>
   </Skins>
</FileMap>
  4. Save the file.

    You will now have two folders in the res folder:

    Modifying the code

  5. Edit the file master.css (in the ress_BookStyleOnemaster folder).
  6. Find the entry for masterBrandingArea, and change the values to:
    masterBrandingArea {
    background-color: lightsteelblue;
    color: black;
    padding: 5px;
}
  7. Find the entry for masterMenuButtonGlobal, and change the values to:
    masterMenuButtonGlobal {
    color: black;
}
  8. Save the file.
  9. Edit the file custom.css (in the ress_BookStyleOnemaster folder).
  10. Add an entry for a dashed line at the top:
    HeaderBarSeparator {
	border-top: 1px dashed magenta;
}
  11. Save the file.

    Tip

    OK, that's enough to demonstrate what changes can be made, lets now test this code in OBIEE.

    In the first example, we will use method one; Create and deploy an Enterprise Application aRchive (EAR) file. We will use the Java JAR command in a cmd window to create our files.

    Tip

    Creating an EAR file which contains all of your custom code makes it easier to deploy and re-deploy into different environments and into a clustered environment.

  12. Using Java, zip up the contents of the war folder, into a WAR file called bicustom.war:
    Cd c:fmw_obieeobiee_devwar

Jar -cvf bicustom.war *
  13. Copy the bicustom.war file into the ear folder:
    copy bicustom.war ..ear
  14. Use Java to zip up the contents of the ear folder, creating a file called bicustom.ear:
    Cd c:fmw_obieeobiee_devear

Jar -cvf bicustom.ear *
  15. Now copy the file to the components folder, which in our case is located at: <ORACLE_HOME>user_proctsdomainsbibidatacomponentsOBIPS:
    copy c:fmw_obieeobiee_devearicustom.ear c:fmw_obieeoracle_home user_proctsdomainsiidatacomponentsOBIPSicustom.ear

You now have a file ready to deploy, so we will now use the WebLogic screens to deploy the file:

  1. Log into the OBIEE Administration Console at http://localhost:9500/console.
  2. Click on the Deployments link.
  3. Click on the Lock & Edit button.
  4. Click on the Install button:

    Modifying the code

  5. Navigate to the path where the bicustom.ear file is: c:fmw_obieeoracle_home user_proctsdomainsbibidatacomponentsOBIPSbicustom.ear:

    Modifying the code

  6. Click on Next.
  7. Select Install this deployment as an application:

    Modifying the code

  8. Click on Next:

    Modifying the code

  9. Select the bi_server1 option.
  10. Click on Next.
  11. Select the option I will make the deployment accessible from the following location.
  12. Click on Next.
  13. Click on Finish:

    Modifying the code

  14. Click on the Activate Changes button.

The application is now installed on the BI Server, but is not yet running, and is not yet being used by OBIEE. First, we will set it to be running, then we will restart the service so that OBIEE picks up the new code:

  1. Click on the Control tab.
  2. Select the bicustom application.
  3. Click on Start.
  4. Click on Servicing all requests:

    Modifying the code

  5. Click Yes to start servicing requests:

    Modifying the code

So, the application is now running, but OBIEE still doesn't know about it. In theory, we could restart the OBIEE Presentation Service now and the new style would be available. In practice, we usually find that a full restart is best for a new deployment:

  1. Stop and start your OBIEE system.
  2. Log into OBIEE.
  3. Edit Dashboard One.
  4. Click on the tools icon.
  5. Click on the Dashboard Properties... link:

    Modifying the code

  6. Click on the Style list.
  7. Change the style to BookStyleOne.
  8. Click on OK.
  9. Save and run the dashboard.

You will now see your dashboard in our new corporate colors. Notice the dashed line and the Steel Blue header background.

Congratulations, you have implemented a new style.

Updating your style

Editing your new style can be easily achieved using the following steps:

  1. Update the style ear file with your changes.
  2. Update the deployed application.
  3. Restart the presentation service.

Let's give it a try:

  1. Update the CSS and image files in your style. For example, change the dashed line to solid (in custom.css):
    .HeaderBarSeparator
{
		border-top: 1px solid magenta;
}
  2. Create a new bicustom.ear file which includes your updated code.
  3. Copy into the OBIPS folder, that is, c:fmw_obieeoracle_home user_projectsdomainsbibidatacomponentsOBIPS.
  4. Log into OBIEE Console.
  5. Click on the Deployments link.
  6. Click on the Lock & Edit button.
  7. Select the bicustom application.
  8. Click on the Update button.
  9. Click Finish (you can skip all steps).
  10. Click on Activate Changes button.

There is no need to restart the presentation service, but you will have to reload the files and metadata in the OBIEE Administration screen:

  1. Click on Administration.
  2. Click on Reload Files and Metadata:

Updating your style

At this point, you may have to clear your cache in your browser.

When you view Dashboard One, you should now see the solid magenta line.

Alternative deployment method

We mentioned earlier that there are two ways of implementing your custom code. Previously, we have shown how to implement using a deployed application in the WebLogic server.

We will now look at the alternative method, which is to deploy a folder instead of an application.

In the first part, we will create a new style in a custom folder.

This time we will start with a copy of the Skyros code, which we will get from the analytics.ear file:

  1. Extract the folder, s_skyros and sk_skyros from the folder C:fmw_bookOracle_homebibifoundationjeeanalytics.earanalytics.warres, into a temporary folder.
  2. Create a folder for the custom code. Create C:fmw_bookBookCustomCode.
  3. Extract the bicustom.war file into C:fmw_bookBookCustomCode.
  4. Delete the folder C:fmw_bookBookCustomCoderesbicustom.
  5. Copy s_skyros from the temporary folder into BookCustomCoderes.
  6. Copy sk_skyros from the temporary folder into BookCustomCoderes.
  7. Rename the s_skyros folder (in the res folder) to s_BookStyleTwo.
  8. Rename the sk_skyros folder (in the res folder) to sk_BookStyleTwo.

    You should now have the current folders in place, ready for creating a new style:

    Alternative deployment method

  9. Edit the filemap.xml file (C:fmw_bookBookCustomCodefilemap.xml):
    <Styles Default="s_blafp">
  <Hierarchy>s_Skyros / s_BookStyleTwo</Hierarchy>
</Styles>

<Skins Default="sk_blafp">
  <Hierarchy>sk_Skyros / sk_BookStyleTwo</Hierarchy>
</Skins>
  10. Edit the CSS file master.css (found in the master folder):
    masterBrandingArea {
    background-color: burlywood;
    color: black;
    padding: 5px;
}
  11. Edit the CSS file custom.css (also found in the master folder):
    HeaderBarSeparator {
	border-top: 5px solid blanchedalmond;
}

Now we will deploy the new custom folder into OBIEE:

  1. Log in to Oracle WebLogic Server Administration Console.
  2. Click Lock & Edit.
  3. Click on the Deployments link.
  4. Click on the Install button.
  5. Select the folder containing the new custom style:

    Alternative deployment method

  6. Click Next.
  7. Select Install this deployment as an application.
  8. Click Next.
  9. Select bi_cluster as the deployment target.
  10. Click Next.
  11. Set the name to AnalyticsRes.
  12. Select I will make the deployment accessible from the following location.
  13. Click Next.
  14. Select Yes, take me to the deployment's configuration screen.
  15. Click Finish.
  16. Click the Configuration tab.
  17. Enter /analyticsRes in the Context Root box.
  18. Click Save.
  19. Click OK.
  20. Click Activate Changes.

Now we will start the new application:

  1. Click on the Deployments link.
  2. Select the Control tab.
  3. Select the analyticsRes checkbox.
  4. Click Start, and then select Servicing all requests.

In order for OBIEE to use the new folder, we need to update the configuration file, instanceconfig.xml.

This file is located in <BI DOMAIN>configfmwconfigbiconfigOBIPS.

Please take a backup of the file before editing it:

  1. Edit instanceconfig.xml.
  2. Add the following code:
    <!-- Customisation added -->
<URL>
<CustomerResourcePhysicalPath>C:fmw_bookBookCustomCode
es
</CustomerResourcePhysicalPath>
<CustomerResourceVirtualPath>/analyticsRes/res
</CustomerResourceVirtualPath>
</URL>
  3. Stop and restart the OBIEE system.

We will now check that BookStyleTwo is available:

  1. Log into OBIEE.
  2. Edit Dashboard One.
  3. Click on the tools icon.
  4. Click on the Dashboard Properties.... link.
  5. Click on the Style list.
  6. Change the style to BookStyleTwo:

    Alternative deployment method

  7. Click OK.
  8. Save and run the dashboard.

You can now change the CSS directly in the BookStyleTwo CSS files, and the changes can be instantly viewed in OBIEE.

This method lends itself very well to dynamic implementations, where changes are required quicker.

Custom messages

The words that you see on the screen can be changed to suit your company.

Let's do a simple example, where we change the title from Business Intelligence to OBIEE 12c Book:

  1. Create a file called custommessages.xml.
  2. Add the following entry: 
    <?xml version="1.0" encoding="utf-8"?>
<WebMessageTables xmlns:sawm="com.siebel.analytics.web/message/v1">
<WebMessageTable system="Custom Messages" table="Messages">
<WebMessage name="kmsgHeaderBIBrandName"><TEXT>OBIEE 12c</TEXT></WebMessage>
</WebMessageTable>
</WebMessageTables>
  3. Create a folder called customMessages in the OBIPS folder, that is, C:fmw_bookOracle_homeuser_projectsdomainsbibidatacomponentsOBIPScustomMessages.
  4. Copy the custommessages.xml file into the new folder.
  5. Reload the files and metadata in the Administration screen:

    Custom messages

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.146.37.250