IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize Process Portal spaces

Customize page layouts for Process Portal spaces

A set of page layouts for you to use in your spaces. If the exact page layout that you need is not included in this set, you can create custom page layouts by making a copy of an existing set of layout files and customizing them.

Each page layout consists of the following set of files which are stored under a single directory. The name of the directory is used as a unique identifier for the layout.

The purpose and content of each of these files is described below.


layout.html

The layout.html file defines the core structure of the page layout. At the top of each page layout file is the following required text: 

<span style="display:none" class="decoration">
com.ibm.pb.decorations.LayoutResizers</span>

<span style="display:none" class="decoration">
com.ibm.pb.decorations.LayoutFilters</span>

<div class="hiddenWidgetsDiv">

 <!--widgets in this container are hidden in the UI by default -->

 <div class="component-container hiddenWidgetsContainer ibmDndRow" 
name="ibmHiddenWidgets">*/div>

 <div style="clear:both"></div>

</div>

After the required heading section, the body of the layout is specified. Each layout consists of a set of containers used to hold widgets. Row and column containers are supported. A row is used to arrange widgets horizontally. A row must occupy the entire width of the page. A column is used to arrange widgets vertically. Columns can occupy the entire width of a page or they can be arranged side-by-side with other columns. Each container (row or column) is specified in the file as an HTML <div> element with a class name of component-container.

The container <div> element can have the following additional class names:

Additional class names for the <div> element
Class name Description
ibmDndRow and ibmRow Used together to indicate that the container is a row container with widgets arranged side-by-side
ibmDndColumn Indicates that the container is a column container with widgets arranged vertically.
ibm1Col Indicates that the container is a column that is the full width of the page.
ibm2Col Indicates that the container is a column that is side-by-side with another column.
ibm3Col Indicates that the container is a column that is side-by-side with two other columns.
ibmRightColumn Indicates that the container is the last column in a group of side-by-side columns.

Each container should also have a name. The first container on the page must be named ibmMainContainer.

The following example shows the content for a page with four containers: a row container across the top, a column container that spans the entire page width, and two column containers arranged side-by-side: 

<div class="component-container ibm1Col ibmDndColumn" name="middle"></div>

<div class="component-container ibm2Col ibmDndColumn" name="left"></div>

<div class="component-container ibm2Col ibmRightCol ibmDndColumn" name="right">
</div>


metadata.properties

This file is used to specify the path name for the icon to display in the layout selection menu. Your icon graphic file should go into the layout folder created, as follows: 

thumbnailPath=layout-templates/mylayout/icon.gif


icon.gif

This file contains the image used within the layout selection menu. The image should be 22x22 pixels in size.


metadata\localized_ language.properties

The metadata subdirectory contains a set of properties files that specify the title and description of the layout for each supported locale.

For example, if you are using an English locale, then you would have a file named localized_en.properties within the metadata subdirectory.

The following is an example of the contents of one of these properties files: 

# NLS_ENCODING=UNICODE
# NLS_MESSAGEFORMAT_NONE

title=My Layout
description=This is my custom layout.

After you have created a new custom layout, you can use it to lay out pages in your spaces.

Customize Process Portal spaces