show / hide menu

Basic Controls in ClaySys AppForms

You can find the controls in ClaySys AppForms in the Toolbox tab of the designer.The toolbox has six different sections (see Figure1)

Figure 1

Each section has a set of controls which can be used in the form for designing the form. The most used controls will be available under the standard controls section.

● Standard Controls

Figure 2

The topics in this section describe how to work with the standard controls that appear on the Standard tab of the ClaySys AppForms Toolbox. These include controls that enable you to display text-boxes, buttons, lists, images, boxes, hyper-links, labels, etc, as well as more complicated controls that work with static and dynamic data.

1.1 Auto-complete Text-box

The Auto-complete text-box provides suggestions while you type into the field. This control enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Figure 3

1.2 Button

The Button control enables the user to associate certain actions that needs to be performed form when you click on it. In ClaySys AppForms the button can be used for executing actions like save, update, delete, close form or navigate to a different form, etc.

Figure 4

1.3 Check-box

Check-box is a square box where the user can click to say that they want or have a particular setting. Check boxes are commonly used when more than one option may need to be selected. Checking the box would enable that option and un-checking it would disable it.

Figure 5

1.4 Check-box group

A CheckBox Group is a control that provides a means of displaying a list of items (text, numbers, dates or whatever) where each item represents a check-box. The user can select multiple check-boxes in the list. The value member of the selected items will be combined together as a string with a specific separator character.

Figure 6

1.5 Combo-box

A Combo-box is a control that provides a drop-down menu for displaying a list of items text, numbers, dates or whatever. The user can select any value from the drop-down list and value member of the selected item will be saved to the database.

Figure 7

1.6 Date-picker

The date-time-picker allows you to display a calendar control from where the user can select the date. This control can also be extended to capture the time(Hour:Minutes:Seconds).

Figure 8

1.7 File-upload

File-upload control is a combination of a text box and a browse button that enable users to select a file to upload to the server.

Figure 9

1.8 Hyper-link

You can configure text or a graphic as a hyper-link that opens a menu or window, or a destination inside or outside the application.

Figure 10

1.9 Image

A control on a form that contains an image. The image control can have an image embedded to the ClaySys AppForms or can use an on-line hosted URL to display the image.

Figure 11

1.10 Image Button

The Image Button control enables the user to associate certain actions that needs to be performed form when you click on it, this button allows the user to have an image instead of the regular text label. In ClaySys AppForms the Image button can be used for executing actions like save, update, delete, close form or navigate to a different form, etc.

Figure 12

1.11 Label

The Label control is used to display the caption for any control in the form. Each data entry control in the form will require a caption to display the description which will help the user identify the purpose of the control in the form.

Figure 13

1.12 List-box

List-box is a collection control that allows the user to select one or more items from a list of options filled in it.

Figure 14

1.13 Mask Editor

Mask editor is a type of text-box control and we can set different formats for the input in the mask editor control. In the Mask Format column of the property window we can set the format (using ‘#’ symbols to represent the values) in which the value to be appeared.

Example: if you want to display a phone number in 044-2569896 format then you need to set the mask format as ###-#######

And when you are entering the values it will display as below

Figure 15

1.14 Multi List-box

This is a variant of the ListBox in which multiple items in the list can be selected. Its a combination of two list boxes and two selection buttons. When you select one item and click the right arrow button will move it to the second list box from the parent list.

Figure 16

1.15 Password Box

For editing text we have text-box control in AppForms and for entering passwords in the form that you have designed we are using password box control instead of text-box control. The text we have entering in a password box field will be converted to ‘dots’.

Figure 17

1.16 Radio button

The radio button control is used to make a selection or decision by checking any single value from a number of options. We can make a set of radio button controls to a radio group when a single choice is preferred.

Figure 18

1.17 Radio button group

The radio button control is used to make a selection or decision by checking any single value from a group of options.

Figure 19

1.18 Text-box

A text-box control is used to entering text values in the form.

Figure 20

1.19 Timer

The actions which is written in the trigger of timer control will repeatedly executes when the time is set (in seconds) in the ‘Interval’ property of the timer control.

● Validation Controls

These include controls that enable you to validate the data entered in the form before you allow them to be updated to the different data-sources configured in the form. The validation can be at the form level or the field level.

Figure 21

2.1 Validation Control

Validation control will validate the form and it displays the validation that we have set for other controls.

2.2 Captcha control

The Captcha control, which is a validation tool used to verifying that the data you are receiving is coming from an actual human being and not a robot or script. A CAPTCHA is a way of testing input to ensure that you’re dealing with a human.

Figure 23

Group controls

These include controls that act as containers for other controls.

Figure 24

3.1 Border control

Border control is used to group a set of controls or give an outer border to the entire form to give a professional and modern look to the form. We can set the border color, theme, thickness etc. to make the form more attractive and professional in look.

Figure 25

3.2 Sub-form control

Sub-form control will act as a form inside a form.

Whenever there is different sections in the form and you need to show them up only in some criteria you can place a sub-form and put together all the controls coming in that section and set the visibility of sub-form to ‘True’ whenever it wanted to display. And sometimes for smooth and perfect designing of forms we are using sub-forms to develop a perfect UI for the form.

3.3 Tab control

By using a tab control, an application can define multiple forms for the same area of another form. Each form consists of a certain type of information or a group of controls that the application displays when the user selects the corresponding tab.

Figure 26

3.4 External form control

By using this control multiple numbers of forms can be displayed as it is within the single form. Using External Form, we can perform the actions such as ‘repeat’, ‘remove’ and ‘view change’ of the form and there by the performance of the current form can be increased.

● Data controls

These include controls that enable you to display read only grid (search), data entry grid (dynamic grid), form datasource, chart control etc that work with static and dynamic data.

4.1 Chart control

Chart control is used to represent the data in a pictorial format. By using this control you can display the data in 7 different ways (see figure 27)

Figure 27

4.2 Data-source control

The data-source control is used to configure the form data source in the form. Just drag and drop the control to the form and then go to the ‘DataSources’ tab in the left pane of the AppForm designer you can see that the form data source that you have created recently.

4.3 Dynamic grid control

The dynamic grid control allows the user to display a data entry grid where they can have different controls in each column. We can perform all basic data operations (insert, select, update, delete) with the dynamic grid control.

4.4 Lookup control

The lookup control can be used in the place of a combo-box or auto-complete text-box. This control will allow you to search through the data-source and will allow you to present user with more than two related columns in the list. This is similar to the people picker control where you can search the user by the name in the pop-up.

TheDataSources supported by the lookup control areSharePoint and MS SQL

4.5 People Picker control

The people picker control is used to select users and groups. Basically the People Picker control contains a text box and two buttons, “Check Names” and the “Browse” button. “Check Names” button is used to validate the user’s entry whereas the “Browse Button” gives us an interface to do a more advanced search on the whole directory.

4.6 RichTextBox control

This is text editing control which is comes with some additional features to edit the text, changes the format of the text and set the other properties within the control.

4.7 Search control

The search control allows the user to display a data grid with number columns. It can be configured to display the data from SQL tables, SharePointlist etc. users can view the data by page wise and the entire data in the grid can be export to an Excel sheet with the function Export to Excel.

Navigation controls

These include controls that can be used for the navigation between the forms configured in AppForms.

Figure 28

5.1 Tree view

The tree view control used to set navigation between forms and it will display a menu in a tree structure and it should have a parent – child relationship between the nodes.