1. Report
2. Page (search from a report embedded inside it)
   

1. Choose a field whose field values will be evaluated from the Select Field dropdown 
2. Choose an appropriate operator from the Select Operator dropdown
3. The value field will be autofilled with the system variable "input.searchString" which will act as the placeholder for the input value. This will appear disabled for all the criteria constructed.
   

1. Embed a report on the required page (if the embedded report already exists, skip to next step)
2. Navigate to the page where the search element needs to be included
   

Note: If you've already added page variables in this screen, click Add New instead to create a new one.

 

6. Click the  icon to go back to the page builder.

1. Choose a field whose field values will be evaluated from the Select Field dropdown 
2. Choose an appropriate operator from the Select Operator dropdown
3. Supply the configured page variable (named as the field link name of the target report) as the value using the format "input.<page variable>".

Note: Once the condition is saved, click on the Filter box to edit it again.

Note: If the search element was previously created, select it from the page builder and click Configure to open the Search Configuration pane. Alternately, you can also double click on the search bar to open its configuration.

Note: The Target page dropdown lists all the pages in the application you are currently working on. To select a page from another application, click Change App in the footer of the dropdown. Select another application and click Done to view a list of all of its pages.
 

 

Note:

1. To choose a different page variable instead of the one already added, click on it and select the required one that was previously created and named after the target field link name.
   
2. To remove a page variable from this configuration, hover over it and click the bin icon.
   

6. Choose if you want the target page to open in a New window (default value), Same window, or as a Popup. If Popup is chosen, you can customize the Width and Height in pixels.

1.3. Configure style

You can configure style options for the search bar and its container as below:

1. Navigate to the page builder of the required page and click Search on the left pane.

2. Drag and drop a search template from the list that appears alongside onto the building space. The Search Configuration pane opens.

Note: If the search bar was previously created, select it from the page builder and click Configure to open the Search Configuration pane. Alternately, double click the search bar to open the configuration pane.

3. Navigate to the Style tab on the section on the right and customize the search bar using the following options:

This table lists all the style properties for panels and panel containers, and their configuration steps.

Property		Steps
General	Search shape box	Choose if the search element should be Rectangular (default) or Rounded.
	Font family	Choose a font for the user input and the Search button's label.
Search button Search bar (The properties can be configured uniquely for each of the above structures)	Style	Customize the style properties of the input text and Search button, such as emboldening and italicizing it.
	Color	Click the A icon and select a font color for the search input and button. Click the bucket icon to select a background color.
	Font size	Click the dropdown to pick a preset font size for input text and Search button, from options 12 - 40 px. Click on the numeric value to set a custom value anywhere between 1 and 99 pixels.
Padding		Enter the padding values for all four sides of the search bar to modify the space present between it and the container's margin. The default values are as shown in the below image.
Background color		Customize the background color of the container in which the search bar is situated.
Background		Set a background image for the search bar's container from My library or a Web link. You can further customize the: Scaling - You can choose to: Fill - Enlarges the image to fill the whole space. Fit - Resizes the image to fit within the outline of the container without cutting any portion out. Tile - Repeats the image horizontally or vertically to fill the space. Note:  If you choose Fill or Fit, you can position the image to the left, right, top, bottom, or to the center of the space. If you choose Tile, you can decide if the image needs to be repeated horizontally, vertically, or both. By default, both are selected. If you select neither, the last selection before that is automatically chosen. Overlay - Enable overlay for the background image with a color of your choice. The intensity of the overlay color can also be customized from 0% to 99%.

2. Managing the search element

1. Add Element Name - Click the pencil () icon in the top right corner of the Search Configuration pane to edit the element's name. This name can be used to locate the specific element in the page builder among others.
2. Click the Search element types arrow () and choose another template to change it after the configuration is complete. The configurations are retained when the search bar type is switched.
   

Once you're done configuring the search bar, click the () icon to navigate back to the page builder. You can further manage the search bar from there, such as relocating its position on the page, giving it a live mode title, and more.

 

1. Adding a search title - Click the T icon to give a title for your search element. This will appear as a heading above the search bar in the live mode of the application. Once inserted, click the search title to format it using the below options:
   
1. Font family - Choose from six different font types in the dropdown.
2. Font size - Choose a size from 12 - 40 px in the dropdown. The default value is 20px.
3. Bold - Click the B icon to embolden the title.
4. Font style - Click the I icon to italicize the title.
5. Font color - Click the A icon to choose a matching color for the title.
6. Update title - Double click the inserted title to update it.
7. Remove title - Select the search element and click the T icon again to remove it.
   
2. Deleting search bar - Click the bin icon to remove the element from the page.
3. Relocating search bar - Drag and drop a search bar elsewhere on the page builder to relocate it.
   

If you want to edit a previously inserted search element, select the required search bar in the page builder and click Configure.