Documentation Center

Common UI Controls

Common user interface controls can be created with this set of tags, including a drop-down to select a language for the user interface and a context sensitive help link.

The following snippet demonstrates these tags in use:

<div style="text-align:right;font-size:14pt;color:#666666;" class="xref">
     <!-- You must produce your own label for the language selector, and style it within the page. -->
     <lcui:string key="lang.change"/>
</div>
<div class="xref">
     <!-- This creates a drop-down list from which languages can be selected. -->
     <lcui:select_language/>
</div>

<!-- This appears as a context-sensitive icon (a question mark usually), 
     and when clicked, display the help topic with the ID "select_language". -->
<lcui:context_help key="select_language"/>
ResultDescriptionParameters

Context-sensitive Help

<lcui:context_help/> or <xsl:call-template name="lcui:context_help"/>

Creates a context-sensitive help image which can be clicked to load a help resource. This produces a clickable <img/> tag.

  • key -- the unique ID attribute of the topic within the LiveContentDoc publication to display (for example, login).

Language Selector

<lcui:select_language/> or <xsl:call-template name="lcui:select_language"/>

Creates a drop-down list that contains the localized values for all of the available languages. No field label is provided; the HTML template or XSL should provide its own label for the control.

If the user changes the value of the drop-down list, the language selector sends a JavaScript event that causes the user's language to change for the session.