WebHelp Template Components

A WebHelp Responsive template component adds dynamics to the WebHelp template page. It is expanded differently depending on the context where it is placed or the currently transformed DITA Map.

Some WebHelp Responsive template components could be used in all the template pages and some of them could be used in all pages. For instance, the publication title could be used in all pages, but topic navigation breadcrumb could be used only when expanding the WebHelp Responsive topic template.

To output such a component you have to refer a specific element in template pages. All the elements associated with a template components should belong to the http://www.oxygenxml.com/webhelp/components namespace.

Components can be classified depending on where they can be used:

Publication Title [webhelp_publication_title]

This component is bound to the publication title and it can be used in all template pages.

To output this component in the WebHelp Responsive output you have to specify the element webhelp_publication_title in a template page. This component can be specified in all template pages.

Sample

If you specify the next element in a template page:

<whc:webhelp_publication_title xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

you will find in the output an element with class webhelp_publication_title.

Publication Logo [webhelp_logo]

This component can be used to emit a logo image in WebHelp Responsive output. It will be processed only when a logo image is specified through the webhelp.logo.image transformation parameter.

Additionally, you can set the webhelp.logo.image.target.url parameter to generate a link to an URL when you hover the logo image. If this parameter is not set, then a link to the home page will be automatically generated.

The element associated with this component is webhelp_logo and it can be specified in all template pages.

Sample

If you specify the next element in a template page:

<whc:webhelp_logo xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

and the transformation parameters:

$webhelp.logo.image = logo.png
$webhelp.logo.image.target.url = http://www.oxygenxml.com

you will find in the output an element with webhelp_logo class.

Search Input [webhelp_search_input]

This component is used to emit the input widget associated with search function. The element associated with this component is webhelp_search_input and it can be specified in all template pages.

Sample

If you specify the next element in a template page:

<whc:webhelp_search_input xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

you will find in the output an element with webhelp_search_input class.

Search Results [webhelp_search_results]

This component can be used in the WebHelp search template page as a placeholder to signal where the search results will be presented.

The element associated with this component is:

<whc:webhelp_search_results xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

and it will generate in the output an element with the webhelp_search_results class.

Topic Breadcrumb [webhelp_breadcrumb]

This component can be used to display the path in the documentation to the current topic. It can be used only in the WebHelp Responsive Topic Template.

Sample

If you specify the next element in the WebHelp topic template page:

<whc:webhelp_breadcrumb xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

you will find in the output an element with webhelp_breadcrumb class. This element will contain a list with items to the current topic. The first item in the list has a link to the main page with class home. The last item in the list corresponds to the current topic and has set the active class.

Navigational Links [webhelp_navigation_links]

This component can be used to generate in the documentation links to the next and previous topics. It is available only in the WebHelp Responsive Topic Template.

Sample

If you specify the next element in the WebHelp topic template page:

<whc:webhelp_navigation_links xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

you will find in the output an element with webhelp_navigation_links class. This element will contain the links to the next and previous topics.

Topic Content [webhelp_topic_content]

This component can be used in the WebHelp Responsive Topic Template to generate the raw content of the topic (without any side components like breadcrumb or side TOC). For DITA, it represent the content of the HTML files as they are produced by DITA-OT processor.

The element associated with this WebHelp template component is

<whc:webhelp_topic_content xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

It will generate in the output an element with webhelp_topic_content class.

Topic Side TOC [webhelp_side_toc]

This component can be used in the WebHelp Responsive Topic Template to generate a mini TOC for the current topic. The mini TOC will contain links to the current topic's children, its siblings and all of its ancestors.

The element associated with this WebHelp template component is

<whc:webhelp_side_toc xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

It will generate in the output an element with webhelp_side_toc class and containing links to the topics that are close to the current topic.

Topic Feedback [webhelp_feedback]

This component can be used in the WebHelp Responsive Topic Template to indicate the place where the feedback part will be presented.

The element associated with this component is

<whc:webhelp_feedback xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

Main Page Topic Tiles [webhelp_tiles]

This component can be used in the WebHelp main page template to generate the tiles section in the main page. This section will contains a tile for each root topic of the published documentation. Each topic tile has three sections that corresponds to topic title, short description and image.

The element associated with this WebHelp template component is

<whc:webhelp_tiles xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

It will generate in the output an element with webhelp_tiles class.

If you want to control the HTML structure that is generated for a WebHelp tile you can also specify the template for a tile by using the whc:webhelp_tile component. Such a tile template could be:

<whc:webhelp_tile class="col-md-4">                    
  <!-- Place holder for tile's image -->
  <whc:webhelp_tile_image/>                        
                    
  <div class="webhelp_tile_text">
    <!-- Place holder for tile's title -->
     <whc:webhelp_tile_title/>
                       
     <!-- Place holder for tile's shordesc -->
     <whc:webhelp_tile_shortdesc/>
  </div>
</whc:webhelp_tile>

Main Page Table of Contents [webhelp_main_page_toc]

This component can be used in the WebHelp main page template to generate a simplified Table of Content structure. It is simplified because it contains only two levels from the documentation hierarchy.

The element associated with this WebHelp template component is

<whc:webhelp_main_page_toc xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

and will generate in the output an element with the webhelp_main_page_toc class.

Main Page Menu [webhelp_topics_menu]

This component can be used in the WebHelp main page template to generate a menu with all the documentation topics.

The user can control the maximum level of topics that will be included in the menu using the webhelp.top.menu.depth transformation parameter.

The element associated with this WebHelp template component is

<whc:webhelp_topics_menu xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

Print Link [webhelp_print_link]

This component can be used in all WebHelp template pages to generate a button that displays the browser's print dialog.

The element associated with this WebHelp template component is

<whc:webhelp_print_link xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

It will generate in the output an element with webhelp_print_link class.

Include HTML files [webhelp_include_html]

This component can be used in the all the WebHelp template pages to include custom HTML files.

The element associated with this WebHelp template component is

<whc:include_html href="${wh.param}"/>

Where the href can have the next values:

any URL - in this case the file to be included is specified as an URL.
{$oxygen-webhelp-template-dir}/file_to_include.html - to include resources that are part of the template.
${webhelp.param} - to include a resource of which path is specified through a WebHelp transformation scenario parameter. The value of this parameter can be a simple HTML fragment, case when it will be copied to the output.

Index Terms Link [webhelp_indexterms_link]

This component can be used in all the WebHelp template pages to generate a link to the index terms page, indexterms.html. If the published documentation does not contains any index terms, then the link will not be generated.

The element associated with this WebHelp template component is

<whc:webhelp_indexterms_link xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

It will generate in the output an element with the webhelp_indexterms_link class that contains a link to the indexterms.html page.