Search Box

Search Box widget allows keyword search and retrieves results from any table or module based on your requirements. 

For details about the Use Case, refer to the graphics below:

Configure the Search Box widget

This section contains the list of steps using which Application Designer can select the Search Box widget in the Service Portal through the Design Portal screen.

To configure the Search Box widget, perform the following steps:

1. Navigate to Design Service Portal > Widgets > Search Box.Figure: Adding Search Box Widgets
    
   
2. Customize the Service Portal by dragging the Search Box widget from the widget list screen.
   
   
3. Click the Settings icon on widget container to view Properties pop-up.Figure: Modify the Search Box properties
    
   

You can view the following tabs on the Settings for this field:

• Properties
• Search Results
• Appearance

Properties

This section details the watermark which appears in Properties tab. See the screenshots below for more details.

Figure: Search Box properties

You can define the Watermark for the Search Box using the text box. For example, here Watermark is defined as Search for Fixed, Accessories, Consumables or Software Assets.
Figure: Watermark
The screenshot of configured Search Box with watermark on the consumer screen appears as shown below:

Figure: Search box with watermark on consumer screen

Search Results

This section defines the Data Source from which the results can be fetched to configure the Search Results screen.
Figure: Search Results
 
Search Results can appear in the form of tabs to display specific results. For this purpose, steps to configure the tabs are given below. To know more about the field available under the Search Results, see the Field Description below. 

Field Description

Field	Description
Search Results
General	Click the pencil icon to edit the tab.Figure: Tab The pop-up screen appears as shown below: Figure: Edit Tab Specify a Tab Name and select the icon. The screenshot of Tab with icon is displayed as shown below. For example, let's see how to configure the properties for the Fixed tab for Fixed Assets. Figure:Tab details See the screenshot for a configured tab named as Fixed under the consumer screen. Click to add more tabs. The pop-up screen appears as shown below: Figure: Additional Tabs
Data Source
Source	Select the type of source for Search Results from the drop-down list. Figure: Data Source type If you select Internal as Source type, then you need to select Application, Module, Table and Search Columns to fetch the Search Results. If you select External as the Source type, then it fetches the results from third-party app.
Internal
Application	Select the Application from which the Search Results should be fetched from the drop-down list. Here Asset Management is selected as Application type. Figure: Application
Module	Select the Module to fetch the Search Results. The Module appears based on the Application selection. Figure: Module
Table	Select the Table from which data needs to be searched. The drop-down list for Table is populated based on Module selection. Figure: Table Refer to screenshot where the table named Fixed is selected from the list. Figure: Fixed as Table type
Scope	Select the Field, Operator and Value by selecting the column from the field for defining the scope of search results. Figure: Scope
Search Columns	Specify the fields to search for relevant data by selecting options from the Search Column drop-down list. Figure: Search Columns Here Asset Code and Serial Number are selected from the Search Column drop-down list for Fixed Assets. Figure: Search Columns The selected columns appear as shown below: Figure: Columns You can also use $ symbol to add the column. These columns will be replaced as values in search results.

Scope
	Select the Field, Operator, and Value based on the filter conditions. Figure: Add Filter Set For more details about adding the filter set, see .Dynamic operators in Service Portal.

Search Display

Search Display
Display Columns	Use the $ symbol to add the column in Display Column field value. Figure: Display Columns
Forms	Select the Form from which data needs to be fetched. The drop-down list for Form is populated based on Module selection. Figure: Forms
Open Mode	Select the type of Open Mode. It can be configured either to open the same browser that the user is currently using (Self Window) or can open in a completely new browser tab (New Tab).
Max Search Results	Select the count of maximum search results that should be displayed for Search Results. Figure: Max Search Results

If you select Data Source as External, then the following fields appear as shown below. Here results are fetched from third party application.

Figure: External data source

For more about External Data Source, see the Field Description below.

Field Description

Data Source
Source	Here External is selected as Source Type. Refer to screenshot for more details. Figure: Source
API	Select the appropriate API from the drop-down list to fetch the search results. Figure: API type If API type is selected as then Get Response and Test Now button appears   near the API drop-down list.
Get Response	Click Get Response button to fetch data from third party application. This is stored in a temporary table.
Test Now	Preview the data fetched by clicking the Test Now button.
Search Columns	Specify the fields to search for relevant data by selecting options from the Search Column drop-down list. Figure: Search Columns

Under Scope, you can specify Field, Operator, and Value. Refer to the section for more details.

Under the Search Display column, you can select the columns to display, external URL, and specify the count of search results to be displayed. Refer to Search Display for more details.

Figure: Search Display

To know more about the fields available under the Search Display, see the Field Description below.

Field Description

Search Display
Display Column	Type the $ symbol to add the column in Display Column field value. Figure: Display Columns
Form	Enter URL that should appear after clicking the Search Results.  Figure: Form
Maximum Search Results	Select the count of Maximum Search Results to be displayed for results. Figure: Max Search Results

Appearance 

This section contains the list of features using which the Application Designercan select Text, Border, Background and Padding. 

The Appearance pop-up window appears as shown:

Figure: Appearance
 
The table below contains the list of fields and their descriptions that are available under the Appearance section:

Field Description

Search Box
Text Type	Select the appropriate text type format for the widget from the drop-down list. The Text type can be changed for the widget if required. Figure: Text Type
Text Color	Select the appropriate font color for the widget by selecting the color from the color palette.Figure: Text Color
Text Size	Select the appropriate font size by dragging the slider. Here text size is selected as 12. Figure: Text Size
Text Style	Select the appropriate font style from the drop-down list.  Text Style allows for the selection of one or more styles (bold, italics, and/or underlined) simultaneously.Figure: Text Style
Border	Select the border style by selecting desired Border Type. Figure: Border
Background Color	Select the preferred background color for the search box.
Search Body
Border	Select the preferred border for the search body.
Background Color	Select the background color for the search body field.
Tab Heading
Text Type	Select the appropriate text type format for the widget from the drop-down list. The Text type can be changed for the widget if required. Figure: Text Type
Text Color	Select the appropriate font color for the widget by selecting the color from the color palette.Figure: Text Color
Text Size	Select the appropriate font size by dragging the slider. Here text size is selected as 12. Figure: Text Size
Text Style	Select the appropriate font style from the drop-down list.  Text Style allows for the selection of one or more styles (bold, italics, and/or underlined) simultaneously.Figure: Text Style
Highlight Text Color	Select the preferred color to highlight the text color.
Result Text
Text Type	Select the appropriate text type format for the widget from the drop-down list. The Text type can be changed for the widget if required. Figure: Text Type
Text Color	Select the appropriate font color for the widget by selecting the color from the color palette.Figure: Text Color
Text Size	Select the appropriate font size by dragging the slider. Here text size is selected as 12. Figure: Text Size
Text Style	Select the appropriate font style from the drop-down list.  Text Style allows for the selection of one or more styles (bold, italics, and/or underlined) simultaneously.Figure: Text Style
Dimensions
Dimension	Select the widget's height and width from the drop-down list. You can set the height in pixels (px) and the width in both percentage (%) and pixels (px). Using a percentage for width allows the widget to fill the container's width. Figure: Dimension

The configured Search Box widget appears as shown below.Figure: Search Box