Skip to content

WebHelp Responsive customization plugin to change footer section

Jump to bottom
Radu Pisoi edited this page Sep 20, 2017 · 14 revisions

Sample WebHelp Responsive Customization plugin that shows how you can use the WebHelp Responsive XSLT-Import extension points to customize the generated HTML pages.

In this sample, the footer of the WebHelp Responsive output is modified by adding copyright information extracted from the DITA bookmap or by adding the output generation time.

Custom footer

Use Case 1: WebHelp XSLT-Import extension point to add copyright information extracted from DITA bookmap

Suppose you want to customize the WebHelp Responsive main page by adding information about the legal rights associated with the book in the footer (for example, copyright dates and owner). This information is specified in the bookmap:

<bookrights>
  <copyrfirst>
    <year>2002</year>
  </copyrfirst>
  <copyrlast>
    <year>2017</year>
  </copyrlast>
  <bookowner>
    <organization>SyncRO Soft SRL</organization>
  </bookowner>
</bookrights>

Adding copyright information

The XSLT stylesheet that generates the main page is located in: com.oxygenxml.webhelp.responsive\xsl\mainFiles\createMainPage.xsl. This XSLT stylesheet declares the copy_template mode that processes the main page template to expand its components. The main page template declares a component for the footer section that looks like this:

<div class=" footer-container text-center ">
  <whc:include_html href="${webhelp.fragment.footer}"/>
</div>

For our use case, we'll use the com.oxygenxml.webhelp.xsl.createMainPage extension point that allows us to specify an extension XSLT stylesheet. The extension XSLT stylesheet will add a template for overriding the processing of the placeholder associated with the footer section.

<xsl:template match="*:div[contains(@class, 'footer-container')]" mode="copy_template">
  <!-- Apply the default processing -->
  <xsl:next-match/>

  <!-- Add a div containing the copyright information -->
  <div class="copyright_info">
      <xsl:choose>
          <!-- Adds the start-end years if they are defined -->
          <xsl:when test="exists($toc/*:topicmeta/*:bookrights/*:copyrfirst) and
                              exists($toc/*:topicmeta/*:bookrights/*:copyrlast)">
              <span class="copyright_years">
                 &#xa9;<xsl:value-of select="$toc/*:topicmeta/*:bookrights/*:copyrfirst"/>
                       -<xsl:value-of select="$toc/*:topicmeta/*:bookrights/*:copyrlast"/>
              </span>
          </xsl:when>

          <!-- Adds only the first year if last is not defined. -->
          <xsl:when test="exists($toc/*:topicmeta/*:bookrights/*:copyrfirst)">
              <span class="copyright_years">
                 &#xa9;<xsl:value-of select="$toc/*:topicmeta/*:bookrights/*:copyrfirst"/>
              </span>
          </xsl:when>
      </xsl:choose>

      <xsl:if test="exists($toc/*:topicmeta/*:bookrights/*:bookowner/*:organization)">
          <span class="organization">
              <xsl:text> </xsl:text><xsl:value-of
                   select="$toc/*:topicmeta/*:bookrights/*:bookowner/*:organization"/>
              <xsl:text>. All rights reserved.</xsl:text>
          </span>
      </xsl:if>
  </div>
</xsl:template>

To modify the footer for all pages generated by the WebHelp Responsive plugin (search, indexterms, topic, and main page), we'll use the above customization for the following extension points: com.oxygenxml.webhelp.xsl.dita2webhelp, com.oxygenxml.webhelp.xsl.createMainPage, com.oxygenxml.webhelp.xsl.createSearchPage, and com.oxygenxml.webhelp.xsl.createIndexTermsPage.

Use-Case 2: WebHelp XSLT-Parameter extension point to control if generation time is displayed in the output

Another possible customization for the main page is to add the generation time in its footer. In this case, we'll use an XSLT-Parameter extension point to control whether or not this customization is active. Adding generation date

To add this functionality we change the extension plugin by:

  • In the XSLT customization stylesheet, declare the webhelp.footer.add.generation.time parameter and modify the template by adding the following XSLT code at the end (see customFooter.xsl):
<xsl:param name="webhelp.footer.add.generation.time" select="'no'"/>
...
<xsl:if test="$webhelp.footer.add.generation.time = 'yes'">
  <div class="generation_time">
      Generation date:
      <xsl:value-of select="format-dateTime(current-dateTime(), '[h1]:[m01] [P] on [M01]/[D01]/[Y0001].')"/>
  </div>
</xsl:if>

  • Edit the plugin.xml file to specify the com.oxygenxml.webhelp.xsl.dita2webhelp.param, com.oxygenxml.webhelp.xsl.createMainPage.param, com.oxygenxml.webhelp.xsl.createSearchPage.param, and com.oxygenxml.webhelp.xsl.createIndextermsPage.param extension points. These extension points will contribute the 'webhelp.footer.add.generation.time' parameter to the XSLT stylesheets that generate the main page, search page, index terms page, and topics pages.

  • Create a custom parameter file (for example, params.xml). It should look like this:

<dummy>
    <param name="webhelp.footer.add.generation.time"
        expression="${webhelp.footer.add.generation.time}"
        if="webhelp.footer.add.generation.time"/>
</dummy>
Clone this wiki locally