Page 1 of 1

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

Posted: Tue Sep 12, 2023 1:38 pm
by 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
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?

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

Posted: Wed Sep 13, 2023 7:26 pm
by 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

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

Posted: Thu Sep 14, 2023 5:56 am
by 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"/>

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

Posted: Thu Sep 14, 2023 8:45 am
by 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 :wink:

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

Posted: Thu Sep 14, 2023 9:27 am
by galanohan
Thanks Alin!!