Introduction

On this document we are going to explain the details about the forms designer and its functions.

When entering, the main window will be seen, where you can create a new project or edit an existent one.

Open

To create a new project enough with enter a new name and press the button "Create new".

On the left margin, you can see a menu. This menu contains all the Projects in the system, The actual project (the one that we are working on) with its files, and the controllers that will be used when designing the form.

General Menu

On the left of screen can see the general menu that divides in three parts:

Controls

Projects

On the top left of the screen we can see the following buttons:

Open

From left to right:

1- Creates a new project.

2- Creates a new file.

3- Upload a file.

4- Delete file or project.

On the top right sector of the screen we can see the following buttons:

From left to right:

1- Version control of the project.

2- Save project or file (Deploy).

3- Download project .

When opening the main .html file of our project, on the top margin of the screen will appear the following buttons:

From left to right:

1- Change view (from design to code or vice versa).

2- Delete element.

3- See hidden elements.

4- See not hidden elements.

5- Align elements to the left (this will align the selected element to the one that is far on the left).

6- Align elements on top (same as left but will align to the far element on the top).

7- Copy elements.

Controlers menu

This menu contains a list with all the controllers or elements that will be used on the creations of the form.

To be able to use on the forms you must click on the desired controller and drag it to the container where we want to put it.

Properties menu

You can open the properties menu by double clicking an element or by having one selected and clicking the arrow on the top right corner of the screen.

On this menu we can modify the properties or atributes of the selected element like its identefier, vertical or horizontal position, height and width and many more.

Uses of the controls

All controls are inserted on the same way. By dragging them into our form.

Container

The container control are a few boxes or rectangularspaces. On it we can insert HTML content. Its main utility is visual, by allowing to organize and to give a structure and design to the form.

By default the html already has a container. If we want to use more than one container we need to delete or reduce the existing container because one container can not be on another.

The result of dropping the container.

Text field

Whether his diriver is a text box,

If we double click it we can open the properties (or with the arrow on the top right corner), there we can give it an identifier, you can change position and size, add a placeholder, this adds a default word on the text field. You can also give a tabindex, this is an integer that indicates if the element can be focusable or not. A tooltip text that will pop-up a small text when hovering with the mouse. Besides on the properties we have a checkbox that makes the element hidden.

Other functionality in the properties is to add an event to the element. On the next image we can see the events that can be added to the element by always putting a reference name.

Password

The difference on the textfield is that this will use a password and so we want that, when the user is typing, he can see asterisks (*) instead of the real password. 

Label

Represents an etiquete for an element on a user interface, on this case it will be used as a text.

ComboBox

The next control is a list of options, it is used to show data on a deployable box.

 On its properties it can be assigned an identifier, change positions and size. Besides we can hide the element using a checkbox.

Other functionality in the properties is to add an event to the element. On the next image we can see the events that can be added to the element by always putting a reference name.

ListBox

The ListBox control allows the user to use one or more elements on a predefined table. The difference with the ComboBox is that it can show and allows to select several ammount of elements.

 On its properties it can be assigned an identifier, change positions and size. Besides we can hide the element using a checkbox.

Other functionality in the properties is to add an event to the element. On the next image we can see the events that can be added to the element by always putting a reference name.

TextArea

This control defines a text with multiple lines on a text area. On its properties you can add an identifier, you can change positions or size, add a placeholder, this allows to put a default word on the text box. To give a tabindex, this is a  number that makes the element focusable. You can also add a tooltip that appears as a pop-up when hovering with the mouse over the element. And you can make the element hidden with the hide element checkbox.

Table

This controller allows to create a table. On its properties you can add an identifier, you can change positions and size, besides you can make the element hidden by clicking the Hide element checkbox. On the bottom of the properties menu you can add columns to the table.

CheckBox

Indicates if a condition is enabled or disabled. Normally it is used to represent a Yes/No or True/False to the user. This controller will be checked as default. In case that wanting to uncheck the element it must be done by code view and modifying its properties.

In its properties you can add an identifier, change positions and size, you can add a defualt text and you can set the element as hidden by clicking on the checkbox. 

Calendar

This control will load the calendar type element.

On its properties you can add an identifier, change positions and size and to add a default text. Besides the checkbox allows to hide the element.

Button

This control will create a button.

On its properties you can add an identifier, change its position and size, you can change its style with a value (color) and a default text. Besides we will have a checkbox to hide the element and an icon.

Other functionality of the property is to add an event. On the image we can see all the elements that can be added, always putting a reference name.

Upload file

Its functionality is to upload local files to the user when using the form.

On its properties you can add an identifier, change position and size, a placeholder to set a default word on the text box and to hide the element by using the checkbox.

Image

This controller allows us to upload an image to the form.

Icons

This controller allows us to upload an icon.

Personal

Chart container

This container adds a div on the html to be able to create charts.