Template

ProyectoPrueba.zip

Intro

Next, as an example, it will be shown step by step how to create, edit and delete a project and its files in the Forms Designer.

We will also see an example of the logic of how to load data in a form of a Combo Box control and its view in the portal.

Steps to create Projects

To open the Forms designer it is necessary to enter the portal with supervisor permissions, in the menu we will have the Form Designer option.

Crear Proyecto

After entering the portal with Supervisor credentials and opening the designer, it will take us to a tab like the following. Here you can create a new Survey, a new Form or Open one.

To create a new one, the user must write its name and choose one of the two options.

Open

If the user wants to open an already created project, he only has to search for it by its name and click on it.

When creating a new project, the main screen will be as follows.

Files that are created by default in the project.

.SQL

It will create a .SQL file by default, the function that this file fulfills is to be able to relate everything that the form of a Database needs, from creating tables, Insert, etc.

.JS

A .JS file that is where the logic of the form will go in its corresponding JavaScript language.

Config.html

Another of the files that will be created for us is config.html, it is in charge of relating all the configuration of the form, from the necessary plugins, JS, style sheets, etc.

.HTML

It will also create an HTML for us, which will be the interface of the form.

.JSON

And finally, two files with this extension will appear, which are used to internationalize the Form. Apart from these two in English and Spanish, they can be created for other languages.

HTML View Example

Open

By default, with the HTML Code View option.

Project Files

Add Files

When we want to add a file, it will give us the option to add .js .sql .css and .json files.

In this case, we will add a .css file by clicking on the New File icon.

A pop-up will appear where you must first complete the name and when choosing the type it will be created.

Add to .config file

The result of our change will be the one shown in the image below, and we will notice that the file name will be in red, this is because changes were made, and they have not been saved.

Add .JSON files

To create other translation files, the file must be named PROJECTNAME-es (Spanish), PROJECTNAME-en (English), PROJECTNAME-pt (Portuguese). Inside the file should contain the following lines:

One of the biggest advantages of using JSON is that it can be read by any programming language, as our initial code structure shows. To assign a value to a name, we must use the colon ':'.

This separator is the equivalent of the equals ('=') in any language.

On the other hand, JSON objects are identified between braces, an object can be in our case a fruit or a vegetable.

In the file PROJECTNAME.js the following lines will appear:

In order to use internationalization, the first line must be uncommented and deleted.

Delete files

To delete files you must have the file to delete selected, and select the trash can icon, a pop-up will pop up with the option if you want to delete.

In the same way, but positioned in the project, the project can be deleted.

Load files

We also have the option to upload a file to the project.

You can upload .JS .CSS .SQL files, also images, .JPG .PNG etc.

For example, we can upload a CSS that I make in another GUID and I want to have it in this designer project.

Edit Project

Example Combo Box, Integra Framework, and its view in the portal

Next, we will see an example of how to add the system agents in a combo.

We add a Label controller for the title of the form, below a Combo Box will be added where the list of system agents will be housed, the controls will be added by dragging towards the container.

Automatically, when we add an element in the .html design view, its respective code will be added, this being a div with its information for each element.

If we select an element and go to the HTML code view, it will show us selected the line in which the code of this element is found, as shown in the following image.

Through this view, we can also add edit, and delete elements.

Returning to the previous view, double-clicking on the combo box will open its properties, we will give it an identifier which we will call cmbAgents to be able to host the list of system agents through .js code.

Now that we have the combo box with an identifier, we can start with the logic in the project's JS file.

In the Translation box, the user will add the value that was written in the combo box translated to the desired language.

The default portal has a JS file that contains methods that connect to the Web services through AJAX calls, the JS Name is Integra Framework.

The Integra Framework methods will return JSON data types.

In our JS logic, we will use Integra Framework methods (UC_getAgents, UC_fullSelect) getAgents will return the agents, and fullselect will help us add the agents to the combo.

It's simple, we'll start the combo by asking if the session variable has data (the session variable helps us to avoid having to consult the server every time). If it does, we'll use the fullselect with the array saved in the session, otherwise we'll call getAgents method to fetch the agents.

And with the getAgents response, we will fill the combo and save the data in the session variable.

We will deploy it so that the data is saved on the server.

View from the Portal

The next thing will be to assign a form to a campaign to see it from the portal, you must enter the portal through a supervisor user to enter campaigns and assign the form to one.

We must also assign the agent with which we are going to enter to see the form for the campaign.