a. Forms Example
Template
Introduction
Then as an example it will be shown how to create, edit and delete a project and its files forms designer step by step.
We will also see an example of logic as data in a form to charge a ComboBox control and view the portal.
Steps to create Project
To open the Form Designer it is necessary to log in the portal as a supervisor, in the menu we will have the option of designing forms.
Create Project
After entering with Supervisor credentials to the portal and open the designer, it will take the user to a tab as the following.
Here a new Survey, new Form or Open an existing one.
In order to create a new project, the user must write its name and pick a option.
If the user wants to open a project that is already created, the following pop-up will appear.
When the new Form is created, the principal screen its like this.
Files created by defect in the new project.
.SQL
One .SQL default file is created, the role of this file is to be able to relate all you need the form of a database, form creating tables, Insert,etc.
.JS
A .JS file is where the logic will form in the corresponding JavaScript language.
.config.html
Another file that created us is config.html, it is responsible to relare all the configuration of the form, from plugins needed, JS, stylesheets,etc.
.HTML
We also create an HTML, which will form the interface.
.JSON
And finally a appcache file , two files with this extension will appear, which ones are used to Internationalise the Form. Apart from the English and Spanish ones, more can be created for different lenguages.
Note: The only files that come with default content will .html and .json.
Example of HTML design view
By default with the option to view HTML code.
Project Files
Add Files
When wanting to add a file will give us the option to add .js .sql .css and .json.
In this case we add a .css file by clicking New File.
A pop-up will appear where the user must wirte the new files name and pick the file's type to create it.
It will add a .css file.
Add the file to .config
IMPORTANT: Every time a new file is created, the user MUST add its link when its a .css file or its script when the file is a .js, to the config file. To avoid future errors or wrong functioning, preferably add it under the line that says the following:
The result of our change is the one in the following image and notice that the file's name is red, this is because changes where made and where not saved yet.
Add .JSON Files
To create other translation files, the file must be called PROJECTNAME-es (Spanish), PROJECTNAME-en (English), PROJECTNAME-pt (Portuguese). Inside the file must be the following lines:
{ “PROJECTNAME”: { "KEY1":"Value1", "KEY2":"Value2" } }
One of the most important advantajes of using JSON is that it can be read by any programming lenguage. As our initial structure of code shows, to assign a value to a name the user writes ":", this is the separator representing the equal simbol "=" of every lenguage.
Apart from that, JSON objects are identified between "{ }", an object can be in this case a fruit or vegetable.
In the file PROJECTNAME.js will appear the following lines.
To use the internationatization, the user has to un comment and delete the first line.
Delete Files
To delete a file, this one must be selected, and then press on the bin icon. A pop-up will appear with the option of proceeding with the action or not.
The same way, but being on the project file, it can be deleted.
Upload File
We also have the option to upload a file to the project. .JS, .CSS, .SQL, files can be uploaded also images .JPG, PNG, etc.
For example, upload a .CSS file that makes another GUI and you want in this project.
Edit Project
ComboBox example, Integra Framework and its view in the portal
We will see an example on how to add agents from the system in a combo.
Add a label driver for the title of the form, underneaththere will be a combo box where the list of system agents will stay, the controls are added by dragging the container.
If we take a look at the view of html code,for each element a div will be added, in this case we add a label and a select (combo box), in the following image the added code is selected.
By this view we can also add, edit and delete items.
Returning to the previous view, by double clicking on the combo box its properties open up, we will give an identifier and call it cmbAgents, this way we can save through js. code the list of agents in the system.
Once the comboBox is set with ID we can start with the js file logic in the project.
The portal by defect contains a .js file that has methods, this last ones are connect with the webService through ayax calls, the .js name is Integra Framework.
Integra Framework methods will return Json data types.
Examples of the methods can be found in the Integra Framework documentation. Functions Integra Framwork ←
Inside the logic of our .js we will use methods from Integra Framework (UC_getAgents,UC_fullSelect),the getAgents method will return agents, and the fullselect method will help us adding agents to the combo.
Summarising, initialise the combo asking if the variable contains data(the session variable comes in handy so we do not have to consult the server everytime we need to), if it does we will use a fullSelect with the array already saved in the session, otherwise, call the getAgents method to get the agents.
With the response of the getAgents method we fill the combo and save it in the variables data session.
Deploy it so the data stays in the server.
View from the Portal
The next step is to assign a Form to a campaign in order to see it from the portal: log in the portal as a supervisor user and then go into campaigns and assign a Form to one of them.
We must also assign to the campaign the agent with which we will enter to see the from.
For examples of other controls download the template that is at the beginning of the documentation.