Grouping Options

Use Grouping Option components to group together other components. You can control formatting, when components are disabled or visible, and validations in bulk by using a Group Component.

Section	Standard group component.
Expandable Section	Group that is collapsible.
Tabs Container & Tab	Have multiple tabs in the same space.

Section

You can drag and drop any type of and any number of components into a section to group those components together. 

You can even nest sections inside of sections.

Expandable Section

The Expandable Section component works the same as the Section component (see above) except the user can expand and collapse it.

Control Properties:

1. Change if the component is minimized by default or not (expanded by default).
2. Update the panel label which will appear like “Expander Component Label” for this example section.

Tabs Container & Tab

To use the Tabs Container and Tab components: 

1. Add a Tabs Container to your form. 
2. Drag Tab components into the Tabs.
3. Drag child components into each individual Tab.
   

Control Properties: 

In Control Properties, you can configure some formatting controls, including: alignment, tab orientation, height, width, and color settings.

Individual Items

Component	Description	Data Type
Text Input	Simple text (string) input. Text will get cut off if it goes past the right margin.	String
Multi-Line Text Input	Simple text (string) input. Text will continue on a new line if it goes past the right margin.	String
Formatted Text	Formatted text or HTML snippet.	String
Integer Input	Whole number integer input.	Integer
Decimal Input	Decimal input with configurable precision.	Decimal
Numeric Slider	Whole number integer data, visualized with a slider.	Integer
Date/Time	Date & Time selection.	Datetime
Date	Date selection only.	Datetime
Time	Time selection only.	Duration
Duration	A length of time in hours, minutes, and seconds.	Duration
Location (Lat/Long)	GPS coordinates (latitude and longitude).	Location
Horizontal Space	Add blank space for formatting.	N/A

Text Input and Multi-Line Text Input

The only difference between Text Input and Multi-Line Text Input components is that Multi-Line Text Input components will extend past multiple lines, while Text Input components will cut off.

1. After the component is added to the Editing Space, you can change whether the input component is multi-line or not.
2. Add adornment text and/or icons to the left or right. They will display like this:
   

Barcode Scanning:

1. In the “Field” settings in the right-hand panel (), there’s a “Barcodes” dropdown. Here, you have the freedom to select the specific barcode format(s) you want your form to scan.
2. That’s it - Now in Preview Mode or in the Inbox, on the right-hand side of the component, you'll notice the "SCAN" option. This feature empowers you to seamlessly scan barcodes using your device's camera..

Formatted Text 

In the Control Properties, you can configure the Formatted Text component to be formatted as either HTML or plain text. If you use HTML (the default), then you can use the rich text editor. If you use plain text, then you will get just a plain text input space.  

Formatted Text fields are always read only to the form user, so you set their value using the initial or update calculations. 

Integer Input and Decimal Input

Integer Input and Decimal Input fields hold numerical values. 

Control Properties:

1. Include Separator will add commas to your numbers as appropriate.
2. Enable Stepper gives you up/down arrows to increase/decrease the value by the amount you put in Step.
3. For decimals, you can Pad with 0 as well as configure the precision displayed by changing the Decimal Places.
4. Add Adornment Text and/or icons to the left or right (useful for units of measure). They will display like this:
   

Numeric Slider 

The Numeric Slide component gives the user a number slider to select a whole number. You configure the min, max, and step. 

Control Properties:

With Step=2, Min=1, and Max=10 configured, the form user will have options [1,3,5,7,9].

Date/Time, Date, and Time Components

Below are examples for how each of the components displays in the web Inbox. Because we use the standard iOS/Android date/time pickers, these may look a little different in the Mirata Mobile Apps, but the functionality will be the same.

In Control Properties, you can configure the format of the date/time. 

Duration

Duration components display like this so the user can enter Hour, Minutes, and Seconds like this.

In Control Properties, you can change the labels for hours, minutes, and seconds. 

Location

The Location component allows you to enter latitude and longitude GPS coordinates. You can use location services on your device to capture the form user's current location. 

Control Properties: 

1. Label the Latitude and Longitude inputs.
2. Format as either decimal or dms.
   
3. Enable Location Detection so user can click the  button to automatically capture their current location. 

Horizontal Space

The Horizontal Space component is just for formatting purposes to add blank space to the form. 

It will display in the Designer with a dotted line around it so you know where it is, like below.

The form user won’t know the divider component is there. Below is what the user sees in the Inbox.

Selectors

Component	Description	Data Type
Single Checkbox	A simple checkbox, which can be checked or unchecked.	Boolean
Switch	A simple toggle, which can be switched on and off.	Boolean
Radio Buttons	A set of radio buttons with a value of true/yes or false/no, for which you can configure the labels.	Boolean
Checkbox Group	Select one option from a list, each option displayed as a separate checkbox.	String
Button Group	Select one option from a list, each option displayed as a separate button.	String
Dropdown	Select one option from a list, each option listed in the dropdown. You configure the list of options in the Property Pane in the designer.	String
Dropdown From List	Select one option from a list where each option is pulled from a list in the form.	Array

Single Checkbox and Switch

Below you can see what a checkbox looks like (on the left) and a switch looks like (on the right). You can use these fields in the same exact way in the Designer, they just display slightly differently to the form user. 

Behind the scenes, these components will be stored as either <true> or <false>.

Control Properties: 

Configure the label Text and Position (top, right, bottom, or left). 

Radio Buttons

Similar to the Single Checkbox and Switch components, Radio Buttons will hold either a <true> or <false> value. Radio Buttons appear as a pair and only allow the form user to have one selected at a time. 

Control Properties: 

1. The labels will default to “True” and “False”, but you can change them to anything. Here, we changed them to “Yes” and “No”.
   

Checkbox Group, Button Group, and Dropdown

This is the different ways each component type displays the options to the form user. 

In the Data () tab of the right-hand Property Pane, configure the options for this selection component. You have 4 options:

Control Properties for Dropdown components:

You can turn on Enable Search so the form user can use search-ahead to find the option they’re looking for.

Control Properties for Checkbox Group and Button Group components:

1. Orientation: Change from horizontal vs. vertical. 
2. Button Type: Change between standard (buttons), radio, or checkboxes.
3. Colors: Format the colors for selected and unselected options.

Dropdown From List

Use the Dropdown From List component to give the user a dropdown menu with the options driven from a list in the form. 

Use the initial or update calculations in the Calculations tab of the left-hand Property Pane to set the list of data in the field. 

To add components into the dropdown list, you must go to the Layers in the left-hand panel. Then, select the group that is automatically within the grid field. Then, select a data type on the top and click the “+” button. To later add calculations to these fields, you will need to go back to the Layers tab to edit them.

Control Properties:

1. Selection Field: Map an integer component field (which is outside of the list on the form, not in the list) to capture the index of whichever row the user has selected. The index of the first row in the list is 0 (not 1). Add a new Integer component to the form and map it in, then test it out in Preview Mode to see how it works. 
2. Enable Search: Configure if the form user can use search-ahead to find the option they’re looking for.
3. Filter: Set a filter for which dropdown options are visible at any given time a user is using this form. Filter will hide the items from the user, but the items and the data within them will not be removed from the form/list, they just won’t be visible to the user.
4. Label Field: Map to the string field within the dropdown list which should display as the options in the drop down.
5. Sort: Optionally, map a key field and select a sort order to sort the list of options in the dropdown.

Data Groupings

Component	Description	Data Type
List	List of repeating sections, where each item in the list has the same parameters but can have different data in each parameter.	Array
Grid	List of repeating sections, where each item in the list has the same parameters but can have different data in each parameter.	Array
Read-Only Grid	A display-only component to display a list of data in a table or dropdown format.	Group
Table	List of repeating sections, where each item in the list has the same parameters but can have different data in each parameter.	Array

List

In the Designer, you can either select the entire list or the list item (the group within the list). You will get different configuration options in the right-hand Property Pane based on which you have selected in the designer. 

To add components to your list, drag them into the list item, just like you drag components into the Section component. You can add as many components into the list item as you need. You cannot add other array components into the array list item.

Control Properties when the entire list is selected:

1. Selection Field: Map an integer component field (which is outside of the list on the form, not in the list) to capture the index of whichever row the user has selected. The index of the first row in the list is 0 (not 1). Add a new Integer component to the form and map it in, then test it out in Preview Mode to see how it works. 
2. Max Height: Configure the max height of the list. If the list goes over the max height, then the form user can scroll within the list. 
3. Separator Style: Configure the color and size of the space separating each item/row in your list. 
4. Add Enabled: Configure if the form user can add new items/rows to the list or not (i.e. whether they see the “ADD ROW” button or not). 
5. Filter: Set a filter for which list items are visible at any given time a user is using this form. Filter will hide the items from the user, but the items and the data within them will not be removed from the form/list, they just won’t be visible to the user.

Control Properties when the list item is selected:

1. Delete Enabled: Configure whether or not the trash icon to delete an item/row is available to the form user.
2. Edit Enabled: Configure whether the items/rows are editable or readonly.
3. Edit Button Shown: Configure whether the user has to click the pencil icon for each item/row in order to edit that row or the rows are already editable.

Grid

Use the Grid component to display a list of data in a grid format. You can allow the form user to add, edit, and delete rows in the grid or you can turn off any or all of these options for the form user. 

To add components into the grid, you must go to the Layers in the left-hand panel. Then, select the group that is automatically within the grid field. Then, select a data type on the top and click the “+” button. To later add calculations to these fields, you will need to go back to the Layers tab to edit them.

Control Properties: 

1. Rows can be added: Configure if the form user can add new items/rows to the grid or not (i.e. whether they see the “+” button or not). 
2. Rows can be removed: Configure whether or not the trash icon to delete an item/row is available to the form user.
3. Enable quick fill: Quick fill allows the form user to enter one value below the grid and then quickly add that value to multiple cells in the grid by clicking on each cell they want to add that value to. 
4. Rows can be selected: Configure if the form user can select rows. You can configure the style of rows which are selected in the Control Properties as well. 
5. Filter: Set a filter for which rows are visible at any given time a user is using this form. Filter will hide the items from the user, but the items and the data within them will not be removed from the form/grid, they just won’t be visible to the user.
6. Styles: Configure cell styling specific to the type of and state of that cell, including: the default style, style for read only cells, style for label cells, and style for selected cells.
7. Row Labels: Configure the row labels, either on the left and/or right of each row in the grid.

Read-Only Grid

Use the Read-Only Grid component to display a list of data for which you don’t need to do anything with the data except display it. If you want the user to be able to edit the data in the list or you want to be able to send the data in the list to some other system, do not use the Read-Only Grid component (use List, Grid, or Table components in those scenarios).

You can set the data in the list using the initial or update calculations in the Conditions tab of the left-hand Property Pane or using the Data tab in the left-hand Property Pane. See the Dropdown component in the Selectors components section above for more details on the options available in the Data tab.

Control Properties:  

1. Enable Refresh: Configure if the form user should see a refresh button to pull in fresh data from the data mapping you configured in the Data tab in the left-hand Property Pane.
2. Enable Search: Configure if the user can search through the rows/items in the grid.
3. Enable Selections: Configure if the form user can select rows. You can configure the style of rows which are selected in the Control Properties as well. 
4. Height: Configure the height of the grid. If the data goes over the height, then the form user can scroll within the grid. 
5. Type: Configure if it should display as a table or dropdown.
6. Label Field: If you have type as dropdown, then configure what field shows as the options in the dropdown.
7. Selected Style: Configure the background color and border format for a row that is selected.

Table

Use the Table component to display a list of data in a table format. You can allow the form user to add, edit, and delete rows in the table or you can turn off any or all of these options for the form user. 

To add components into the table, you must go to the Layers in the left-hand panel. Then, select the group that is automatically within the table field. Then, select a data type on the top and click the “+” button. To later add calculations to these fields, you will need to go back to the Layers tab to edit them.

Control Properties:

1. Selection Field: Map an integer component field (which is outside of the table on the form, not in the table) to capture the index of whichever row the user has selected. The index of the first row in the list is 0 (not 1). Add a new Integer component to the form and map it in, then test it out in Preview Mode to see how it works. 
2. Layout: Configure if the table has a horizontal or vertical layout.
3. Fields: After you add fields in the Layers, add them here in Fields.
4. Add Enabled: Configure if the form user can add new items/rows to the table or not (i.e. whether they see the “+” button or not). 
5. Search Enabled: Configure if the user can search through the rows/items in the table.
6. Filter: Set a filter for which rows are visible at any given time a user is using this form. Filter will hide the items from the user, but the items and the data within them will not be removed from the form/table, they just won’t be visible to the user.

Images & Media

Component	Description	Data Type
Image & Sketch	Use for any of these use cases: User needs to take photo on their device or upload a file/image from their device User can select from list of images (that are stored in Mirata) Display an image stored in Mirata to the user  User needs to annotate/sketch on any image  To upload photos to Mirata, just click the + button in the Image Gallery in the Admin Tool. See Admin Tool Basics Training for more information.	Image
Signature	User signs using touch-screen on a tablet or by clicking and holding the mouse on a computer.	Image
Image Grid	Display a list of images.	Array
Static Image Grid	Display multiple images via a URL.	N/A

Image & Sketch

The Image and Sketch components allow you to display an image on the form, allow the form user to take or upload an image from their device, and allow the form user to annotate images. 

The only difference between the Image and Sketch components is that the Annotation feature is enabled by default for the Sketch component whereas it’s disabled by default for the Image component. After you add an Image or Sketch component, you can change the Annotation configuration in Control Properties in the right-hand Property Pane. 

Control Properties: 

1. Annotation 
2. Annotation Icons
3. Camera
4. File Picker
5. Images
6. Image Selection 
7. Sizing
8. Quality 

1. ANNOTATION:
   

1. Enabled: When Annotation is enabled, the user can use the Annotation Editor for that image. Here’s what you can do with the Annotation Editor: 

1. Free-form drawing
2. Select Color and Thickness before drawing 
3. Draw shapes, including: 

1. Solid Lines
2. Dashed Lines
3. Rectangles
4. Circles
5. Arrows
6. Text

4. Add Annotation Icons (see #2)

2. Button Text: The Annotation button defaults to a pencil icon, but you can change it by putting a value in Button Text. 
3. Annotation Default Color: Defaults to red, but you can change it here. 

2. ANNOTATION ICONS:

In the Advanced Settings for an Annotation Icon, you can configure:

This is how these controls will display in the Annotation Editor:

1. Annotation Icons: Add using the “+ ADD ICON” button, then you can select any image that’s uploaded to your organization’s Mirata. 
   To upload photos to Mirata, just click the + button in the Image Gallery in the Admin Tool. See Admin Tool Basics Training for more information. 
2. Title: Will show in the pop-up when the user hovers over the icon in the Annotation Editor.
3. Category: The user can select a category in the dropdown to filter the Annotation Icons.
4. Details: Will show in the pop-up when the user hovers over the icon in the Annotation Editor.
5. Resizable/Rotatable/Width: Adjust for an Annotation Icon.
6. Text: When Text Enabled is checked, whatever is in Text Value will be added along with the annotation icon. You can adjust the Position relative to the icon and the Size of the text. 

3. CAMERA:
   

1. Enabled: Allow the user to take their own photo using their device’s camera.
2. Button Text: The Camera button defaults to a camera icon, but you can change it by putting a value in Button Text. 

4. FILE PICKER:
   

1. Enabled: Allow the user to take their own photo using their device’s camera.
2. Button Text: The File Picker button defaults to a paper clip icon, but you can change it by putting a value in Button Text. 
3. Close Button Text: When the user clicks File Picker, they will get the below pop-up window. Configure the confirmation text (which the user has to click to confirm their file selection).
4. Instruction Text: When the user clicks File Picker, they will get the below pop-up window. Configure the text which appears in the file selection box.

5. IMAGES: 
   

1. Image Id: Click the image icon on the right to select or upload the static image you want in this component. 
2. URL: You can enter a URL of an image if you have a specific path. We don’t recommend using a URL instead of an Image ID unless you’re an advanced user.
3. Thumb URL: Click the image icon on the right to select or upload the image that will be shown whenever the image component is collapsed by the user. You can turn on/off allowing the user to collapse the image and view the thumb image using the Collapsable switch in SIZING (see #6a).

6. IMAGE SELECTION:
   

1. Button Text: The Image Selection button defaults to an image icon, but you can change it by putting a value in Button Text. 
2. Image: Click to select an image. The user will be able to select anty of the images you add in the image selection for this image component.
3. Title: Title the image so the user knows what he/she is picking. 

7. SIZING:
   

1. Collapsible: When turned on, the user can click the image to expand it to height e. Height and collapse it to height f. Thumb Height.
2. Button Size: Adjust the size of the Annotation, Camera, File Picker, and Image Selection buttons.
3. Placement: Adjust the placement of the image.
4. Scaling: Adjust the scaling of the image. 
5. Height: Adjust the height of the image. If a. Collapsible is turned on, the user can minimize the image to f. Thumb Height by clicking on the image. 
6. Thumb Height: Adjust the thumb height of the image if it is collapsed (if a. Collapsible is turned on). The user can collapse the image by simply clicking on it.

8. QUALITY:

1. Max Size: For quality control, you can adjust the maximum size of an image that can be taken with the camera or uploaded. 

Signature 

Use the Signature component to capture a signature from the form user. The user can draw their signature either using touchscreen or their mouse, depending on the device they’re using. 

Control Properties: 

1. Display
2. Dialogue
3. Pen
4. Watermark
5. Alignment
6. Font

1. DISPLAY:
   

1. Show Image: Turn on/off if the signature displays as an image after it’s signed.
2. Signed/Unsigned Button Text: These buttons default to a pencil icon, but you can change them to text by entering desired text here.
3. Button Size/Placement: Adjust the size and placement of the signed/unsigned buttons.

2. DIALOGUE:
   When the user clicks to sign, this is the dialogue box where they sign:
   
   These are the dialogue settings in Control Properties (🔧):
   

1. Cancel Text: The button defaults to “CANCEL”, but you can change it by putting a value in Cancel Text.
2. Clear Text: The button defaults to “CLEAR”, but you can change it by putting a value in Clear Text.
3. Save Text: The button defaults to “SAVE”, but you can change it by putting a value in Save Text.
4. Title: The title defaults to no title, but you can change it by putting a value in Title.

3. PEN: Pen color defaults to black, but you can change the pen Color and Width here.
4. WATERMARK: By default, there’s no watermark. Add Text here if you want a watermark on the signature. You can also change the Text Color of the watermark.
5. ALIGNMENT: Adjust the horizontal/vertical alignment.
6. FONT: Adjust the Family, Style, Variant, Size, and Weight.

Image Grid

Use the Image Grid component to display a list of images. Add images to your Image Grid using a workflow transition and “Append to form field array” in a form update.

To add components into the image grid, you must go to the Layers in the left-hand panel. Then, select the group that is automatically within the image grid field. Then, select a data type on the top and click the “+” button. To later add calculations to these fields, you will need to go back to the Layers tab to edit them. Make sure to add an image field the image and a string field for the image titles, which you will map in the Image Fields section in the Control Properties (see #6 below).

Control Properties:

1. Title Position: Configure if you want the image titles to be at the top or bottom of the image.
2. Height: Configure the overall grid height and the height of each image.
3. Layout: Configure how many columns there are in your grid and the spacing between. 
4. Image Item Scaling: Choose to scale images automatically, to full height, or to full width.
5. Icon Color & Icon Position: In each Image Item (see below), you can set an icon for that image. Configure the color and position of those icons here. 
6. Image Fields: In the Image Fields, you map fields that are within the image grid array to specific uses:

1. Cols Field: Map to an integer field which controls the columns.
2. Rows Field: Map to an integer field which controls the rows.
3. Title Field: Map to a string field to be used as the title of each image.
4. Subtitle Field: Map to a string field to be used as the subtitle of each image.
5. Image Source: Change Image Field source between a field in the form and a URL.
6. Image Field: Map to an image field to be used as each image.
7. Icon Field: Map to a string field to be used as the icon for each image.

Static Image Grid

Use the Static Image Grid component to display a list of images from URLs. 

Control Properties:

1. Title Position: Configure if you want the image titles to be at the top or bottom of the image.
2. Height: Configure the overall grid height and the height of each image.
3. Layout: Configure how many columns there are in your grid and the spacing between. 
4. Image Item Scaling: Choose to scale images automatically, to full height, or to full width.
5. Icon Color & Icon Position: In each Image Item (see below), you can set an icon for that image. Configure the color and position of those icons here. 
6. Image Items: Add URLs of the images which you want to display in the grid. You can paste as many URLs as you need. 

Graphs & Charts

Component	Description	Data Type
Bar Chart	Display a list of data in a chart with bars.	Array
Pie Chart	Display a list of data in a circular chart.	Array
Line Graph	Display a list of data in a chart with lines.	Array

Bar Chart

Use a Bar Chart component to display a list of data in a circular chart.

To add components into the chart, you must go to the Layers in the left-hand panel. Then, select the group that is automatically within the table field. Then, select a data type on the top and click the “+” button. To later add calculations to these fields, you will need to go back to the Layers tab to edit them.

Control Properties:

1. Filter: Set a filter for which items in the list of data are visible at any given time a user is using this form. Filter will hide the items from the user, but the items and the data within them will not be removed from the form/graph, they just won’t be visible to the user.
2. Height: Configure the height of the chart.
3. Title: Configure the title of the chart.
4. Loader Text: Configure the text which will appear whenever the chart data is loading.
5. Labels: Configure the horizontal and vertical labels of the chart data.
6. Series: Map to a field within the chart array. 
7. Legend: Configure the legend colors and labels.

Pie Chart

Use a Pie Chart component to display a list of data in a chart with bars.

To add components into the chart, you must go to the Layers in the left-hand panel. Then, select the group that is automatically within the table field. Then, select a data type on the top and click the “+” button. To later add calculations to these fields, you will need to go back to the Layers tab to edit them.

Control Properties:

1. Filter: Set a filter for which items in the list of data are visible at any given time a user is using this form. Filter will hide the items from the user, but the items and the data within them will not be removed from the form/graph, they just won’t be visible to the user.
2. Height: Configure the height of the chart.
3. Title: Configure the title of the chart.
4. Loader Text: Configure the text which will appear whenever the chart data is loading.
5. 3D: Toggle on/off your pie chart displaying 3-dimensional vs. flat.
6. Pie Size: Configure the size of the pie chart.
7. Text: Configure the labels of the chart slices to be either a label calculation, values, or percentages. 
8. Series: Map to a field within the chart array. 

1. Label: Map to a string field which holds the label for each slice of the pie.
2. Value: Map to a decimal field which holds the value for each slice of the pie.

Line Graph

Use a Line Graph component to display a list of data in a graph with lines.

To add components into the graph, you must go to the Layers in the left-hand panel. Then, select the group that is automatically within the table field. Then, select a data type on the top and click the “+” button. To later add calculations to these fields, you will need to go back to the Layers tab to edit them.

Control Properties:

1. Filter: Set a filter for which items in the list of data are visible at any given time a user is using this form. Filter will hide the items from the user, but the items and the data within them will not be removed from the form/graph, they just won’t be visible to the user.
2. Height: Configure the height of the graph.
3. Title: Configure the title of the graph.
4. Loader Text: Configure the text which will appear whenever the graph data is loading.
5. Line Style: Configure if the line style is standard or smooth. 
6. Labels: Configure the horizontal and vertical labels of the graph data.
7. X-Value: Map to a decimal field within the graph array which holds the values.
8. Y-Value: Configure a name for the y-axis values. Use the blue “Calc” button to map each to a decimal field within the graph array.

Actions

Component	Description	Data Type
Workflow Transition Button	A button which the form user can click to trigger a workflow transition.	N/A
Launch URL Button	A button which the form user can click which will take them to a provided URL.	N/A
Search Button	A button which the form user can click to run a query to get a list of data.	N/A

Workflow Transition Button

Use the Workflow Transition Button component to allow the form user to trigger a workflow transition. You must first create your workflow transition in the Workflow tab and then you can use this component to trigger that transition on the form. For more information on how to use the Workflow Designer to create and configure workflow transitions, please Getting Started: An introduction and overview of Mirata’s Workflow Designer and its role in business processes​. 

In the Control Properties, you tie the button to a workflow transition (which you have created in the Workflow Designer) using the transition name dropdown.

Launch URL Button

Use the Launch URL Button component to allow the form user to navigate to a URL.

Control Properties: 

1. URL: Give a URL to add to.
2. Parameters: Optionally, you can configure any parameters that are needed to launch the URL.

Search Button

Use the Search Button component to allow the form user to run a query to get data.

Control Properties:

1. Query Name: Paste the name of a query which is set up as a Backend Action in the Mirata Admin Tool. Go to the Backend Action Overview article for more information on backend actions
2. Result Field: Map to the field which you want to hold the results of the query after it’s run. If your query should return a list of data, choose an array field here.
3. Query Mappings: Optionally, you can configure any parameters that are needed as inputs to the query which you put in Query Name.