Customizing Containers and the Dashboard Bar

Active Technologies for Adobe Flash Player allow you to customize the way that the containers for the various parts of an application are displayed on an active report or active dashboard. For example, you can define the visual characteristics of the container (the component) that holds the contents of an application report or the contents of an application window. You can also customize how the dashboard bar appears on an active dashboard.

All the styling options for the containers and dashboard bar are stored in the irpfsty.js file, found in the \home\etc directory of the WebFOCUS Reporting Server. You can copy this file to your application folder and edit the contents to customize the containers or dashboard bar for your application.

Upgrade requirement: If an irpfsty.js file created prior to WebFOCUS Reporting Server Release 7.7 Version 04 already exists in your application folder, you must replace it with the latest version of irpfsty.js that is supplied with the product. This requirement applies to other JavaScript files as well, including irpstd.js and irpfstd.js. Use the files from the WebFOCUS Reporting Server (\home\etc directory), and apply your customization changes to them.

Procedure: How to Customize Containers and the Dashboard Bar

Copy the irpfsty.js file from the WebFOCUS Reporting Server default location (\home\etc directory), and paste it to your application folder.
This should be the same directory as the location of the active report or active dashboard. For example, from the Projects on localhost area of the Developer Studio Desktop, paste irpfsty.js in the Other subfolder of the project folder.

The section of the irpfsty.js file that controls how a report container is styled is as follows.
```
.arReportObject {
   borderColor: #b7babc;
   dropShadowEnabled: true;
   shadowDistance: 10;
   shadowDirection: right;
   dropShadowColor: #666666;
   fontSize: 12;
   borderStyle: solid;
   verticalGap: 0;
   backgroundColor: white;
   horizontalAlign: center;
}
```
Adjust the values for the properties as desired. For example, you can:
- Accept the default value, true, for the dropShadowEnabled property to display a shadow behind a report container.
- Change the value of the dropShadowEnabled property to false to suppress the shadow behind a report container. The code for suppressing the shadow is:
```
dropShadowEnabled: false;
```
In this example, do the following:
- Accept the dropShadowEnabled default value of true.
- Change the dropShadowColor default value (#666666) to a shade of blue, such as #009dff.
  The code looks like this:
```
dropShadowEnabled: true;
.
.
.
dropShadowColor: #009dff
```
Save and close the irpfsty.js file.
Run the procedure. Your styling choices for report containers are applied.
On the following sample active dashboard, there is a blue shadow behind all report containers.
You can also style a window container.
The section of the irpfsty.js file that controls how a window container is styled is as follows.
```
.arWindow{
   dropShadowEnabled: true;
   shadowDistance: 10;
   shadowDirection: right; 
   dropShadowColor: #666666; 
   fontSize: 12;
}
```
Adjust the values for the properties as desired. For example, you can:
- Accept the default value of true for the dropShadowEnabled property to display a shadow behind a window container.
- Change the value of the dropShadowEnabled property to false to suppress the shadow behind a window container. The code for suppressing the shadow is:
```
dropShadowEnabled: false;
```
In this example, do the following:
- Accept the dropShadowEnabled default value of true.
- Change the dropShadowColor default value (#666666) to a shade of magenta, such as #b60cb0.
  The code looks like this:
```
dropShadowEnabled: true;
.
.
.
dropShadowColor: #b60cb0;
```
Save and close the irpfsty.js file.
Run the procedure. Your styling choices for window containers are applied.
On the following sample active dashboard, there is a magenta shadow behind the container for the filter selection window.

You can also style the dashboard bar on an active dashboard.

The default section of the irpfsty.js file that controls how the dashboard bar is styled is as follows.

.arDashboardBar {  
   backgroundColor: #ffffff; 
   borderColor: #cccccc;
   selectionColor: #7FCEFF;
   color: #003300; 
   textRollOverColor: #0b333c; 
   textSelectedColor: #0b333c; 
   themeColor: #009dff; 
   fontSize: 12; 
   fontWeight: bold; 
   textAlign: left; 
   paddingTop:2; 
   paddingBottom:2; 
   paddingLeft:4; 
   paddingRight:4;
   borderStyle: outset; 
   borderThickness: 10; 
}

By default, an active dashboard displays a shadow underneath the dashboard bar. You can add the following line of code to the .arDashboardBar section of the irpfsty.js file to suppress the shadow:

dropShadowEnabled: false;

For the purpose of this example, suppress the shadow underneath the dashboard bar by adding the preceding line of code to the irpfsty.js file.

The code looks like this:

.arDashboardBar {  
   backgroundColor: #ffffff; 
   borderColor: #cccccc;
   dropShadowEnabled: false;
   .
   .
   .

Save and close the irpfsty.js file.
Run the procedure. Your styling choices have been applied.
Based on the sample values used in this procedure, there is:
- A blue shadow behind each report container on the dashboard.
- A magenta shadow around the window containers (such as the container for the Filter Selection window).
- No shadow underneath the dashboard bar.
If you had also chosen to suppress all the shadows behind the report containers and the window containers (dropShadowEnabled: false;), the dashboard would look like the following.