UI Controls and Settings

You can add a wide range of ready made controls to a view when designing your app.

The following table provides the list of controls and applicable settings:

Control Name	Description	Control Settings
Attachment	Used to attach files from the local file system in run time.	Id: The unique ID of the Attachment control. Reference: Variable with the array of file objects for the attached files. Tooltip: The text to display on hovering the mouse over the control.
Attachment List	Used to display the files that are attached by the users in run time.	Id: The unique ID of the Attachment List control. Attachment List Reference: Variable of the list of attachments returned by a process call. Tooltip: The text to display on hovering the mouse over the control.
Autocomplete	Used to provide an input control with an inbuilt drop-down to show the possible matches and real- time suggestion while the user types in the input area. This control consists of Autocomplete component and container.	Id: The unique ID of the Autocomplete control. Custom List Reference: The reference JSON array or a reference variable which returns a JSON array to render the drop-down list. Item key: The key in the individual JSON object of the JSON array specified in Custom List that is displayed as label of the item in the drop-down. Selected Option Reference: The selected option is returned as a JSON object to this reference. Label: The text to display as label of the UI control. Read only: Select this check box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Option Selection or Custom event.
Basic List	Used to display list of items that the users can view and select in run time. This component consists of Title element, Sub Title element and List component.	Id: The unique ID of the Basic List control. List Reference: The reference JSON array or a reference variable which returns a JSON array to render the list. Title: The key in the individual JSON object of the JSON array that is specified in the Reference field. Subtitle: The key in the individual JSON object of the JSON array that is specified in the Reference field. Selected Item Reference: All the keys in the selected row are returned as a JSON object to this reference. This includes all the keys of the individual JSON object of the JSON array that is specified in the Reference field including Title and Subtitle. This reference is used in Input controls to display details. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Click or Custom event.
Button-Horizontal	Used to arrange multiple buttons horizontally. Button Horizontal Bar by default includes two buttons. You can add more buttons as you need within the Button Horizontal Bar. To add a button to Button Horizontal Bar, drag the Button Single control inside the Button Horizontal Bar.	Id: The unique ID of each Button element within the Button-Horizontal control. Label: The text to display as label of the UI control. Tooltip: The text to display on hovering the mouse over the control. Enable Icon: Select to display an icon beside the label of the tab. Icon Position: Select whether the icon should display at the left or right of the label. Select the icon element and label element separately and specify the applicable settings. Enable Badge: Badge is a status descriptor for UI element. Select this option to attach a badge to each button element. Specify the applicable settings for badge. Actions: Launches the script designer to define the actions to perform in the event of On Click, On Double Click, On Hover, or Custom event.
Button-Single	Used to trigger an action through a click operation.	Id: The unique ID of the Button-Single control. Label: The text to display as label of the UI control. Tooltip: The text to display on hovering the mouse over the control. Enable Icon: Select to display an icon beside the label of the tab. Icon Position: Select whether the icon should display at the left or right of the label. Select the icon element and label element separately and specify the applicable settings. Enable Badge: Badge is a status descriptor for UI element. Select this option to attach a badge to button element. Specify the applicable settings for badge. Actions: Launches the script designer to define the actions to perform in the event of On Click, On Double Click, On Hover, or Custom event.
Button-Vertical	Used to add multiple buttons vertically. Button Vertical Bar by default includes two buttons. You can add more buttons as you need within the Button Vertical Bar. To add a button to Button Vertical Bar, drag the Button Single control inside the Button Vertical Bar.	Id: The unique ID of each Button element within the Button-Vertical control. Label: The text to display as label of the UI control. Tooltip: The text to display on hovering the mouse over the control. Enable Icon: Select to display an icon beside the label of the button. Icon Position: Select whether the icon should display at the left or right of the label. Select the icon element and label element separately and specify the applicable settings. Enable Badge: Badge is a status descriptor for UI element. Select this option to attach a badge to each button element. Specify the applicable settings for badge. Actions: Launches the script designer to define the actions to perform in the event of On Click, On Double Click, On Hover, or Custom event.
Canvas	Used to draw graphics via scripting, for example you can use it to add graphs, user signature, simple animation, and data visualization.	Id: The unique ID of the Canvas control. Width: The width of the Canvas control in pixels. Height: The height of the Canvas control in pixels.
Card	Used to provide a content container that includes header, image, text, and actions.	Id: The unique ID of the Card control. Title: The text to display as heading of the card. Sub Title: The text to display as sub-heading of the card. Content: The text to display as content of the card. Icon: Select this check-box to insert an icon in the card. Icon Path: The path where the image file is available to use as icon. Image: Select this check-box to insert an image in the cad. Image Path: The path where the image file is available to insert in the card. Buttons: The buttons to insert in the card. By default the Like and Share buttons are available. You can edit the text on the button to display as button label. Select the button to see the settings options for each button. Actions: Launches the script designer to define the actions for each button to perform in the event of On Click, On Double Click, On Hover, or Custom event.
Carousel	Used to create and control slide-shows.	Id: The unique ID of the Carousel control. Interval in Secs: The time to display each image in the carousel. Total Images: The total number of images that the carousel contains. Image List Reference: The reference JSON array or a reference variable which returns a JSON array to render the images. Image Path: The key in the individual JSON object of the JSON array which includes the path of the image files. Alt Text: The key in the individual JSON object of the JSON array which includes the alternative text to display for the image. Redirect URL: The key in the individual JSON object of the JSON array which includes the URL to navigate when clicked on the image. Target: The key in the individual JSON object of the JSON array which includes the target specification for the Redirect URL. The values of the target can be either ‘_blank’ or ‘_self’. The value ‘_blank’ opens the URL in new tab and ‘_self’ opens the URL in the same tab. Tooltip: The text to display on hovering the mouse over the control. Select each image that you added to the Carousel and specify Path, Alt Text, Redirect and Target.
Country-Autocomplete	Used to provide an input control with an inbuilt dropdown to show the possible matches and real-time suggestions while the user types the country name in the input area. This control consists of Country Autocomplete component and container.	Id: The unique ID of the Country-Autocomplete control. Custom Country List Reference: The reference JSON array or a reference variable which returns the JSON array to render the value to auto complete. This field contains a default country list that you can edit as per your requirement. Country key: The key in the individual JSON object of the JSON array which includes a key for each country in the list. Selected Country Reference: The variable reference that is returned to the current input value. Label: The text to display as label of the UI control. Read only: Select this check box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Option Selection or Custom event.
Currency-Autocomplete	Used to provide an input control with an inbuilt drop-down to show the possible matches and real-time suggestion box while the user types the currency name in the input area. This control consists of Currency Autocomplete component and container.	Id: The unique ID of the Currency-Autocomplete control. Custom Currency List Reference: The reference JSON array or a reference variable that returns a JSON array to render the value for the auto complete. If this option is empty, the default currency list is populated in the auto complete. Currency key: The key in the individual JSON object of the JSON array specified in Custom Currency List that will show as label of the currency in the drop down. Selected Currency Reference: The variable reference that is returned to the current input value. Label: The text to show as label of the control. Read only: Select this check box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Option Selection or Custom event.
Custom HTML	Used to add custom view components. You can add your own HTML code and take control over the appearance and function of a screen element in your app view. This control consists of CustomHTML-child, Custom HTML components and container. For more detail about how to use Custom HTML control in your UI model, see Custom HTML References.	CustomHTML component settings: Id: The unique ID of the Custom HTML control. Add Custom HTML: The text editor to enter your own HTML code to define contents of the control. Click the Add Custom HTML button to open the editor and enter the custom HTML code. CustomHTML-child component settings: Id: The unique ID of the CustomHTML-child control. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Click, or Custom Event.
Datagrid-Pagination	Used to enable pagination when using the data grid to display the data in tabular format. This control consists of Datagrid Pagination component.	Id: The unique ID of the Datagrid-Pagination control. Data Reference: The reference JSON array or a reference variable that returns a JSON array to populate the data. Search: Select this check-box to add a search box to the data-grid to search for the data. Hide Index: Select this check-box to hide the index column. Pagination: Select this check-box to add a pagination bar with page numbers at the bottom right of the data-grid. Rows/Page: This field appears only if the pagination check-box is selected. Enter a number to specify the number of rows to display per page. Option Box: This field appears only if the pagination check-box is selected. Select this option to add a selection box to the data grid with default options. Selected Row Reference: All the keys in the selected row are returned as a JSON object to this reference. This includes all the keys of the individual JSON object of the JSON array that is specified in the Reference. This reference is used in other input controls to display details. Add Columns Data: Opens Column Data window to specify the Display Name, Column Type and Column Width for each column in the data-grid. Actions: Launches the script designer to define the actions to perform in the event of On Row Selection, or Custom Event.
Header	Used to design the header. You can specify a title for the header in the text format. This control consists of a text label component and a box. Double click the text label to change the text to show in the header box.	Id: Specifies the unique ID of the Header control. Label: The text to display as the label of the header control. Actions: Launches the script designer to define the actions to perform in the event of On Click, On Double Click, On Hover, or Custom.
Hyperlink	Used to insert hyperlinks in your app views. Every hyperlink holds a unique web address. This component consists of a hyperlink component and container.	Id: Specifies the unique ID of the Hyperlink control. Redirection Link: The URL to navigate when clicked on the hyperlink. Target: Select the option to specify whether Redirection Link should open in the same page or a new page. Label: The text to display as hyperlink. Default Style: Select this check-box to highlight the hyperlink with default style. Actions: Launches the script designer to define the action to perform in the event of On Click.
Icon	Used to add a custom image as an icon for various actions included in a UI View. This control consists of Icon component.	Id: Specifies the unique ID of the Icon control. Name: Displays the name of the selected icon. Click the options button to select an icon that suits to your requirement. Tooltip: The text to display on hovering the mouse over the control. Enable Badge: Badge is a status descriptor for UI element. Select this option to attach a badge to icon element. Specify the applicable settings for badge. Actions: Launches the script designer to define the actions to perform in the event of On Click, On Double Click, On Hover, or Custom Event.
Image	Used to display images. The image element can be resolved from an uploaded image file, URL, dynamic memory data, or blob. This component consists of Image component and container.	Id: Specifies the unique ID of the Image control. Reference: Reference variable to render the image source which has URL / base64. Select Image: Select an image from the drop-down to display in the control. Tooltip: The text to display on hovering the mouse over the image.
Image Grid	Used to display photo gallery. This component consists of Image elements and Image Grid component .	Id: Specifies the unique ID of the Image Grid control. Images in Row: Select Automatic from the drop-down to arrange the images automatically with responsive design. You can also choose to display any number of images per row between 1 and 100. List: The reference or the JSON array of all the images to render. Path key: The key in the individual JSON object of the JSON array which includes a key for the path of the images to render. Hover image key: The key in the individual JSON object of the JSON array which includes a key for the hover selector. Caption key: The key in the individual JSON object of the JSON array which includes a key for the text to display on hovering the mouse over the image. Title key: The key in the individual JSON object of the JSON array which includes a key for the tooltip to display on hovering the mouse over the image. Select each image in the Image Grid and specify the following settings: Tooltip: The text to display on hovering the mouse over the image. Hover Image: Select this check-box to enable the display of caption on hovering the mouse over the image. Caption: The text to display as caption upon the image on hovering the mouse over the image. Path: The absolute or relative path of the image. Actions: Launches the script designer to define the actions to perform in the event of On Click, On Hover or Custom event.
Image-List	Used to add an image as one of the line item in a list. For example, showing a profile picture along with the name, designation, and other details of an employee. This controls consists of Image element, Title element, Sub Title element and Image List component.	Id: Specifies the unique ID of the Image-List control. Image List Reference: The reference JSON array or the reference that returns JSON array to render the list of images. Image: The key in the individual JSON object of the JSON array specified in Image List which is the source of image in each row of the list. Title: The key in the individual JSON object of the JSON array specified in Image List Reference which is the title of each row in the list. Subtitle: The key in the individual JSON object of the JSON array specified in Image List Reference which is the sub-title of each row in the list. Seleted Item Reference: All the keys in the selected row are returned as a JSON object to this reference. This includes all the keys of the individual JSON object of the JSON array specified in Image List Reference including Image, Title and Subtitle. This reference can in turn be used in input controls to display details. Actions: Launches the script designer to define the actions to perform in the event of On Click or Custom Event.
Layout-Accordion	Used as stacked container with nested items that expand and collapse when clicked. This control consists of a text component and basic expansion panel and basic accordion container.	The Basic Accordion container has the following settings: Id: The unique ID of the Basic Expansion Panel of Layout-Accordion control. Actions: Launches the script designer to define the actions to perform in the event of On Click or Custom Event. The Basic Expansion Panel has the following settings: Id: The unique ID of the Basic Expansion Panel of Layout-Accordion control. Title: The text to display as header within Basic Expansion Panel of the control. Description: The text to display as description for Basic Expansion Panel of the control. Actions: Launches the script designer to define the actions to perform in the event of On Panel Open, On Panel Close or Custom Event. The Text component has the following settings: Id: The unique ID of the Text component within each Basic Expansion Panel of Layout-Accordion control. Reference: The reference JSON array or a reference variable that returns a JSON array to populate the data. Label: The text to display as label of the control. Readonly: Select this check box to use the UI control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Key Up, On Focus Lose or Custom Event.
Layout-Column-1	Used to arrange the UI controls in single column. This control consists of a cell component, row and a container.	Id: The unique ID of the Column-1 control. Title: The text to display as label of the control.
Layout-Column-1/2 1/2	Used to arrange the UI controls in two columns. This control consists of three components - two cell components and a row as container.	Id: The unique ID of the Column-1/2 1/2control. Title: The text to display as label of the control.
Layout-Column-1/3 1/3 1/3	Used to arrange the UI controls in three columns. This control consists of three cell components and a row as container.	Id: The unique ID of the Column-1/3 1/3 1/3 control. Title: The text to display as label of the control.
Layout-Divider	User to insert a thin line that groups content in lists and layouts. This control consists of a Divider component and a container.	Id: The unique ID of the Divider control. Inset: Select this check box to use the control as Inset Divider.
Layout-Expansion Panel	Used to provide an expandable details-summary view. This control consists of text component and basic expansion panel.	The Basic Expansion Panel has the following settings: Id: The unique ID of the Basic Expansion Panel of Layout-Expansion Panel control. Title: The text to display as header within Basic Expansion Panel of the control. Description: The text to display as description for Basic Expansion Panel of the control. Expanded Reference: The reference variable used to keep the panel expanded and display the values it contains. Actions: Launches the script designer to define the actions to perform in the event of On Panel Open, On Panel Close or Custom Event. The Text component has the following settings: Id: The unique ID of the Text component within each Basic Expansion Panel of Layout-Expansion Panel control. Reference: The reference JSON array or a reference variable that returns a JSON array to populate the data. Label: The text to display as label of the control. Readonly: Select this check box to use the UI control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Key Up, On Focus Lose or Custom Event.
Layout-Tabs	Used to organize content into separate views where only one view can be visible at a time. This control consists of three basic tabs. Each tab has a basic tabs header. By default the First tab contains Button-Single control, the Second tab contains Text Input control, and the Third tab contains Button-Horizontal control. You can add more controls within each tab by dragging the required controls from the Elements. You can also add as many tabs as you need by selecting an existing BasicTabsHeader in the control and clicking the Copy icon.	The Basic Tabs has the following settings: Id: The unique ID of the Layout-Tabs control. Tab Index Reference: The variable reference to keep the corresponding tab focused. Active Tab Underline Color: Select a color with which you want to highlight the active tab. Actions: Launches the script designer to define the actions to perform in the event of On Tab Swtch, On Click or Custom Event. The Basic Tabs Header has the following settings: Tab Color: Select the color in which you want to display the selected tab. Tab Body Color: Select the color that you want to apply as the background to the body of the selected tab. Enable Icon: Select to display an icon beside the label of the tab. Icon Position: Select whether the icon should display at the left or right of the label. When selected, an icon is displayed beside the label. You can select the Icon element and Label element separately to specify the applicable settings and design the look of each element using the options available under the Styles tab.
News Ticker	Used to display scrolling text running from right to left across the screen. This control consists of Ticker component only.	Id: The unique ID of the News Ticker control. Text List Reference: : The reference JSON array or a reference variable which returns a JSON array that renders the text sequence. Text: The key in the individual JSON object of the JSON array specified in Text List Reference to display as the scroll content. Animation Delay: The scroll speed in seconds. Invert: Select this check-box to invert the direction of the scroll. By default the text scrolls from right to left. If you select Invert, the text scrolls from left to right. Tooltip: The text to display on hovering the mouse over the control.
Photo-Picker	Used to capture a photo using camera or choose a picture from gallery in mobile device. This control consists of Photo Control component and container.	Id: Specifies the unique ID of the Photo-Picker control. Reference: The variable which stores the file object selected or captured in the photo control. Tooltip: The text to display on hovering the mouse over the control.
Progress Bar	Used to provide visual feedback about the progress of an ongoing task, such as performing a task in the background. This control consists of Progress Bar component and container.	Mode: Select the mode of the progress bar from the drop-down list. The following options are available: Determinate - Used to indicate the percentage of operation completed. Indeterminate - Used to indicate that the operation is in progress and the user is expected to wait for the operation to complete. Buffer - Used to show the percentage of progress as primary bar along with the incomplete percentage as buffering. Query - Used to indicate the pre-loading until the loading can actually be made. Progress Reference: Applicable only for mode of Determinate and Buffer. Enter the percentage of operation to display as completed by default. Buffer Reference: Applicable only for Buffer mode. Enter the percentage of operation to display as additional buffering progress by default.
Rich Text Editor	Used to format the text to display as static text to the users of the app. This control consists of Rich Text Editor component and container.	Id: Specifies the unique ID of the Rich Text Editor control. Text editing options: Includes various options to edit the text such as bold, italic, underline, strike through, bullet list, number list, link, color, and more. Editing options are useful during the design time only. Font-family: Includes various options to select the font family such as Arial, Arial Black, Brush Script MT, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Lucida Sans Unicode, Tahoma, Time New Roman, Trebuchet MS, and Verdana. You can select a Font-family during the design time only. Tooltip: The text to display on hovering the mouse over the control.
Selector-Checkbox	Used to create list of items with check-box and let the user select more than one item. This control consists of Text label element, Checkbox component and container. Double click the text label element to edit the text.	Id: Specifies the unique ID of the Selector-Checkbox control. Reference: Variable to hold the Boolean whether the check-box is selected or not. Readonly: Select this check box to use the UI control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Value Change or Custom Event.
Selector-Checkbox Group	Used to create list of items with a check-box and allow the user to select multiple check-boxes in run time. This control consists of Text label elements, Checkbox Group component and container. Double click the text label element to edit the text.	Id: Specifies the unique ID of the Selector-Checkbox Group control. Checkbox List Reference: The reference JSON array or a reference variable which returns a JSON array to render the check-boxes. Name: The key in the individual JSON object of the JSON array specified in Checkbox List Reference that is displayed as name of the check-box. Value: The key in the individual JSON object of the JSON array specified in Checkbox List Reference that is taken as the value when the check-box is checked. Selected Boxes Reference: The selected checkboxes are returned as a JSON array with objects to this reference. Each object includes Name and Value attributes of the check-boxes if specified, else includes only Name. Readonly: Select this check box to use the UI control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Value Change or Custom Event.
Selector-MultiSelect	Used to allow selecting more than one option from a drop-down list. Text label element, Multi Select component and container.	Id: Specifies the unique ID of the Selector-MultiSelect control. Options List Reference: The reference JSON array or a reference variable which returns a JSON array to render the options. Name: The key in the individual JSON object of the JSON array specified in Options List Reference to show as option name in the options list. Selected Options Reference: The selected options are returned as a JSON array with objects to this reference. Each object includes all the attributes specified in Reference. Label: The text to display as label of the control. Readonly: Select this check box to use the UI control as a non editable field. Tooltip: The text to display on hovering the mouse over the control.
Selector-Radio Group	Used to group together two or more radio buttons. A radio button is used to let the user choose only one of a predefined set of mutually exclusive options. This control consists of Radio Group component and container.	Id: Specifies the unique ID of the Selector-Radio Group control. Radio Group List Reference: The reference JSON array or a reference variable which returns a JSON array to render the options. Name: The key in the individual JSON object of the JSON array specified in the Radio Group List Reference that is shown as the name of the radio button. Value: The key in the individual JSON object of the JSON array specified in the Radio Group List Reference that is taken as value of the selected radio button. If not specified, returns the complete object for the corresponding radio button from the Radio Group List Reference. Selected Radio Reference: All the keys in the selected option are returned as a JSON object to this reference. If the value is empty and mapped with the key, then the value of key is returned in this reference. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Value Change or Custom Event.
Selector-Rating	Used to direct the user to visualise and interact with a star rating bar. This control consists of Rating component and container.	Id: Specifies the unique ID of the Selector-Rating control. Reference: The count of the selected stars in the rating is returned to the variable specified as reference. Size: The slider to choose the size of rating control. Number of Stars: The number of stars to display in the rating control. The default value is five. Selected Starts: The number of selected stars to display in the rating control. The default value is three. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control.
Selector-Selectbox	Used to create a drop-down list and let the user select an option from the list of choices. This control consists of Text label element, Select Box component and container.	Id: Specifies the unique ID of the Selector-Selectbox control. Options List Reference: The reference JSON array or a reference variable which returns a JSON array to render the options. Name: The key in the individual JSON object of the JSON array specified in Options List Reference that is shown as option name in the options list. Value: The key in the individual JSON object of the JSON array specified in Options List Reference that is taken as the value of the selected option. If not specified, returns the complete object for the corresponding option from the Options List Reference. Selected Option Reference: All the keys in the selected option are returned as a JSON object to this reference. If the value is empty and mapped with key, then the value of key is returned in this reference. Lable: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Selection Change or Custom Event.
Selector-Slider	Used to select from a range of values by moving the slider thumb. This component consists of text label and Slider component. Double click the text label to edit the title of the slider.	Id: Specifies the unique ID of the Selector-Slider control. Reference: The reference variable which returns the value of the slider position when it is moved. Inverted: Select this check-box to invert the direction of the slider. By default the slider moves from left to right. If you select Invert, the slider moves from right to left. Min Value: The lowest or starting value of the slider. For example, 0. Max Value: The highest or ending value of the slider. For example, 100. Step Size: The value that the slider moves in each step. For example, 10. Intervals: The intermediate points to display between two steps. Disp.Type: Specifies how the value of the slider is displayed. Available options are Thumb Label and Value Box. Thumb Label displays the slider value in a balloon at the selected step. Value Box displays the slider value in a text box to the right side of the slider. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Value Change or Custom Event.
Selector-Slide Toggle	Used to provide on / off control that the user can toggle by clicking or dragging. This control consists of Slide Toggle component and container.	Id: Specifies the unique ID of the Selector-Slide Toggle control. Reference: The reference variable which returns the current status of toggle in the form of true or false. Off Label: The text to display as label of the toggle button when the status is set to off. On Label: The text to display as label of the toggle button when the status is set to o. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Turn On, On Turn Off or Custom Event.
Selector-Spinner	Used to provide a drop-down list that allows users to select one value from a set. This control consists of Text label, Spinner component and container. Double click the text label to edit the title of the spinner.	Id: Specifies the unique ID of the Selector-Spinner control. Option List Reference: The reference JSON array or a reference variable which returns a JSON array to render the options. Name: The key in the individual JSON object of the JSON array specified in Options List Reference. Selected Options Reference: The variable that takes the value of the option selected in the spinner. Label: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control.
Signature Pad	Used to capture the input from the user in the form of drawing over screen and convert that input to an image in .png, .svg or .jpg format. User can either download the image or bind to other image controls.	Id: Specifies the unique ID of the Signature Pad control. Image Reference: The variable that takes the base64 encoded string of the saved image.
Text-Area	Used to add text fields that allows the user to enter text. This fields can allow single or multiple lines of text. This control consits of Text Area component.	Id: Specifies the unique ID of the Text-Area control. Reference: The variable that stores the string value of text area. Label: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Key Up, On Focus Loose or Custom Event.
Text-Date	Used to enter the date through text input or to select date from the calendar. This control consists of Datepicker component and container.	Id: Specifies the unique ID of the Text-Date control. Reference: The variable that stores the string value of text date. Target Format: Specifies the format of the date to display in the UI control. Select an option from the drop-down list. Label: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Date Input, On Date Change, On Key Up, On Focus Lose, or Custom Event.
Text-Date Range	Used to select both from date and to date within one control. This control consists of DateRangePicker component and container.	Id: Specifies the unique ID of the Text-Date Range control. Begin Date Reference: The variable that stores the string value of from date. End Reference: The variable that stores the string value of end date. Target Format: Specifies the format of the date to display in the UI control. Select an option from the drop-down list. Close After Selection: Closes the date-picker pop-up after selecting both the from date and end date. Label: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control.
Text-Email(Clearable)	Used to add the email validator. This controls validates email address to check whether the text that user enters is as per the defined syntax or not. This control consists of ClearableText(Email) component and container.	Id: Specifies the unique ID of the Text-Email (Clearable) control. Reference: The variable that returns the value entered in the control. Validation Message: The validation message to display if the value entered in the control is not in the specified format. Label: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Click or Custom Event.
Text-Input	Used to allow the user to enter input data in run time. This control consists of Text component and container.	Id: Specifies the unique ID of the Text-Input control. Reference: The variable that stores the string value of text input. Label: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Key Up, On Focus Loose or Custom Event.
Text-Label	Used to specify the label for a UI element. This control consists of Label component only.	Id: Specifies the unique ID of the Text-Label control. Reference: The text or reference variable or combination of text and reference variable in concatenated format. When the reference contains only text that you want to display it as is in runtime of the app, enter the text within ' ' (single quotes). For example, 'Welcome to App World'. When the reference contains text and a variable, enter the text within ' ' (single quotes) and the reference within { } (curly braces). For example, 'Hi {User}, your insurance claim is approved.' where User is reference variable specified in another UI control. When the reference contains only variable enter only the variable name. For example, User. Tooltip: The text to display on hovering the mouse over the control.
Text-Number(Clearable)	Used to allow the user to enter only the numbers. This control consists of ClearableTextNumber component and container.	Id: Specifies the unique ID of the Text-Number(Clearable) control. Reference: The variable that stores the value of the input. Label: The text to display as label of the control. Maximum: The highest value allowed to input. For example, 9999. Minimum: The lowest or starting value allowed to input. For example, -9999. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Click or Custom Event.
Text-Password	Add this element to let the user securely enter a password. The Text Password element is a one-line plain text editor control. This control consists of Password component and container.	Id: Specifies the unique ID of the Text-Password control. Reference: The variable that stores the string value of text password. Label: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control. Actions: Launches the script designer to define the actions to perform in the event of On Key Up, On Focus Loose or Custom Event.
Text-Telephone	User to enter and validate international telephone numbers. This control consists of Telephone component and container.	Id: Specifies the unique ID of the Text-Telephone control. Reference: The variable that stores the value entered in the control. Initial Country: The flag of the country to show as default value. Select a country from the drop-down list. Custom Placeholder: The text to display as label of the control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control.
Text-Time	Used to enter the time through text input or to select from the time picker. This control consists of Time Picker component and container.	Id: Specifies the unique ID of the Text-Time control. Reference: The variable that stores the selected time picker value in the form of string. Hour Step: Specifies how many hours to move up or down when the user clicks the spinner. For example, 1. Minute Step: Specifies how many minutes to move up or down when the user clicks the spinner. For example, 1. Second Step: Specifies how many seconds to move up or down when the user clicks the spinner. For example, 1. Size: Specifies the size of the control to display in UI. Select Small, Medium or Large from the drop-down. Meridian: The meridian button to display AM or PM. Select this check-box to display the time in 12 hour format. If not select the time displays in 24 hour format. Seconds: Determines whether to show the seconds input in the control or not. Select this check-box to allow seconds input. Spinners: Determines whether to display the spinners in the control or not. Select this check-box to display the spinners in the control. If not selected the user must manually enter the time in the UI control. Readonly: Select this check-box to use the control as a non editable field. Tooltip: The text to display on hovering the mouse over the control.