Working with dynamic content spots
You can add dynamic content to your custom theme by using either client-side or server-side logic.
- Client-side logic
- You 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
- You can reference a JSP in the theme.html file by using a dynamic content spot. You 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 that contains 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.
Examples:
- Including a named dynamic content spot mapping:
<a rel="dynamic-content" href="dyn-cs:id:/newDynamicContent"></a> - Including a theme JSP directly:
<a rel="dynamic-content" href="res:/CustomThemeContext/themes/html/MyTheme/dynamicContent.jsp"></a> - Including an iWidget definition:
<div class="iw-iWidget id="myWidget"> <a class="iw-Definition" href="/path-to-widget-definition.xml"></a> <span class="iw-ItemSet" style="display:none" title="attributes"> <a class="iw-Item" href="#key">value</a> ... </span> </div>
Configuring and modifying 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 WebSphere Integrated Solutions Console.
You can modify this configuration by using the WebSphere Integrated Solutions Console. When you work with
this configuration, observe the following hints and tips:
| Name of the content spot | Value | Description |
|---|---|---|
| 80theme_asa | res:/wps/themeModules/asa/jsp/asa.jsp, wp_analytics | Provides the 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_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 with the page layout that 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 | Provides the site analytics extension for portlets |
- 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 your own JSP in your own WAR file, or reference this JSP directly in your theme and bypass the configuration.
- The Resource Environment Provider (REP) configuration is global, and is not per theme. Therefore, if you change the configuration, the change applies to all themes in your 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.
- You can add named content spots.