Elements in the theme for Process Portal spaces

IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize Process Portal spaces > Customize themes
Elements in the theme for Process Portal spaces

Before you begin to customize the theme for a space, you need to understand what each element is responsible for and whether you can modify it.

You can find the elements that control the function and appearance of a theme in the theme.html file. The following table contains a description of each element in the theme.html file, and whether you can remove or replace it.

Elements in the theme for a space
Component Type Layer Remove Replace Details
head dynamic content spot IBM Mashup Center N N Adds required JavaScript.
config dynamic content spot IBM Mashup Center N N Adds required JavaScript.
bspaceConfig dynamic content spot Business Space N N Adds required JavaScript.
loadingCurtain system widget Business Space N * Y Displays a loading message while the user interface is constructed.
* Not recommended. Removing the feature will affect the user experience when page loads.
debugConsole system widget Business Space N N Sends client side error message to the server for logging and improved serviceability.
bannerHtml dynamic content spot Business Space Y Y Creates the banner area of the page.
tabbedNavigationWidget system widget Business Space N * Y ** Provides page tabs to navigate between pages of a space.
* Removing this widget is not recommended due to complex even handling. Instead you can hide this widget.
** It is not recommended that you replace this widget because the implementation is complex. Instead you can hide this widget and provide a simplified navigation widget.
mode selector system widget Business Space/IBM Mashup Center Y Y Button allows editors to switch between page view and edit mode.
status dynamic content spot IBM Mashup Center Y Y Status area used to display messages.
customizeShelfContainer system widget Business Space/IBM Mashup Center N * N ** Used by the palette to access required functionality.
* The palette depends on this widget so it cannot be removed if the palette is required.
** Replacing this widget is not recommended because the implementation is complex.
palette system widget Business Space N N **
Widget palette.
** Replacing this widget is not recommended because the implementation is complex.
layout dynamic content spot IBM Mashup Center N * N * Creates and organizes all of the user's widgets on the page.
* Critical to overall function.
newPage system widget IBM Mashup Center Y Y Dialog used to create a new page.
sharePage system widget IBM Mashup Center Y Y Dialog used to change access control for a page or space.
reorderPage system widget IBM Mashup Center Y Y Dialog used to reorder pages within a space.
StatusBarLogHandle system widget IBM Mashup Center Y Y Handles logging of error and warning messages on the page.
editPage system widget IBM Mashup Center Y y Dialog used to edit page properties.
copySpace system widget IBM Mashup Center Y Y Dialog used to create a new space based on another space.
createSpace system widget Business Space/IBM Mashup Center Y Y Dialog used to create a new space.
editSpace system widget Business Space/IBM Mashup Center Y Y Dialog used to create an edit space properties.
spaceManager system widget Business Space N * N ** Dialog used to administer spaces and pages in the system.
* Critical to overall function.
** Replacing this widget is not recommended because the implementation is complex.
templateManager system widget Business Space Y N ** Dialog used to add templates.
** Replacing this widget is not recommended because the implementation is complex.
embedWidget system widget IBM Mashup Center Y N ** Dialog used to generate the markup required to display widgets in an arbitrary HTML context.
** Replacing this widget is not recommended because the implementation is complex.
embedPage system widget IBM Mashup Center Y N ** Dialog used to generate the markup required to display a page or widgets in an arbitrary HTML context.
** Replacing this widget is not recommended because the implementation is complex.
publishWidget system widget IBM Mashup Center Y N ** Dialog used to publish a widget to the Information Center Hub.
** Replacing this widget is not recommended due to complexity of implementation.
renameWidget system widget IBM Mashup Center Y Y Dialog used to rename a widget.
importWidget system widget IBM Mashup Center Y Y Dialog used to import a widget from the Information Center Hub.
pageCreate system widget Business Space Y Y Dialog used to create a new page.
spaceChangeOwnerWidget system widget IBM Mashup Center Y Y Dialog used to assign a new owner for a space.
spaceEditorWidget system widget IBM Mashup Center Y Y Dialog used to assign edit properties for a space.
changeOwner system widget IBM Mashup Center Y Y Dialog used to assign a new owner for a page.
showLink system widget Business Space Y Y Dialog used to generate a URL that can address the current page and navigation state.
styleManager system widget Business Space Y Y Manages the style.
wireInterface system widget Business Space Y N ** Dialog used to manage the wiring between widgets on a page.
** Replacing this widget is not recommended because the implementation is complex.
dialogDisplayer system widget Business Space N * Y Controls how dialogs are displayed and positioned.
* This is a required function.
asa dynamic content spot IBM Mashup Center Y Y Provides hooks for analytics capability.

Many of the widget names clearly communicate the function of the widget. However, some system widgets handle important event processing and should not be removed. Elements with an 'N' in the Remove or Replace column should not be removed or replaced, but they can be hidden.

For example, the tabbedNavigationWidget is marked with an "N" for Remove because it handles events for showing and removing the loading curtain. (The loading curtain displays a white screen with a Loading... message when pages and widgets are loading.)
The loadingCurtain widget is marked with a "Y" for Replace because you can add display:none to the style attribute of the relevant <div> section and provide an alternate navigation iWidget as shown in the following example.

Example: Replacing the tabbedNavigationWidget

The tabbedNavigationWidget system widget controls how page tabs are displayed at the top of a space. Within the widget, handlers for the com.ibm.mashups.builder.switchPage and com.ibm.mashups.builder.pageSwitched events broadcast the com.ibm.bspace.removeLoadingCurtain event to hide the loading curtain.
com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").broadcastEvent("com.ibm.bspace.removeLoadingCurtain", "true");
If you plan to update theme.html file to remove the tabbedNavigationWidget system widget and replace it with your own navigation widget, your custom widget must handle the com.ibm.mashups.builder.switchPage and com.ibm.mashups.builder.pageSwitched events, and broadcast the com.ibm.bspace.removeLoadingCurtain event to hide the loading curtain. Use the following code to handle and broadcast these events in your navigation widget.
<div class="iw-iWidget iw-Standalone" id="tabbedNavigationWidget" style="width: 100%;">
<a class="iw-Definition" href="/BusinessSpace/iWidget/widgets/system/tabbedNavigation/tabbedNavigation.xml"> </a>
<span class="iw-ItemSet"  style="visibility: hidden; display: none;">
<a class="iw-Item" style="visibility: hidden; display: none;" href="#isBSpaceMode">true</a>
<a class="iw-Item" style="visibility: hidden; display: none;" href="#isBSpaceGlobalMode">false</a>
</span>
</div>
This code leaves the loading curtain in place.

Customize themes in a Process Portal space

Related tasks:
Create themes in a Process Portal space

Component	Type	Layer	Remove	Replace	Details
head	dynamic content spot	IBM Mashup Center	N	N	Adds required JavaScript.
config	dynamic content spot	IBM Mashup Center	N	N	Adds required JavaScript.
bspaceConfig	dynamic content spot	Business Space	N	N	Adds required JavaScript.
loadingCurtain	system widget	Business Space	N *	Y	Displays a loading message while the user interface is constructed. * Not recommended. Removing the feature will affect the user experience when page loads.
debugConsole	system widget	Business Space	N	N	Sends client side error message to the server for logging and improved serviceability.
bannerHtml	dynamic content spot	Business Space	Y	Y	Creates the banner area of the page.
tabbedNavigationWidget	system widget	Business Space	N *	Y **	Provides page tabs to navigate between pages of a space. * Removing this widget is not recommended due to complex even handling. Instead you can hide this widget. ** It is not recommended that you replace this widget because the implementation is complex. Instead you can hide this widget and provide a simplified navigation widget.
mode selector	system widget	Business Space/IBM Mashup Center	Y	Y	Button allows editors to switch between page view and edit mode.
status	dynamic content spot	IBM Mashup Center	Y	Y	Status area used to display messages.
customizeShelfContainer	system widget	Business Space/IBM Mashup Center	N *	N **	Used by the palette to access required functionality. * The palette depends on this widget so it cannot be removed if the palette is required. ** Replacing this widget is not recommended because the implementation is complex.
palette	system widget	Business Space	N	N **	Widget palette. ** Replacing this widget is not recommended because the implementation is complex.
layout	dynamic content spot	IBM Mashup Center	N *	N *	Creates and organizes all of the user's widgets on the page. * Critical to overall function.
newPage	system widget	IBM Mashup Center	Y	Y	Dialog used to create a new page.
sharePage	system widget	IBM Mashup Center	Y	Y	Dialog used to change access control for a page or space.
reorderPage	system widget	IBM Mashup Center	Y	Y	Dialog used to reorder pages within a space.
StatusBarLogHandle	system widget	IBM Mashup Center	Y	Y	Handles logging of error and warning messages on the page.
editPage	system widget	IBM Mashup Center	Y	y	Dialog used to edit page properties.
copySpace	system widget	IBM Mashup Center	Y	Y	Dialog used to create a new space based on another space.
createSpace	system widget	Business Space/IBM Mashup Center	Y	Y	Dialog used to create a new space.
editSpace	system widget	Business Space/IBM Mashup Center	Y	Y	Dialog used to create an edit space properties.
spaceManager	system widget	Business Space	N *	N **	Dialog used to administer spaces and pages in the system. * Critical to overall function. ** Replacing this widget is not recommended because the implementation is complex.
templateManager	system widget	Business Space	Y	N **	Dialog used to add templates. ** Replacing this widget is not recommended because the implementation is complex.
embedWidget	system widget	IBM Mashup Center	Y	N **	Dialog used to generate the markup required to display widgets in an arbitrary HTML context. ** Replacing this widget is not recommended because the implementation is complex.
embedPage	system widget	IBM Mashup Center	Y	N **	Dialog used to generate the markup required to display a page or widgets in an arbitrary HTML context. ** Replacing this widget is not recommended because the implementation is complex.
publishWidget	system widget	IBM Mashup Center	Y	N **	Dialog used to publish a widget to the Information Center Hub. ** Replacing this widget is not recommended due to complexity of implementation.
renameWidget	system widget	IBM Mashup Center	Y	Y	Dialog used to rename a widget.
importWidget	system widget	IBM Mashup Center	Y	Y	Dialog used to import a widget from the Information Center Hub.
pageCreate	system widget	Business Space	Y	Y	Dialog used to create a new page.
spaceChangeOwnerWidget	system widget	IBM Mashup Center	Y	Y	Dialog used to assign a new owner for a space.
spaceEditorWidget	system widget	IBM Mashup Center	Y	Y	Dialog used to assign edit properties for a space.
changeOwner	system widget	IBM Mashup Center	Y	Y	Dialog used to assign a new owner for a page.
showLink	system widget	Business Space	Y	Y	Dialog used to generate a URL that can address the current page and navigation state.
styleManager	system widget	Business Space	Y	Y	Manages the style.
wireInterface	system widget	Business Space	Y	N **	Dialog used to manage the wiring between widgets on a page. ** Replacing this widget is not recommended because the implementation is complex.
dialogDisplayer	system widget	Business Space	N *	Y	Controls how dialogs are displayed and positioned. * This is a required function.
asa	dynamic content spot	IBM Mashup Center	Y	Y	Provides hooks for analytics capability.