Complex Design Parts
- Matthew Wagner
In This Topic
Search
XperienCentral provides a standard content element for adding a search field to a page. The search option is usually only used in one location on the site, often a fixed location somewhere outside of the main content frame. Searching using this option guides the user to the page where the search results are shown. It is also possible to place the Search content element in various locations on the site, the same way as other content elements.
Standard Search Option
In the standard search option, the following settings can be defined and therefore need to be designed:
- The size of the text input field
- The design of the search button or text (default status, mouse over, and mouse click)
- If applicable, a selection mechanism that limits searching in one or more segments, that is, one selection with a check box, drop-down list, or more selections
- Its position with regard to the search field
For more information about form design, see Forms.
The following shows the semantic rendition of a search box in XHTML:
<div class="block-xxxxxx">
<div class="search-yyyyyy">
<div class="top"></div>
<div class="wrapper">
<form id="" action="/searchresults.htm" method="get" class="sitewidesearch">
<fieldset class="form">
<legend>
<span>What are you searching for?</span>
</legend>
<div class="fieldgrp">
<div class="formtextbox">
<div class="field">
<label>search</label>
<input id="query" class="sitewidesearchfield" type="text" value="" name="query" />
</div>
</div>
<div class="formbutton">
<div class="top"></div>
<div class="field">
<input type="submit" value="Go" />
</div>
<div class="bottom"></div>
</div>
</div>
</fieldset>
</form>
<div class="clearer"></div>
</div>
<div class="bottom">
<a class="" title="Advanced search" href="#"></a>
</div>
</div>
</div>
<div class="clearall"></div>
<!-- auto completion -->
<div class="ac_results">
<ul>
<li class="ac_even ac_over"><strong>Apples</strong>(4)</li>
<li class="ac_odd"><strong>Bananas</strong>(2)</li>
<li class="ac_even"><strong>Melons</strong>(1)</li>
</ul>
</div>
The result:
Standard Search Results
In order to display the search results, the design should specify the following settings:
- The location of the search results
- The structure of the results. The options are:
- The number of results found.
- The number of results to be shown on one results page.
- A selection mechanism to move to the next or previous results page. If desired, images can be used.
- The title of the results that were returned.
- The path if the result is on a page in the tree structure or is a page in the tree structure. The result can be navigated to by adding a link.
- x or y: Sequence number of the result found with regard to the total results found.
- Showing an introduction for the result if one is available.
- Facets — See Search Facets for more information.
Also note that that here the approach is used where the XperienCentral will render the XHTML. It is also possible to let XperienCentral produce JSON for the different parts of the search result and let the visual representation up to the design implementation and thus JavaScript in some form.
Indexing Multiple File Formats
XperienCentral can index multiple file formats, for example PDF, Word, Excel, and so forth. The file type can be included in the results. Images can also be used.
<div class="block-xxxxxx">
<div class="searchresult-default">
<!-- insert FACETS here = See... -->
<div class="top">
<!-- -->
</div>
<div class="h2-wrapper">
<h2><span>Searched for 'title'</span></h2>
</div>
<div class="wrapper">
<div class="search-result-count">
999 results found<br /> showing results 21 TO 30
</div>
<div class="search-wrapper">
<div id="searchresultbox">
<ol>
<li>
<div class="leadimage">
<img src="someimage.jpg" />
</div>
<h3>
<a href="#" title="Search result title">Search result title</a>
</h3>
<div class="meta">
<span class="publicationDateLabel">Published</span>
<span class="publicationDate">1 January 2014</span>
<span class="splitter">${splitter}</span>
<span class="category">news</span>
<span class="url">someurl</span>
</div>
<div class="summary">
The piece of text that contained <strong>title</strong>.
</div>
<span class="count">1</span>
</li>
</ol>
</div>
<div class="clearer">
<!-- -->
</div>
</div>
<div class="bottom">
<!-- -->
</div>
</div>
</div>
Search Facets
Typically, search facets are used to further narrow the initial search results. The following shows the semantic rendition of search facets in XHTML:
<div id="divsearchbycategory" class="block-xxxxxx">
<div id="facetinfo" class="searchresult-facets-typeX">
<div class="facet-wrapper">
<!-- active facet (selected): Link text is strong -->
<div class="facet-title">
<strong>First facet</strong>
</div>
<div class="facet-items">
<ul>
<li>
<a title="value 1" class="facet" href="#"><strong> value 1</strong></a>
<span class="facetcount"> 999</span>
</li>
<li>
<a title="value 2" class="facet" href="#"> value 2</a>
<span class="facetcount"> 999</span>
</li>
</ul>
</div>
<!-- active facet (selected): Link text is NOT strong -->
<div class="facet-title">Second facet</div>
<div class="facet-items">
<ul>
<li>
<a title="value 1" class="facet" href="#"><strong>value 1</strong></a>
<span class="facetcount"> 999</span>
</li>
<li>
<a title="value 2" class="facet" href="#">value 2</a>
<span class="facetcount"> 999</span>
</li>
<!-- ETC: more items can be placed here... -->
</ul>
</div>
</div>
</div>
</div>
Expanding the Search Functionality
For many projects, searches are subject to expansion, for example, searches in a database or when you need more options in an extensive search. All expansions to the standard functionality as well as design options should be discussed with your XperienCentral consultant.
News (Archives and Overviews)
Within XperienCentral two types of content overviews are available: Page Collections and Content Overviews. From an HTML perspective, the difference between these overviews is the amount of metadata that is available. A page is represented by its title whereas a content item contains more informative details. Consult your XperienCentral consultant when in doubt about which type of overview to use.
Page Collection
A page collection allows an editor to easily generate a list of links to other pages on the site. In its simplest form, this list consists of a number of links in rows, however, the editor has the option of adding more information, for example an introduction or the publication date and time.
<div class="block-xxxxxx">
<div class="pc-yyyyyy">
<div class="top"><!-- --></div>
<div class="h2-wrapper">
<h2><span>List of pages</span></h2>
</div>
<div class="wrapper">
<div class="page odd first">
<div class="title"><a href="#">First page</a></div>
</div>
<div class="page">
<div class="title"><a href="#">Second page</a></div>
</div>
<div class="page odd last">
<div class="title"><a href="#">Last page</a></div>
</div>
<div class="clearer"><!-- --></div>
</div>
<div class="bottom"><!-- --></div>
</div>
</div>
<div class="clearall"></div>
Content Overview
XperienCentral has a central Content Repository where content types are stored. The Dynamic Content Overview element collects content from the Content Repository based on specific, shared characteristics such as publication date, tags, content type, and so forth. The result of such overviews is comparable to that of a Page Collection. The overviews shown by a Dynamic Content Overview are more extensive because more metadata can be added to the centrally-stored content. Examples are lead text, lead images, tags and/or article type.
When using content from the Content Repository, the XperienCentral consultant involved will determine which overviews should be used together with the client and the designer. The following shows the semantic rendition of a content overview in XHTML:
<div class="block-xxxxxx">
<div class="collection-list-yyyyyy">
<div class="top">
<!-- -->
</div>
<div class="h2-wrapper">
<h2>
<span>Collection list title</span>
</h2>
</div>
<div class="wrapper">
<ul>
<li class="item odd first">
<span class="item-title">
<a href="#">Content item title that links to complete item</a>
</span>
<span class="item-description">Some more explanation about this content item next to its' title</span>
<figure class="item-lead-image">
<img src="image.jpg" alt="alt text">
</figure>
<ul class="item-tags">
<li>Tag one</li>
<li>Tag two</li>
</ul>
<span class="item-date">01 January 2014</span>
</li>
<!-- ETC. More contents items can be placed here... -->
</ul>
<div class="morelink">
<span>
<a href="#" title="More link">More items found here...</a></span>
</div>
<div class="clearer"><!-- --></div>
</div>
<div class="bottom"><!-- --></div>
</div>
</div>
<div class="clearall"></div>
Sitemap
A sitemap offers a schematic overview of the channel structure. A sitemap is generated automatically based on the existing segment structure of the website. A layout can be applied to the different levels in the structure. The following shows the semantic rendition of a sitemap in XHTML:
<div class="block-xxxxxx">
<div class="sitemap-yyyyyy">
<div class="top"><!-- --></div>
<div class="h2-wrapper">
<h2>
<span>Sitemap</span>
</h2>
</div>
<div class="wrapper">
<ul>
<li>
<a title="Page ?" class="navigation" href="#">Page ?</a>
<ul>
<li>
<a title="Page ?" class="navigation" href="#">Page ?</a>
</li>
</ul>
<ul>
<li>
<a title="Page ?" class="navigation" href="#">Page ?</a>
<ul>
<li>
<a title="Page ?" class="navigation" href="#">Page ?</a>
</li>
<li>
<a title="Page ?" class="navigation" href="#">Page ?</a>
<ul>
<li>
<a title="Page ?" class="navigation" href="#">Page ?</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="clearer"><!-- --></div>
</div>
<div class="bottom"><!-- --></div>
</div>
</div>
<div class="clearall"></div>
Forms
Forms, just like other content elements, can be freely added to a page. The quantity and the type of input fields are flexible, however they need to be justified. The following items must have a design:
- The Send and Reset buttons (default, mouse over, and mouse click)
- The layout of an e-mail form:
- Text input fields
- Selection lists for input (radio buttons, check box, or drop-down list)
- Images in the e-mail form
- Text in the e-mail form
- Option to attach files (including a Select button)
Forms can be part of a flow (requiring the addition of ‘Next’ and ‘Previous’ buttons), or can contain personalized information.
A form is constructed in XHTML as follows:
Form: The beginning of a form
Fieldset: A ‘set’ of input fields such as radio buttons, text input, or check boxes
Label: The description of the input
Input: The input field
The following shows the semantic rendition of the main format of a form in XperienCentral in XHTML. The separate parts defined in the HTML comments are shown next.
<form action="/web/wcbservlet/nl.gx.forms.wmpformengine.servlet" id="wmform_357841" class="wmpform" method="post" enctype="multipart/form-data">
<fieldset class="displayNone">
<input type="hidden" name="precondition_show" id="precondition_357841_show" value="" />
<input type="hidden" name="precondition_hide" id="precondition_357841_hide" value="" />
<input type="hidden" name="formid" value="someFormId" />
<input type="hidden" name="clientsideRouting" value="" />
<input type="hidden" name="wmformid" value="someFormId" />
<input type="hidden" name="wmstepid" value="introduction" />
<input type="hidden" name="wmlocale" value="nl_NL" />
<input type="hidden" name="langid" value="43" />
<input type="hidden" name="csfw" class="csfw" value="/web/show?id=someinternalid" />
<input type="hidden" name="csfw_versionId" class="csfw_versionId" value="someVersionId" />
<input type="hidden" name="csfw_stepId" class="csfw_stepId" value="" />
</fieldset>
<fieldset class="form">
<div id="error_wmform_357841_" class="displayNone"></div>
<div id="info_wmform_357841_" class="displayNone"></div>
<div class="fieldgrp-default">
<!-- content default -->
</div>
<div class="formsectionelement wm_form_element" id="wmfragment_6_123">
<!-- content fragment-->
</div>
<div class="formsectionelement wm_form_element" id="wmfragment_7_nextbutton">
<!-- content next button -->
</div>
</fieldset>
<ins>
<input type="hidden" name="swfrmsig" value="5bce2ea467526b0914aac763b9" />
</ins>
</form>
The content default which appears once within a form, typically at the top:
<div class="fieldgrp-default">
<div class="formstaticheader-default">
<div class="wm-field contentelement wm_form_element" id="req_for_information">
<div class="field">
<div class="wrapper">
<div class="text wm-field-input" id="wmformfragment_request_for_information">
<p>Some description about this form</p>
<p>* = Mandatory<br></p>
</div>
</div>
</div>
</div>
</div>
</div>
The content fragment which typically contains multiple field groups:
<div class="formsectionelement wm_form_element" id="wmfragment_x_y">
<div id="error_wmform_999_wmfragment_x_y" class="displayNone">
</div>
<div id="info_wmform_999_wmfragment_x_y" class="displayNone">
</div>
<div>
<div class="fieldgrp">
<-- first fragment content -->
</div>
<div class="fieldgrp">
<-- next fragment content -->
</div>
</div>
</div>
The actual fragment content differs depending on the HTML input type that is represented:
Text input:
<div class="formtextbox">
<div class="wm-field contentelement wm_form_element" id="wmfragment_x_sometextinput">
<div id="error_wmform_99999_wmfragment_x_sometextinput" class="displayNone"></div>
<div id="error_wmform_99999_wmfragment_x_sometextinput" class="displayNone"></div>
<div class="wm-field-label">
<label id="text_wmfragment_x_sometextinput" for="wmformfragment_wmfragment_x_sometextinput" >Some text input
<span class="required">*</span>
</label>
</div>
<div class="wm-field-input">
<div class="field">
<input type="text" name="wmfragment_x.sometextinput" id="wmformfragment_wmfragment_x_sometextinput" value="" size="50" />
</div>
</div>
<div class="wm-field-helptext"></div>
</div>
</div>
Radio button:
<div class="fieldgrp">
<div class="formradio">
<div class="wm-field contentelement wm_form_element" id="wmfragment_x_y_type">
<div id="error_wmform_357841_wmfragment_x_y_type" class="displayNone"></div>
<div id="info_wmform_357841_wmfragment_x_y_type" class="displayNone"></div>
<div class="wm-field-label">
<label id="text_wmfragment_x_y_type" for="wmformfragment_wmfragment_x_y_type">Type A of B*</label>
</div>
<div class="wm-field-input">
<div class="field">
<input type="radio" name="wmfragment_x_y.type" checked="checked" value="A" id="wmformfragment_wmfragment_x_y.type_A" />
<label id="wmradiolabel_wmfragment_x_y.type_A" for="wmformfragment_wmfragment_x_y.type_A" class="wmradio_checkbox_item_label">Type A</label>
</div>
<div class="field">
<input type="radio" name="wmfragment_x_y.type" value="B" id="wmformfragment_wmfragment_x_y.type_B" />
<label id="wmradiolabel_wmfragment_x_y.type_B" for="wmformfragment_wmfragment_x_y.type_B" class="wmradio_checkbox_item_label">Type B</label>
</div>
</div>
<div class="wm-field-helptext"></div>
</div>
</div>
</div>
The [Next] button which appears once within a form, typically at the bottom:
<div class="formsectionelement wm_form_element" id="wmfragment_x_nextbutton">
<div id="error_wmform_357841_wmfragment_x_nextbutton" class="displayNone"></div>
<div id="info_wmform_357841_wmfragment_x_nextbutton" class="displayNone"></div>
<div>
<div class="gridelement" id="wmfragment_x_nextbutton">
<div class="fieldgrp">
<table class="gridtable fullwidthandheight">
<tr>
<td class="gridcontentareastyle">
<table class="tableareastyle">
<tr>
<td class="jq_gridcontentarea gridcontentareadropplane" id="column1"></td>
</tr>
</table>
</td>
<td class="gridcontentareastyle">
<table class="tableareastyle">
<tr>
<td class="jq_gridcontentarea noleftborder gridcontentareadropplane" id="column2">
<div class="fieldgrp bv_nextstep">
<div class="formbutton">
<div class="wm-field contentelement wm_form_element bv_nextstep" id="wmfragment_x_nextbutton_nextstep_subform">
<div class="top">
<!-- -->
</div>
<div class="field">
<input type="submit" class="bv_nextstep" name="wmfragment_x_nextbutton.nextstep_subform" value="Volgende stap" />
</div>
<div class="bottom">
<!-- -->
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
User Access
The user access functionality restricts access to pages using a log in form. For the recommended design of such a form, see Forms. This is typically shown as a form with two text inputs fields and a Submit button, therefore no specific HTML is presented here.
Newsletters
XperienCentral sends newsletters to the recipients as plain text or in HTML format. For the HTML variant, a design is required. Even though the newsletter functionality is different from the regular page functionality, the design options are the same as those for a regular page.
Because of the wide variety e-mail clients in use, you should pay particular attention to the CSS you use in HTML-formatted newsletters. Some e-mail clients cannot render certain formatting. Freshview, a maker of e-mail newsletter software, has compiled a comprehensive list of the major e-mail clients in use and the CSS each supports. GX Software strongly recommends that you consult this list before designing and creating HTML-formatted newsletters. The CSS support in a large number of the e-mail clients in use can be found at: http://www.campaignmonitor.com/css/