Toolbar Tutorial - Adding a Search Box


Next we will add a dropdown combo box, and a search button. This will provide basic functionality to search the site from our toolbar.

You can test the new functionality by typing in some text and clicking the Search button.


<XML id="toolbar">
<TOOLBAR caption="Toolbar Tutorial">
<control type="toolbar">
<button id="home"

    caption=" "
    tooltip=" Home Page">


<control type="combo" id="query" action="Command(search)" width=120>

<control type="toolbar">
<button caption="Search" tooltip="Search" image="" action="Command(search)"></button>


    <command id="search" action=""></command>




  • To simplify the code, we have used the command tag. This enables us to call the search command from both the combo box control (when the returned key is pressed), or when the Search button is clicked.
    To execute the command, we use the Command() function.

  • Note the %_QUERY% variable in the search command URL. The variable is used to reference the current value of the query control, in this case the search box.