design_area_searchbox|asset|5.4.4.0

This design area allows you to add a search field into the design where the user can search for information in the Site. It is set up to point to a Search Page that has been previously created in your Site. When a user performs a search using this field, this Search Page is used to show the results. For more information on how to create a Search Page, refer to the Search manual.

An example of the code that can be used for the Search Box design area is shown below.

<MySource_AREA id_name="search_box" design_area="searchbox">
  <MySource_SET name="search_page_assetid" value="263" />
  <MySource_SET name="field_name" value="name" />
  <MySource_PRINT var="form_start" />
  <MySource_PRINT var="box" />
  <MySource_PRINT var="submit" />
  <MySource_PRINT var="form_end" />
</MySource_AREA> 

Set Variables

The set variables that are available for the Search Box design area are as follows:

• search_page_assetid: this variable allows you to enter the asset ID of the Search Page you want to use for the Search Box design area.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• field_name: this variable allows you to enter which search field to use from the Search Page. You can only use one search field. Enter the name of the field that appears on the Search Fields screen of the Search Page. The example below sets this value to name, which is field on the Search Page.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263
    <MySource_SET name="field_name" value="name" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• querybox_width: this variable allows you to set the width of the box where the user can enter their search criteria. By default, this is set to 5 characters long. The example below sets this value to 20 characters long.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="querybox_width" value="20" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• submit_button_text: this variable allows you to change the text that appears on the submit button. By default, this is set to Go. If you are using an image instead of a button, this value will be used in the HTML Alt tag of the image. The example below sets the text to Search.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="submit_button_text" value="Search" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• submit_button: this variable allows you select whether to show a button or an image as the submit button. By default, this is set to true, meaning that a button is shown. If this is set to false, an image will be shown instead. Use the submit_image_assetid set variable to tell the system which image to show.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="submit_button" value="false" />
    <MySource_SET name="submit_image_assetid" value="394" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• submit_image_assetid: this variable allows you to select which Image asset to use as the submit button. This image will only be used if the submit_button set variable is set to false. The example below sets this to asset 394.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="submit_button" value="false" />
    <MySource_SET name="submit_image_assetid" value="394" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• default_text: this variable allows you to set the default text that appears in the search box. The example below sets this to Enter Keyword.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="default_text" value="Enter Keyword" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• category_set: this variable allows you to add a category list to the design. Enter the name of the category list that appears on the Search Categories screen of the Search Page. For the list to show in the design, you need to include the category_list print variable. The example below sets this value to category, which is a category list on the selected Search Page.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="category_set" value="category" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="category_list" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• category_show_empty: if you are using a category list in the design area, this variable allows you to select whether to show an empty option in the list. By default, this is set to false. The example below sets this to true, meaning that the empty value will appear.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="category_set" value="category" />
    <MySource_SET name="category_show_empty" value="true" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="category_list" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• category_default: if you are using a category list in the design area, this variable allows you to set a default value for the list. Enter the name of the option that appears on the Search Categories screen of the Search Page. Replace any spaces in the name with an underscore character ( _ ). The example below sets this value to Option 3.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="category_set" value="category" />
    <MySource_SET name="category_default" value="option_3" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="category_list" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• query_box_title: this variable allows you to set a title attribute for the search box. The example below sets the title to Search.
  

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="query_box_title" value="Search" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• query_box_label: this variable allows you to set a label attribute for the search box. The example below sets the label to Search for.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="query_box_label" value="Search for" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

Print Variables

The print variables that are available for the Search Box design area are as follows:

• form_start: this variable starts the search form by printing the HTML <form> tag. This is required for this design area.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
  <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• form_end: this variable ends the search form by print the HTML </form> tag. This is required for this design area.

  <MySource_AREA id_name="search_box" design_area="searchbox">
      <MySource_SET name="search_page_assetid" value="263" />
      <MySource_SET name="field_name" value="name" />
      <MySource_PRINT var="form_start" />
      <MySource_PRINT var="box" />
      <MySource_PRINT var="submit" />
  <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• box: this variable prints the search box where the user can enter their search criteria. This is required for this design area.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• submit: this variable print the submit button which allows the user to submit their search criteria. This is required for this design area.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="submit" />
  <MySource_PRINT var="form_end" />
  </MySource_AREA> 

• category_list: if you are using a category list in your design area, this variable prints the list. This variable needs to be placed in between the form_start and form_end print variables.

  <MySource_AREA id_name="search_box" design_area="searchbox">
    <MySource_SET name="search_page_assetid" value="263" />
    <MySource_SET name="field_name" value="name" />
    <MySource_SET name="category_set" value="category" />
    <MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />
    <MySource_PRINT var="category_list" />
  <MySource_PRINT var="submit" />
    <MySource_PRINT var="form_end" />
  </MySource_AREA> 

Customising the Search Box Design Area

When you set the Search Page and search field for a Search Box design area, it will be the default value for the Design. To use a different Search Page or search field, however, you need to customise the design are through a Design Customisation. For example, say you have three separate Sites in your system, with each Site using the same Design that contains a search box. So that the design searches the correct site (i.e. uses the Search Page for the Site), you need to create a Design Customisation for each Site and customise the Search Box design area to point to the correct Search Page. For more information on how to create a Design Customisation and customise the design area, refer to the Design Customisation chapter in this manual.

Once you have customised the Search Box design area, you can customise its settings on the Details screen. For more information on the Status, Future Status and Thumbnail sections of the screen, refer to the Details Screen chapter in the Asset Screens manual. For more information on the General section, refer to the Design Customisation chapter in this manual.

Search Page Configuration

This section allows you to select which Search Page and search field to use for the Search Box.

The Search Page section of the Details screen

The fields available are as follows:

• Search Page: select the Search Page to use from the Asset Map.
• Search Field Name: once you have selected a Search Page in the field above, the Search Field Name field will appear on the screen. This field will list the search fields that have been added to the Search Page. Select which search field to use for the Search Box.

Category List Configuration

This section allows you to select which category list to use for the Search Box. Please note, for the category list to appear in the design, you need to include the category_list print variable in the parse file.

The Category List Configuration section of the Details screen

The fields available are as follows:

• Search Category Set: once you have selected a Search Page in the section above, the Search Category Set field will appear. This field will list any search categories that have been added to the Search Page. If no search categories have been added, this list will be empty. Select a category list to use for the Search Box and click Commit. If this is left blank, the category list will not appear in the design.
• Display "Unselected" Option?: once you have selected a category list to use, the Display "Unselected" Option field will appear. Select whether to show an empty option in the category list.
• Default Category: once you have selected a category list to use, the Default Category field will appear. Select a default option for the category list. The values that appear in this list will depend on the options that have been added to the category list on the Search Page.

Search Box Configuration

This section allows you to customise the box that appears in the Search Box design area.

The Search Box Configuration section of the Details screen

The fields available are as follows:

• Query Box Width: this field allows you to set the width of the box where the user can enter their search criteria. By default, this is set to 5 characters long.
• Default Text: enter the default text that will appear in the search box in the Design.

Search Button Configuration

This section allows you to customise the submit button that appears in the Search Box design area.

The Search Button Configuration section of the Details screen

The fields available are as follows:

• Submit Button Text: enter the text to show on the submit button. By default, this is set to Go. If you are using an image instead of a button, this value will be used as in the HTML Alt tag of the image.
• Submit Button Type: select whether to use a button or an image as the submit button for the Search Box. By default, this is set to Button. To use an image, select Image.
• Submit Image: select which Image asset to use as the submit button from the Asset Map. This field will only appear on the screen if you have selected to use an image in the Submit Button Type field.

Example

Below is the HTML code that was added to the static HTML file to show where the search box should go in the design.

<div id="right-column">
  <h2>Search</h2>
<!-- Search Section -->
</div>

The required code is added to the parse file for the design area, as shown below.

<div id="right-column">
  <h2>Search</h2>
<MySource_AREA id_name="search_box" design_area="searchbox">
<MySource_SET name="search_page_assetid" value="263" />
<MySource_SET name="field_name" value="name" />
<MySource_PRINT var="form_start" />
    <MySource_PRINT var="box" />&nbsp<MySource_PRINT var="submit" />
  <MySource_PRINT var="form_end" />
</MySource_AREA>
</div> 

The search box now appears on the right hand side of the screen, as shown in the figure below.

The Search Box in the Design of a Site