Work with dynamic content spots

Work with dynamic content spots

We can add dynamic content to the custom theme using either client-side or server-side logic.

Client-side logic

We can add client-side logic, for example JavaScript, iWidgets, live text, to the WebDAV file store and reference it in the theme.html file.

Server-side logic

We can reference a JSP in the theme.html file using a dynamic content spot. We cannot add a JSP to WebDAV, because it needs a servlet context to compile and execute.

There are cases where it is better to reference dynamic content by a logical name.

Abstract the dynamic content away from the implementation.

This is necessary if the theme needs to run on multiple runtimes, for example WebSphere Portal and IBM Mashup Center. The portal implementation of the navigation tabs can be a JSP containing portal specific code. The Mashup Center provides an iWidget.

Isolate the theme author from having to know the underlying code information.

This is useful if the theme author is an HTML and CSS designer, but not a J2EE or JavaScript developer. The HTML and CSS developer needs to know only the list of named content spots and the simple syntax to add it. The developer can then write code without having to know JSP path names.

Reference by name

Examples:

Including a named dynamic content spot mapping:
<a rel="dynamic-content" href="http://setgetweb.com/p/portal80/dyn-cs:/newDynamicContent"></a>

Including a theme JSP directly:
<a rel="dynamic-content" href="http://setgetweb.com/p/portal80/res:/CustomThemeContext/themes/html/MyTheme/dynamicContent.jsp"></a>

Including an iWidget definition:
<div class="iw-iWidget id="myWidget">
<a class="iw-Definition" href="http://setgetweb.com/p/portal80//path-to-widget-definition.xml"></a>
<span class="iw-ItemSet" style="display:none" >
<a class="iw-Item" href="http://setgetweb.com/p/portal80/#key">value</a>
...
</span>
</div>

Configure and modify named dynamic content spots

The dynamic content spot mappings are defined for the theme and skin templates in a Resource Environment Provider (REP) named WP DynamicContentSpotMappings in the WAS admin console.

Name of the content spot Value Description
80theme_asa res:/wps/themeModules/asa/jsp/asa.jsp, wp_analytics Site analytics extension
80theme_head res:/wps/defaultTheme80/themes/html/dynamicSpots/head.jsp HTML head element that provides the document title, styles, bookmark icon, etc.
n/a co:head Invokes the combiner datasource which injects the head markup identified in the module profile.
80theme_pageModeToggle res:/wps/defaultTheme80/themes/html/dynamicSpots/pageModeToggle.jsp, wp_toolbar Edit Mode and View mode buttons in the theme banner seen when the project menu is off.
80theme_topNav res:/ps/defaultTheme80/themes/html/dynamicSpots/navigation.jsp?level=0&rootClass=wpthemeHeaderNav&primeRoot=true Navigation located in the theme header, 1st level of navigation
80theme_primaryNav res:/wps/defaultTheme80/themes/html/defaulttheme80/navigation.jsp??level=1&rootClass=wpthemePrimaryNav%20wpthemeLeft Navigation located in the banner, 2nd level of navigation
80theme_secondaryNav res:/wps/defaultTheme80/themes/html/dynamicSpots/navigation.jsp??level=2&rootClass=wpthemeSecondaryNav&levelsDisplayed=2 Navigation located in the sub-banner, 3rd level of navigation
80theme_commonActions res:/wps/defaultTheme80/themes/html/dynamicSpots/commonActions.jsp Common actions located on the banner, i.e. Actions, Login, Logout
80theme_crumbTrail res:/wps/defaultTheme80/themes/html/defaultTheme80/crumbTrail.jsp?level=2&rootClass=wpthemeCrumbTrail Navigation breadcrumb trail to display the page selection path
80theme_search res:/wps/themeModules/themes/html/dynamicSpots/modules/search/search.jsp Search input displayed on the sub-banner
80theme_layout lm:template Layout of the page
80theme_80theme_footer res:/wps/defaultTheme80/themes/html/dynamicSpots/footer.jsp Footer of the page
n/a co:config Invokes the combiner datasource which injects the config markup identified in the module profile
80theme_sideNav res:/wps/defaultTheme80/themes/html/dynamicSpots/sideNavigation.jsp&startLevel=2 Nested side navigation started at the third level
80theme_preview res:/wps/themeModules/modules/pagebuilder/jsp/preview.jsp,wp_preview End Preview button located at the top of the page when previewing as a different user
80theme_projectMenu res:/wps/themeModules/modules/pagebuilder/jsp/projectMenu.jsp,wp_project_menu The project dropdown menu located in the theme header
80theme_toolbar res:/wps/themeModules/modules/pagebuilder/jsp/toolbar.jsp,wp_toolbar The tabbed toolbar located at the top of the page while in edit mode
80theme_status res:/wps/defaultTheme80/themes/html/dynamicSpots/status.jsp,wp_status_bar Area located above the page layout which displays status, warning and error messages to the user

Content spot value Description
lm:control Renders the layout control body.
lm:title Renders the title of the portlet.
lm:description Renders the description of the portlet.
portlet.link:portlet Outputs the markup <span id="portlet_id"></span> to allow page to position itself at a particular portlet markup via a fragment identifier.
80theme_asaPortlet res:/wps/themeModules/modules/asa/jsp/asaPortlet.jsp, wp_analytics Site analytics extension for portlets
We can modify this configuration using the WAS admin console. When you work with this configuration, observe the following hints and tips:

To change the implementation of a JSP, do not modify the version of the JSP provided with the portal. Either change this configuration to point to our own JSP in our own WAR file, or reference this JSP directly in the theme and bypass the configuration.

The Resource Environment Provider (REP) configuration is global, and is not per theme. If you change the configuration, the change applies to all themes in the portal.

To override a configuration for a specific theme only, set a theme metadata parameter with key=com.ibm.portal.theme.dynamic spot name and a value equal to the overriding POC URL (piece of content URL).

Changes to the REP require a server restart to take effect.

Theme metadata is easier to modify than the REP. Theme metadata is accessible for updates using WebDAV and does not require a server restart for the changes to take effect. Consider overriding the defaults through theme metadata, particularly at development time, even if the changes are global in production.

We can add named content spots.

Parent: Dynamic content spots

Name of the content spot	Value	Description
80theme_asa	res:/wps/themeModules/asa/jsp/asa.jsp, wp_analytics	Site analytics extension
80theme_head	res:/wps/defaultTheme80/themes/html/dynamicSpots/head.jsp	HTML head element that provides the document title, styles, bookmark icon, etc.
n/a	co:head	Invokes the combiner datasource which injects the head markup identified in the module profile.
80theme_pageModeToggle	res:/wps/defaultTheme80/themes/html/dynamicSpots/pageModeToggle.jsp, wp_toolbar	Edit Mode and View mode buttons in the theme banner seen when the project menu is off.
80theme_topNav	res:/ps/defaultTheme80/themes/html/dynamicSpots/navigation.jsp?level=0&rootClass=wpthemeHeaderNav&primeRoot=true	Navigation located in the theme header, 1st level of navigation
80theme_primaryNav	res:/wps/defaultTheme80/themes/html/defaulttheme80/navigation.jsp??level=1&rootClass=wpthemePrimaryNav%20wpthemeLeft	Navigation located in the banner, 2nd level of navigation
80theme_secondaryNav	res:/wps/defaultTheme80/themes/html/dynamicSpots/navigation.jsp??level=2&rootClass=wpthemeSecondaryNav&levelsDisplayed=2	Navigation located in the sub-banner, 3rd level of navigation
80theme_commonActions	res:/wps/defaultTheme80/themes/html/dynamicSpots/commonActions.jsp	Common actions located on the banner, i.e. Actions, Login, Logout
80theme_crumbTrail	res:/wps/defaultTheme80/themes/html/defaultTheme80/crumbTrail.jsp?level=2&rootClass=wpthemeCrumbTrail	Navigation breadcrumb trail to display the page selection path
80theme_search	res:/wps/themeModules/themes/html/dynamicSpots/modules/search/search.jsp	Search input displayed on the sub-banner
80theme_layout	lm:template	Layout of the page
80theme_80theme_footer	res:/wps/defaultTheme80/themes/html/dynamicSpots/footer.jsp	Footer of the page
n/a	co:config	Invokes the combiner datasource which injects the config markup identified in the module profile
80theme_sideNav	res:/wps/defaultTheme80/themes/html/dynamicSpots/sideNavigation.jsp&startLevel=2	Nested side navigation started at the third level
80theme_preview	res:/wps/themeModules/modules/pagebuilder/jsp/preview.jsp,wp_preview	End Preview button located at the top of the page when previewing as a different user
80theme_projectMenu	res:/wps/themeModules/modules/pagebuilder/jsp/projectMenu.jsp,wp_project_menu	The project dropdown menu located in the theme header
80theme_toolbar	res:/wps/themeModules/modules/pagebuilder/jsp/toolbar.jsp,wp_toolbar	The tabbed toolbar located at the top of the page while in edit mode
80theme_status	res:/wps/defaultTheme80/themes/html/dynamicSpots/status.jsp,wp_status_bar	Area located above the page layout which displays status, warning and error messages to the user

Content spot value	Description
lm:control	Renders the layout control body.
lm:title	Renders the title of the portlet.
lm:description	Renders the description of the portlet.
portlet.link:portlet	Outputs the markup <span id="portlet_id"></span> to allow page to position itself at a particular portlet markup via a fragment identifier.
80theme_asaPortlet res:/wps/themeModules/modules/asa/jsp/asaPortlet.jsp, wp_analytics	Site analytics extension for portlets