How to add a version switch dropdown list to the header?

[galanohan]

Hi,

I'm trying to add a version switch dropdown list to the top right corner of our website. Somewhere like this:

verswitch.png (208.15 KiB) Viewed 667 times

The front-end engineer has developed some js files and saved them in the root directory of our server, and told me that I need to add the following scripts to the header of each webhelp page:

<script src='/vendors/react/umd/react.development.js' defer></script>
<script src='/vendors/react-dom/umd/react-dom.development.js' defer></script>
<script src='/vendors/dayjs/dayjs.min.js' defer></script>
<script src='/vendors/antd/dist/antd.js' defer></script>
<script src='/vendors/@ant-design/icons/dist/index.umd.min.js' defer></script>
<script src='/zh/index.js' type='module'></script>

I added an xml file containing the scripts he gave me to the publishing template folder:
Note that the following file paths specified for attribute "src" locates in the server end, not local drive.

<?xml version="1.0" encoding="UTF-8"?>

<div class="after-search">
<script src='/vendors/react/umd/react.development.js' defer></script>
<script src='/vendors/react-dom/umd/react-dom.development.js' defer></script>
<script src='/vendors/dayjs/dayjs.min.js' defer></script>
<script src='/vendors/antd/dist/antd.js' defer></script>
<script src='/vendors/@ant-design/icons/dist/index.umd.min.js' defer></script>
<script src='/zh/index.js' type='module'></script>
</div>

Do I need to create an xslt file defining a component that contain this dropdown list after the search bar and add the following to the opt file?

....
<parameter name="custom.webhelp.after.search.fragment" value="after-search-fragment.xml" type="filePath"/>
</parameters>
<xslt>
<extension file="xsl/custom-content-after-search.xsl" id="com.oxygenxml.webhelp.xsl.createMainPage"/>
<extension file="xsl/custom-content-after-search.xsl" id="com.oxygenxml.webhelp.xsl.createSearchPage"/>
<extension file="xsl/custom-content-after-search.xsl" id="com.oxygenxml.webhelp.xsl.dita2webhelp"/>
</xslt>

Am I walking on the right path?

[alin]

Oxygen WebHelp 25.1 has a special placeholder named webhelp.fragment.after.search.input that allows you to insert a custom HTML fragment after the search input. Thus you do not need additional XSLT extension to include the dropdown in the output content.
Have a look at the following Publishing Template: https://github.com/oxygenxml/oxygen-pub ... ter-search

[galanohan]

Thanks! I'll give it a try.

Besides adding html fragment similar to this to the <html-fragments/> tag,
<html-fragments>
<fragment file="fragments/after-search-fragment.xml" placeholder="webhelp.fragment.after.search.input"/>
</html-fragments>

Do I also need to specify the file path as value for parameter "webhelp.fragment.after.search.input" like this in opt file?

<parameter name="webhelp.fragment.after.search.input" value="fragments/after-search-fragment.xml" type="filePath"/>

[alin]

The two options are equivalent.
You can contribute an HTML fragment file by referencing it either in the dedicated <html-fragments> section or in the <parameters> section.
Under the hood every configuration in the Publishing Template descriptor file is translated as some parameter value

[galanohan]

Thanks Alin!!