Webhelp Template Components and customizing webhelp output

[kgajda]

We are redesigning the look of our webhelp, particularly the home page.
I have looked through the scant Webhelp Template Components at my disposal to reference and manipulate, and I am trying to figure out how I could pull specific topicheads (say 1st, 2nd, and 3rd) from the TOC for their own callout sections (removing them from the TOC on that first page for redundancy's sake)...
How can I do this with a template and CSS?
(This will be used across many products and projects so hardcoding a reference to an ID won't work)

Thanks in advance for any help or advice you can give!!
Kim

[alin]

Hi Kim,

I am afraid that you cannot pull links from the TOC and reference them in another part of the WebHelp Responsive Template.

However, there might be an workaround for you. You could manipulate the links from the TOC and move them throughout your page using custom JavaScript code. You can customize the WebHelp Responsive output by contributing your own JavaScript files. This procedure is described in our User Manual at: https://www.oxygenxml.com/doc/versions/ ... -html.html

Regards,
Alin

[kgajda]

Thanks for the reply, Alin!
I was thinking something like this last night when I couldn't sleep
The only thing I am wondering is if I can manipulate the components there, as in looping through webhelp_main_page_toc and putting the items into an array to reference in the output? Would the webhelp components be processed inside the js file?
Thank you again for your help!!
Kim

[alin]

Hello,

You could manipulate the links from the TOC and move them throughout your page using custom JavaScript code.

The only thing I am wondering is if I can manipulate the components there, as in looping through webhelp_main_page_toc and putting the items into an array to reference in the output? Would the webhelp components be processed inside the js file?

I think that you have misunderstood my suggestion.
The JavaScript code I was referring to would apply on the final HTML output file, and not on the template file.
The template files are not being processed using JavaScript, but with XSLT.
Your custom JS code is run when the HTML content is loaded in the browser. It should rearrange the existing HTML elements or create new ones in order to match your desired content structure.
This approach will not affect the way the HTML output is generated by the WebHelp transformation.

If you want to alter the content at the generation time, you should write a DITA-OT extension plugin. For this solution you would need some DITA-OT and XSLT knowledge. Here are some articles that cover this topic:
https://www.oxygenxml.com/doc/versions/ ... ssing.html
https://www.oxygenxml.com/doc/versions/ ... mport.html
Here is a plugin example: https://www.oxygenxml.com/doc/versions/ ... ample.html

Regards,
Alin