Custom Quick Search Text

[DurtyMat]

I wanted to create custom text in the Quick Search field that would provide "detailed" instructions on how the field was actually supposed to work. I couldn't find anything on the forums after successfully completing the task, so I figured I would add some fun tips to the forum.

Locate the install directory of Flare, the default is something like: C:\Program Files\MadCap Software\MadCap Flare V5 (insert your version if you arent using v5)

Open the Webhelp \ Content \ Skin Support folder (something like this: C:\Program Files\MadCap Software\MadCap Flare V5\Flare.app\Resources\WebHelp\Content\SkinSupport)

Open the MadCapAll.js and MadCapToolbar.js files with a text editor (Notepad++ works wonders)

Search the js file for: "quick"

The MadCapAll.js file should display something like this:

Code: Select all

case "QuickSearch":
var tdQS=document.createElement("td");
var form=document.createElement("form");
var input=document.createElement("input");
tdQS.style.width="150px";
form.onsubmit=function(){QuickSearch();return false;};
input.id="quickSearchField";
input.type="text";
input.tabIndex=gTabIndex++;
input.title="Quick search text box";
input.value="Search Current Topic for...";
input.setAttribute("MadCap:title","Search Current Topic for...");
input.onfocus=function(){
var isEmpty=FMCGetAttributeBool(this,"MadCap:isEmpty",true);
if(isEmpty){
this.style.fontStyle="normal";
this.style.color="#000000";
this.value="";
this.setAttribute("MadCap:isEmpty","false");}};
input.onblur=function(){
if(this.value==""){
this.style.fontStyle="italic";
this.style.color="#aaaaaa";
var title=FMCGetAttribute(this,"MadCap:title");
this.value=title;
this.setAttribute("MadCap:isEmpty","true");}};
form.appendChild(input);
tdQS.appendChild(form);
tr.insertBefore(tdQS,td);
MakeButton(td,"Quick search","Images/QuickSearch.gif","Images/QuickSearch_over.gif","Images/QuickSearch_selected.gif",23,22,String.fromCharCode(160));
td.getElementsByTagName("div")[0].onclick=QuickSearch;
break;

the MadCapToolbar.js files should display something like this:

Code: Select all

case "QuickSearch":
                var tdQS    = document.createElement( "td" );
                var form    = document.createElement( "form" );
                var input   = document.createElement( "input" );
                
                tdQS.style.width = "150px";
                form.onsubmit = function() { QuickSearch(); return false; };
                input.id = "quickSearchField";
                input.type = "text";
                input.tabIndex = gTabIndex++;
                input.title = "Quick search text box";
                input.value = "Search Current Topic for...";
                input.setAttribute( "MadCap:title", "Search Current Topic for..." );

                input.onfocus = function()
                {
					var isEmpty = FMCGetAttributeBool( this, "MadCap:isEmpty", true );
					
					if ( isEmpty )
					{
						this.style.fontStyle = "normal";
						this.style.color = "#000000";
						this.value = "";
						
						this.setAttribute( "MadCap:isEmpty", "false" );
					}
				};
				
				input.onblur = function()
                {
					if ( this.value == "" )
					{
						this.style.fontStyle = "italic";
						this.style.color = "#aaaaaa";
						
						var title = FMCGetAttribute( this, "MadCap:title" );
						
						this.value = title;
						
						this.setAttribute( "MadCap:isEmpty", "true" );
					}
				};
                
                form.appendChild( input );
                tdQS.appendChild( form );
                tr.insertBefore( tdQS, td );
                
                MakeButton( td, "Quick search", "Images/QuickSearch.gif", "Images/QuickSearch_over.gif", "Images/QuickSearch_selected.gif", 23, 22, String.fromCharCode( 160 ) );
                
                td.getElementsByTagName( "div" )[0].onclick = QuickSearch;
                
                break;

Edit the following:

Code: Select all

input.value = "Search Current Topic for...";
                input.setAttribute( "MadCap:title", "Search Current Topic for..." );

[DurtyMat]

Editing a giant post is difficult so I am finishing here

So the input.value and input.setAttribute control what is displayed in the quick search field.

input.value is the base setting.
input.setAttribute is the setting after a user has clicked in the search field, left it blank, and clicked somewhere else.

The default setting is:
input.value = "Quick search";
input.setAttribute( "MadCap:title", "Quick search");

just change the bold words to whatever you want and presto, every help system you create will use the new text in the quick search field.

hope this is helpful. more things to come as i completely rework my help system.

[NorthEast]

Reminded me of an old post. http://forums.madcapsoftware.com/viewto ... f=9&t=6971
I see they must've added the captions in v4/5, you had to add the code for that yourself in v3.

[DurtyMat]

yea i didn't see that when i did a quick search. from what i remember with the captions they just added a tooltip i dont remember anything in the GUI actually changing text in the quick search box but i could be way wrong

[NorthEast]

yea i didn't see that when i did a quick search. from what i remember with the captions they just added a tooltip i dont remember anything in the GUI actually changing text in the quick search box but i could be way wrong :D

Yep, you could have a tooltip in v3, but no text in the box itself - so you had to add the input.value line yourself.