Overview of Business Space

Prior to V6.1.2, the user interface for WebSphere Business Monitor (hereafter called Monitor) was business dashboards, which enabled users to create personalized views of business data. There were two types of dashboards: WebSphere Portal-based and Web 2.0-based. Monitor V6.1.2 introduced a new user interface called Business Space powered by WebSphere (hereafter called Business Space), which has even greater capabilities for accessing business data anywhere and anytime.

Using the new Web 2.0 Business Space interface, users can create a personal business space that combines business data from multiple sources. Each business space consists of custom pages that display content in one or more views on each page. The views on a page are enabled by widgets that are tailored for different types of dynamic and static content, such as business process information, human task activities, process diagrams, key performance indicators (KPIs), dimensional views, and documents (such as spreadsheets and presentations). The content sources can be local or remote. Each user can create multiple business spaces.

Because Business Space supports WebSphere Business Monitor, WebSphere Process Server, WebSphere Business Modeler Publishing Server and WebSphere Business Services Fabric, a wide range of business data can be made available to users. A single Business Space installation can be configured to access data from multiple installations of these products and thereby provide users with a single interface for interacting with multiple sources of business data.

Like business dashboards, the visual appearance of a business space is determined by a theme. The theme is defined by a Cascading Style Sheet (CSS) and the images are referenced in the style file. The images provide the overall frame and borders for the business space, widgets, and other aspects of the user interface. Business Space ships with a default theme that can be replaced with a custom theme to give the business space the look and feel that a company or organization requires.

In this article, you'll learn how you can customize the default Business Space installed with Monitor. The instructions describe how to create a custom theme, install the theme, and customize aspects of the visual appearance that are not controlled by the theme, such as the page and widget titles. Although this article focuses on customizing Business Space as installed with Monitor, the information can also be applied to Business Space installations for other products.

A sample custom theme called ClipsAndTacksTheme is provided for download. The sample is designed for use with the Clips and Tacks sample from the BPM V6.1.1 Clips and Tacks tutorial. Updating the Clips and Tacks sample for Business Space is described in the companion article Getting started with WebSphere Business Monitor Business Space: Running the BPM V6.1.1 Clips and Tacks tutorial in Business Space V6.1.2. If you install the V6.1.2 Clips and Tacks sample, you can use the sample custom theme to change the appearance of the sample application.

View the built-in themes

The visual appearance of a business space is controlled by a collection of external CSS files. The primary style sheet is the CSS for the theme. When Business Space is installed with Monitor or one of the other V6.1.2 products, a built-in theme named Default is applied to each personal business space that the users create. The theme is also applied to the pages and widgets associated with the business space. Figure 1 shows a business space with the default theme applied.

Other themes are also shipped with Business Space. To see a thumbnail view of those spaces:

1. Log in to Business Space.
2. In the Business Space Manager, click a blank area on the title bar for a business space. If no business spaces are listed, click the icon to create a business space from one of the built-in templates. The name, theme, and other information about the business space displays in the right section of the Business Space Manager.
3. On the Theme line, click Change. The Change Theme window is displayed as shown in Figure 2.
   
   Figure 2. View thumbnails of built-in themes
   
   
   
4. Click the name of a theme to display its thumbnail view.
5. If you want to inspect the theme more closely, select the theme in the Change Theme window and click OK. Click Save to apply the change and then open the business space.

Create a custom theme

The easiest way to create a custom theme is to start with one of the built-in themes. Find the theme that comes closest to the color palette you want and then modify the CSS and images for that theme. The color of many areas of the business space is controlled by small image files instead of color settings in the theme CSS file. Picking a theme that is close to the desired color palette can reduce the number of image files you need to modify to produce your custom theme.

1. Follow the same steps as in View the built-in themes to identify the theme you want to reuse. Note the name of the theme.
2. On the Monitor installation, change to the directory that contains the image files for built-in themes. For example:
   monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\img
   where monitor_root is the root directory of the Monitor installation, monitor_profile is the Monitor profile name, and monitor_cell is the cell name.
3. Create a new folder below the \img directory. Name the folder for your custom theme, for example, executiveTheme.
4. Find the folder for the theme that you want to reuse. The folder name contains the name of the theme displayed in the Change Theme window. For example, the Objectives theme images are in the objectivesTheme folder.
5. Copy the following four folders for the target theme to your new theme folder:
   • Frame: Contains images that compose the borders and tabs for the business space.
   • Palette: Contains images that provide the borders and toolbar for the palette, which provides controls for adding widgets to a page.
   • SpaceBrowser: Contains images associated with the Business Space Manager, which provides controls for creating and importing business spaces and pages, for changing the name, owner, and theme of a business space, and for sharing a business space with other users.
   • WFrame: Contains files that define the borders and title bar for widgets.
6. Create a directory on the server system for your custom theme. We'll refer to this directory as the theme extensions directory in this article. The directory:
   • Should not be located in the path for the Monitor installation so that it won't be overwritten when Monitor updates are installed.
   • Is the repository for the customized theme CSS and JavaScript files.
   • Supports dynamically loading the two files using a Java™ run-time variable that you'll set later.
7. Change to the directory that contains the CSS and JavaScript files for themes. For example:

   monitor_root\profiles\monitor_profile\installedApps\monitor_cell \BusinessSpaceManager.ear\BSpaceManager.war\themes

   
   
8. Find the CSS and JavaScript files for the theme you want to reuse. Those files contain the name of the theme displayed in the Change Theme window. For example, the Objectives theme files are objectivesTheme.css and objectivesTheme.js.
9. Copy the two files to the theme extensions directory that you just created.
10. Change the file names to the names of your new theme, for example, executiveTheme.css and executiveTheme.js.
11. Edit your theme JavaScript file and make the following changes:
    • Change the className property to the file name of your theme CSS file, without the file extension.
    • Change the name property to the display name for your theme. After your custom theme is installed, the display name is listed in the Change Theme window and in the Theme field for any personal business space that uses the theme.
    • For the locale property, delete the lines between the brackets but leave the brackets. Those lines are translations of the original theme name. If you later obtain translations of your theme name, add your translated strings to the locale property.
12. Edit your CSS file and make the following changes:
    • Replace all references to the old theme class name with your theme class name. For example, if you're modifying the Objectives theme, change all occurrences of the string .objectivesTheme to .executiveTheme.
    • Change the value of all instances of the string background-image: url to the directory path for your theme. For example, if you are modifying the Objectives theme, change background-image: url(../img/objectivesTheme/Frame/bg.jpg); to background-image: url(../img/executiveTheme/Frame/bg.jpg);.

      As we'll discuss later, the CSS file is copied to the Monitor themes subdirectory at run-time, so the URLs in the CSS file are relative to the themes folder. Do not change the names of the target files, just the path to the files.

    • Find the attribute .bspacelogo. Change the value specified for the attribute background-image: url to background-image: url(../img/yourTheme/yourImage.extension);, which is the path and filename of your custom banner. If the custom file has not been created yet, set a placeholder name until the final name is known.

Modify the CSS and image files

The base files for the custom theme are now in place. Next Web designers, graphic designers, and other professionals need to modify the CSS and images to set colors, fonts, and other attributes as required. Follow these recommendations when modifying the files:

• Create a business space and set the space theme to your custom theme so that you can see how it renders before you start making changes. See View the built-in themes for instructions on how to set the theme for a business space.
• Use a tool that identifies which styles are applied to different regions of the business space. That information will help you identify the image file or CSS style that controls the visual appearance of that aspect. An example of such a tool is Firebug, an add-on to Mozilla® Firefox® that supports debugging and editing CSS.
• When editing the images that are used for frames and borders, alter the colors as needed to fit within the color palette for your theme. Avoid altering the dimensions of the images.
• The theme CSS file and the images in the theme folder control much of the visual appearance of the business space and can be edited without affecting other themes. However, some aspects of the business space are controlled by shared images and CSS files. For example, the folders img\iconsCommon and img\controlsCommon contain images used across business space themes. Before you edit any files outside of the \img subdirectory for your theme or your theme CSS file, back up the original files.
• If you create a custom banner, it will be used across all of the business spaces for that installation. Figure 1 shows the banner for the Default theme. Put the custom banner in the root directory of the images folder for your theme, img\yourTheme, and verify that your theme CSS file refers to that file name in the URL for the style .bspacelogo. If the banner does not display with the correct size in the business space, edit the banner.jsp file:
  1. Go to the following directory on the Monitor installation:

     monitor_root\profiles\monitor_profile\installedApps\monitor_cell \BusinessSpaceManager.ear\BSpaceManager.war

     
     
  2. Make a back-up copy of the banner.jsp file.
  3. Open the banner.jsp file in a text editor.
  4. Locate the style reference bspacelogo.
  5. Adjust the values of the width and height attributes according to the size of your banner image.
• If you create a custom background image for the log-in page, it will be used across all of the business spaces for that installation. Figure 3 shows the default login page. Put the custom background image in the root directory of the images folder for your theme, img\yourTheme.

Create a custom log-in page

The business space themes do not apply to the log-in page. The appearance of the log-in in page is controlled by a CSS file, login.css. The styles defined in the file include the background image for the page. That style makes it easy to set the log-in page to display a company logo or other unique graphic. Changes made to the login.css file affect the appearance of the log-in page for all users of that Business Space installation. To modify the CSS for the log-in page, do the following:

1. On the server where WebSphere Business Monitor is installed, change to the following directory:

   monitor_root\profiles\monitor_profile\installedApps\monitor_cell \BusinessSpaceManager.ear\BSpaceManager.war\css.

   
   
2. Make a backup copy of the login.css file.
3. Open the login.css file in a text editor.
4. Locate the style named .login-bg.
5. Set the attribute background-image: url to the path for your custom background image file that you put in the img\yourTheme directory.
6. Save the login.css file.
7. To test the change, log in to Business Space. The custom background image and any other changes in the login.css file should be rendered on the log-in page. Figure 4 shows a custom log-in page.

Configure the Java run-time variable

After all of the theme changes are finalized, you need to set the Java run-time variable that points to the theme extensions directory. Using that extension variable ensures that the theme CSS and JavaScript files won't be overwritten if the Monitor installation is updated. If you don't want to use the extension variable to dynamically copy those files to the Monitor themes directory, simply place the final version of the files in the following path and skip this procedure:

monitor_root\profiles\monitor_profile\installedApps\monitor_cell
\BusinessSpaceManager.ear\BSpaceManager.war\themes

1. Log in to the administrative console for the Monitor installation.
2. Select Servers => Application servers => server_name, where server_name is the name of the application server for the Monitor installation, such as server1.
3. In the Server Infrastructure section, select Java Process Management => Process Definition => Environment Entries.
4. Click New. The dialog shown in Figure 6 is displayed.
5. In the Name field, type WBM_WEB_DASHBOARD_EXT_DIR.
6. In the Value field, specify the path to the theme extensions directory that you created in Create a custom theme.
7. Click OK. From now on, whenever a user logs in, the server checks the theme extensions directory.
   
   Figure 6. Setting the Java runtime variable
   
   
   
8. Log off the administrative console.
9. Restart the server.

Change the name of a business space or a page

When you create an empty business space or use a template, you specify a name for the business space. If you create a business space by importing a business space data file, the new business space has the same name as defined in the data file. If you want to change the business space name later, use the Business Space Manager. You must be the owner or have editor privileges to rename a resource. A name change for a business space or one of its pages applies to all users of that business space.

To change the name of a business space or a page, do the following:

1. Open the Business Space Manager.
2. On the right, click the title bar (but not the title itself) for the business space or the page.
3. On the right, enter the new name for the business space or the page in the Name field.
4. Click Save.

Another way to rename a page is to change the name while the page is open in the business space as follows:

1. Open the page that you want to rename.
2. On the page toolbar, display the page menu and select Rename, as shown in Figure 7.
   
   Figure 7. Change the page name
   
   
   
3. Type the new name in the Name field.
4. Click Save.

Change a widget title

A widget displays content for a section of a business space page. The default widget title is displayed unless you change the title. The name change applies only to that instance. If you add another instance of the widget to a page, it will have the default title until you change it. To change the widget title for a single instance of a widget, do the following:

1. Go to the widget that you want to rename.
2. Click the title. The title is highlighted and the title input field is displayed, as shown in Figure 8.
   
   Figure 8. Changing a widget title
   
   
   
3. Type the new title of the widget.
4. Click somewhere outside of the title field. The field closes and the new title displays on the title bar with the theme colors applied.

Summary

With Business Space powered by WebSphere, you can create useful pages that contain business data relevant to your specific job or task. In this article, you've learned how you can personalize your business spaces using themes. Following the the steps in this article, you can quickly and easily change from the default theme, to one of the prepackaged themes, or create a unique new theme tailored to your company.

Back to top

Download

Information about download methods

Resources

Learn

• Managing tasks and business processes using WebSphere Business Space: Getting started with Business Space using the WebSphere BPM V6.1.1 Clips and Tacks tutorial (developerWorks 2008): Learn how to create Websphere BPM V6.1.2 Business Space dashboards using the run-time artifacts from the WebSphere BPM V6.1.1 Clips and Tacks tutorial. You'll create a business space to manage the tasks and business forms input, run some processes that use forms, and finally create a business space you can use to monitor the process and tasks.
  
  
• Customize the appearance of your WebSphere Business Monitor business dashboard (developerWorks 2008): This article provides instructions for customizing dashboards for WebSphere Business Monitor V6.1 and is based on the Clips and Tacks sample.
  
  
• Get started with WebSphere business process management V6.1 software: An introduction to the Clips and Tacks end-to-end BPM tutorial (developerWorks 2008): This article introduces you to IBM WebSphere business process management by describing how to use the Clips and Tacks tutorial to build and deploy a business process and configure a business dashboard to monitor that process.
  
  
• Meet the experts: What's new in the WebSphere BPM V6.1.2 product suite (developerWorks 2008): On August 21st, WebSphere experts Eric Herness, Christina Lau, and Michael Gilfix discussed and answered questions about the WebSphere Business Process Management (BPM) V6.1.2 product suite. The suite provides foundational offerings in the IBM BPM Suite that makes it easier for you to get started with BPM. The chat covered using business space and REST to enable the portfolio, using the asset repository for BPM, the integration of WebSphere Business Modeler and WebSphere Business Services Fabric, and extending the reach of Business Activity Monitoring (BAM) to mobile devices.
  
  
• IBM WebSphere Business Process Management Version 6.1 information center: Get complete product documentation on WebSphere BPM products.
  
  
• WebSphere business process management zone: Get the latest technical resources for WebSphere BPM solutions, including articles, tutorials, events, downloads, and more.
  
  
• Business Process Management enabled by SOA: Get complete product information on IBM BPM software, including features and benefits, downloads, and more.
  
  
• Browse the technology bookstore for books on these and other technical topics.
  
  

Get products and technologies

• "Clips and Tacks: Getting started with the IBM BPM suite of products" tutorial: Take the BPM tutorial and get the sample described in this article.
  
  
• Download IBM product evaluation versions and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere.
  
  

Discuss

• Check out developerWorks blogs and get involved in the developerWorks community.
  
  

About the authors

Alex Peay creates materials that showcase the functionality and usability of the IBM Business Process Management (BPM) product suite. You can reach Alex at apeay@us.ibm.com.

Loretta Hicks develops demos that showcase the IBM product portfolio for Business Process Management (BPM) and Business Activity Monitoring (BAM). You can reach Loretta at hicks@us.ibm.com.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Overview of Business Space
• View the built-in themes
• Create a custom theme
• Modify the CSS and image files
• Create a custom log-in page
• Configure the Java run-time variable
• Change the name of a business space or a page
• Change a widget title
• Summary
• Download
• Resources
• About the authors
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

My developerWorks community

Dig deeper into WebSphere on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers