Skip to main content link. Accesskey S

The useful resource for IBM Lotus Domino XPages development

Submit Search


Home > Work with themes
xpageswiki.com
is maintained by 
Julian Buss.
You can hire me.

Work with themes

ShowTable of Contents
You can use a theme to preset properties for all XPages in your applications and to include client side resources.

Basics


Create a new theme. Use

<theme extends="webstandard">


to include all standard stylesheet files. Leave "extends" blank to get rid of standard CSS.

Include client side resources (css, JavaScript)


Use the following code to include a css in all XPages:

<resource>
		<content-type>text/css</content-type>
		<href>xApplication.css</href>
	</resource> 


and for JavaScript:
<resource>	
	<content-type>text/javascript</content-type>
		<href>clientjavascript.js</href>
	</resource> 

Include a CSS file based on a condition


You can use JavaScript to compute wether a CSS file should be used or not.

<resource rendered="#{javascript:sessionScope.get('theme')=='purple'}">
<content-type>text/css</content-type>
<href>PurpleClasses.css"</href>
</resource>


(Thanks, Mark Leusink!)

Set a page icon for all XPages


<control>
		<property>
			<name>pageIcon</name>
			<value>favicon.ico</value>
		</property>
	</control>

Set Dojo properties for all XPages


Set dojoTheme to true and dojoParseOnLoad to true:

<control>
<name>ViewRoot</name>
		<property type="boolean">
			<name>dojoTheme</name>
			<value>true</value>
		</property>
	</control>
	<control>
		<property type="boolean">
			<name>dojoParseOnLoad</name>
			<value>true</value>
		</property>
	</control>	

Set @DbTitle() as default page Title if no other page title is defined


<control override="false">
  		<name>ViewRoot</name>
  			<property>
   				<name>pageTitle</name>
   				<value>#{javascript:@DbTitle()}</value>
  			</property>
 </control>

Attach standard CSS classes to body tag of all XPages


<control override="false">
  	<property mode="concat">
		<name>styleClass</name>
		<value>xspView tundra</value>
		</property>	
 </control>


Note: this preserves an existing styleClass setting on an XPage and only attaches "xspView tundra" because of the mode="concat".

Combine multiple settings for the same control


For example, set pageIcon, styleClass and pageTitle defaults for all XPages:

<control override="false">
	<name>ViewRoot</name>
	<property mode="concat">
		<name>styleClass</name>
		<value>xspView tundra</value>
	</property>
	<property>
   		<name>pageIcon</name>
   		<value>favicon.ico</value>
  	</property>
  	<property>
   		<name>pageTitle</name>
   		<value>#{javascript:@DbTitle()}</value>
  	</property>
</control>

Switch theme on the fly


Example: switch from the theme "webstandard" to "oneui".

var curID = context.getThemeId(); 
var newID = (curID == "webstandard") ? "oneui" : "webstandard"; 
context.setSessionProperty("xsp.theme", newID) 

Set properties of controls


You can set nearly any property of any control via theme. Here are a few examples:

<control name="Sidebar.Releases.Timestamp">
<name>Sidebar.Releases.Timestamp</name>
<property mode="override">
<name>value</name>
<value>#{release.timeStamp}</value>
</property>
</control>
<control name="Sidebar.Releases.Link">
<name>Sidebar.Releases.Link</name>
<property mode="override">
<name>text</name>
<value>#{release.fullName}</value>
</property>
<property mode="override">
<name>value</name>
<value>#{release.relativePath}</value>
</property>
</control>


(Thanks, Tim!)

Use JavaScript in property values


You can use any ServerSide JavaScript in a property value:

<value>#{javascript:@DbTitle()}</value>

themeID values for core controls


You can use the following default themeIDs to set properties for core controls:

View: ViewRoot
Form: Form
Computed Field: Text.ComputedField
Label: Text.Label
Edit Box: InputField.EditBox
Edit Box with password=true: InputField.Secret
Date Time Picker: InputField.DateTimePicker
Multiline Edit Box: InputField.TextArea
RichText: InputField.RichText
File Upload: InputField.FileUpload
File Download: DataTable.FileDownload
File Download Link: Link.FileDownload
Link: Link
Button: Button.Command
Button with type=submit: Button.Submit
Button with type=cancel: Button.Cancel
Check Box: CheckBox
Radio Button: RadioButton
Listbox: ListBox
Combobox: ComboBox
Image: Image
Error Message: Message
Error Messages: MessageList
Panel: Panel
Section: Section
TabbedPanel: TabbedPanel
TabbedPanel Tab: Tab.TabbedPanel
Data Table: DataTable
View Panel: DataTable.ViewPanel
View Panel Title: Text.ViewTitle
View Panel Column: Column.View
View Panel Column Text: Text.ViewColumn
View Panel Computed Column Text: Text.ViewColumnComputed
View Panel Column Link: Link.ViewColumn
View Panel Image: Image.ViewColumn
View Panel Check Box: CheckBox.ViewColumn
View Panel Column Header: Panel.ViewColumnHeader
View Panel Column Header Text: Text.ViewColumnHeader
View Panel Column Header Link: Link.ViewColumnHeader
View Panel Column Header Check Box: CheckBox.ViewColumnHeader
View Panel Column Header Icon: Image.ViewColumnHeader
View Panel Column Header Sort Image: Image.ViewCOlumnHeaderSort
Pager: Pager
Pager Control: PagerControl
Pager First: PagerControl.Pager.First
Pager Previous: PagerControl.Pager.Previous
Pager Next: PagerControl.Pager.Next
Pager Last: PagerControl.Pager.Last
Pager Group: PagerControl.Pager.Group
Pager Status: PagerControl.Pager.Status
Pager Goto: PagerControl.Pager.Goto
Pager Separator: PagerControl.Pager.Separator

More information


Have a look in your notesdata/xsp/nsf/themes directory in the webstandards.theme file.
You'll find a lot of interesting information about control names and render conditions there.

(Thanks, Mark Leusink!)
Created by Michael Saiz on May 27, 2014 3:19:50 PM

Hi Julian thanks for sharing these information, however i found a issue in the themeID list when i wanted to overwrite the ErrorMessage Styles: ErrorMessages != MessageList it is also 'Message' i found that out when i inspected the the xp:messages html code. It also uses the xspMessage styleClass like the xp:message. Maby you want to correkt that. =)


Add Comment

Name:
Comments:
How to take your XPages App to the iPhone, iPad, Android: use Domino To Go!
Do you look for an XPages Workflow solution? Take YouAtNotes Workflow.