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>
<property>
<name>dojoTheme</name>
<value>true</value>
</property>
</control>
<control>
<property>
<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!)