Back to Search Back to Search Results

Example Portal Parameter Configurations

This topic contains several samples of configuration markup.

Portal Display Name and Description

<string name="title" label="Portal Display Name"/>
<text name="description" label="Portal Description" type="markdown">
  <default>
  <![CDATA[Welcome to *Titania Delivery*!]]>
  </default>
</text>

This sample defines two portal theme parameters, title and description, which can be used to provide a site-wide label and homepage description for the portal. The matchinf form would look something like this:

The values could be used in the portal theme pages via Freemarker like the following:

<h1>${portal.parameters.title?html}</h1>
<div>${portal.parameters.description}</div>
Note: While you almost always should escape strings displayed on portal pages using the ?html directive, you should not do this for <text> parameters, as the appropriate HTML markup will already be built as the value of the parameter.

Configurable Styling Details

<themeFile name="stylesheet" label="Stylesheet" type="static"
  dir="style/main" default="default.less"/>

<text name="css" label="Custom CSS" type="html"/>

<themeFile name="siteLogo" label="Site Logo" type="static"
  dir="images/logos" default="harp_128.png"/>

<themeFile name="header_bg" label="Header Background Image" type="static"
    dir="images/backgrounds" default="orange-arch.jpg"/>

This sample provides four parameters.

stylesheet
This lists all of the files in the static/style/main folder of the theme for the user to select from.
css
This provides a textbox allowing the administrator to add some custom CSS code that can be injected on every page.
siteLogo
This lists all of the files in the static/images/backgrounds folder of the theme for the user to choose from. This could be used as a logo on the homepage and/or in the header of every page.
header_bg
This lists all of the files in the static/images/backgrounds folder. This could be used as the background for the banner at the top of the homepage, and/or the background of the header.

You can use these parameters in the theme as follows:

<!DOCTYPE html>
<html>
<head>
	<title>Portal Title (probably also a parameter)</title>
	<link rel="stylesheet" href="'<@td.themeFileUrl value=portal.parameters.stylesheet/>">
	<style>
	${portal.parameters.css}
	</style>
</head>
<body>
	<div style="background: url('<@td.themeFileUrl value=portal.parameters.header_bg/>');">
	  <img src="<@td.themeFileUrl value=portal.parameters.siteLogo/>">
	  <h1>Site Title</h1>
	</div>
</body>
</html>

Multi-Select

The following markup enables users to specify the available sections on a homepage, and to sort them into a particular order.

<select name="homepage-modes" label="Homepage Sections" multi="true">
  <option default="true" value="document-lists">
    Recently Modified Document Lists
  </option>
  <option value="onemap-circles">
    Single DITA Map with Circular Graphics
  </option>
  <option value="multimap-divs">
    Multiple DITA Map as Page Divisions
  </option>
</select>

This is rendered as follows, allowing the end user to use drag-and-drop to add/remove sections, as well as sort them.

The parameter value is the array of selected values. From a portal theme page, you can use this parameter as follows:

<#list portal.parameters['homepage-modes'] as mode>
  <#if mode = 'document-lists'>
    <#include 'document-lists.ftl'/>
  <#elseif mode = 'onemap-circles'>
    <#include 'onemap-circles.ftl'/>
  <#elseif mode = 'multimap-divs'>
    <#include 'multimap-divs.ftl'/>
  </#if>
</#list>