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.
...
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.
...
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:
...
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.
...
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.
...
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.
...