Custom Search bar location?

[Jared Hess]

Hello RoboHelpers!

We're using the latest version of RH 2017. We're re-designing our intro / default landing page that our users come to in our large HTML5 merged help system:

Here's our Help in its full context view:

https://docs.hexagonmi.com/pcdmis/2020.2/en/helpcenter/index.htm?#t=mergedProjects%2Fhelpcentertopic...

Here's our Help if you open just the intro page in it's own tab:

https://docs.hexagonmi.com/pcdmis/2020.2/en/helpcenter/mergedProjects/helpcentertopics/intro.htm

What we're hoping to accomplish:

If it's possible, we want to somehow add the layout's Search bar directly onto our intro/default page... like in this admittedly rough mockup when it's by itself:

Rough mockup of search bar in intro page

The idea is to make the Search bar more prominent.

We're not against getting into the code and customizing things to do this, but we don't want to to spin our wheels if such a thing is not even possible.

As a test, I found the area that holds the search bar is in the auto-generated index.htm that RoboHelp creates for us. I see a <div></div> block there that corresponds to the Search on the top right of the context view:

Search bar HTML

I tried to copy and paste it into my intro.htm. As I suspected, the field appears (without styling), and it doesn't do anything either. Our main concern is how do we tell it to run RoboHelp's search script once it's in the intro.htm page.

Any thoughts or recommendations from any code gurus out there would be helpful!

Thank you in advance,

Jared

[Amebr]

I haven't done it but have some possibly helpful thoughts.

You'd need to find out which scripts and css are required to style the search box. A quick poke around in Dev Tools turned up layout.min.js, layout.css and layout-rtl.css as probable minimums.

I don't know if you can add them without causing the full skin to display or breaking something like the Show in full context link.

I've written* a couple of scripts with ideas that might have some useful ideas.

One hides the skin from one specific topic that opens in a named window. (Whoops, looks like an update somewhere has broken something. Time to poke around in code.) The link has an onClick event which forces the link to open in a new browser window with a specific name 

window.open(url, "windowname","params"). The next part of the script only runs if it finds that window name if(window.name == "windowname") { do stuff }. When people access the topic through search or toc, the script doesn't run because the window doesn't have the right name, so it displays as normal. 

The second script was getting dataTables working in RH11 even thought jquery isn't included and RH11 doesn't support multiple stylesheets. I added the jquery js files to my master page and used the datatables script to dynamically adds a bunch of stylesheets when the page loads.

So maybe it would be possible to add a script to just that topic which only runs if it doesn't find, say layout.min.js, and adds references for all the required supporting files, and inserts the search box code (or sets it to display: block, if you include it iin the topic in a div set to display:none?) at runtime.

Or if generally the only way customers reach the standalone topic is from a link in the product, then maybe the devs could use an onClick javascript file so that the required code only runs when accessed from that link.

* assemble random bits of code from here and there into a frankenscript that may or may not work as advertised

[Amebr]

Oh and I managed to use some RH "stuff" so I didn't have to worry too much about the paths. here's the snippet:

$(document).ready(function() {
//RH doesn't allow multiple stylesheets easily. Therefore use the script to add the DataTables stylesheets
// adds stylesheet links in the form 
// <link type="text/css" href="{path}/{file}.css" type="stylesheet" />
	$('head').append('<link type="text/css" href="'+ gRootRelPath + '/scripts/datatables/jquery.dataTables.min.css" rel="stylesheet" />');

 gRootRelPath is the secret sauce so you only have to care about the path within your project, not how to get there. I've got a merged setup so this helps immeasurably. 🙂

[Jared Hess]

Thanks Amebr! I noticed that gRootRelPath variable myself but wasn't sure how to use it. Thanks for your jQuery sample. I'll mess around some more and will see if I can figure something out. I might be bugging you some more.

Btw, I enjoyed your description of "franksenscript". *grin*

I'm a bit of a pretender when it comes to coding, but different projects occasionally push me into the murky waters of Javascripting, but I always seem to get myself pulled into the deep end of the pool, and I have to call the lifeguard (currently my 22-year-old son who works full time as a coder).

[Jared Hess]

Amebr, I too have a merged help system. In your example snippet to append the new style sheet into the header, where did you put your .css file? In the master project somewhere? Or within each child project?

[Amebr]

Oops, good question. And I just realised I only have them in the one child project with the topic using datatables.

But, there's a gFinalRootRelPath which I think leads back to the parent, so you could try that to keep the scripts and css in one place.