TTAI Form Editor

Download the TTAIFormEditor library and embed it in your project to allow your web application create customized form. The library is open source and under GPL open source license.

Sample Project

In order to facilitate your development, we provide the sample project as a reference. You can click the DEMO button to view and have a try the TTAI Form Editor. It is a basic usage of the TTAI Form Editor. If you want to customize this editor or know more information about it. Please go to DOCUMENTATION. In this sample project, you will see three parts: Editor, JSON Output, HTML Page Render. The corresponding javascript implementation are as below:

Editor

Editor allows you to use existing elements to create your own form. If you need extra control/element, you can create your own elements. The detailed implementation and function can be found in the DOCUMENTATION section. If you use the sample code below, in your web page, you will find a TTAI Form Editor is generated for you to use

// Initialize a new form editor instance
var formEditor = new TTAIFormEditor();            

// Prepare the editor and put the editor to a container
formEditor.renderEditor("form_editor");

// Set up the callback function when the creator try to save the form layout
formEditor.didSave = function(formLayouts, formOptions){                
   console.log(formLayouts);                
   console.log(formOptions);
};

JSON Output

JSON Output is a way for the developer or TTAI Form Editor creator to serialize the layout of the form. So that, we can use the json to save/restore our form.
There are several ways to get the json data of the form. They are listed as below:

// Initialize a new form editor instance
var formEditor = new TTAIFormEditor();            

// Prepare the editor and put the editor to a container
formEditor.renderEditor("form_editor");

// Output current layout JSON data, this is the output of the entire form
var jsonString = formEditor.exportFormJSON();            
console.log(jsonString);

// Get layout objects,individually, form layout, 
// form controls, form options, and build-in element options
var layout = formEditor.layout;
var controls = formEditor.controls;
var formOptions = formEditor.formOptions;
var options = formEditor.options;

// Load the form layout from json string
var formLayouts = JSON.parse(jsonString);           
formEditor.loadForm("Your Editor Container ID", formLayouts);

HTML Page Render

After we finish editing the form and store the form structure, we need to render the html page from the form json string for our client to visit and fill. The code can be written down as below (See DOCUMENTATION section to find more flexible implementation). After user finishes filling the form and hit submit button. the didSubmit callback function will be called. In this time, we can make AJAX call to send our data to the server.

// Initialize a new form editor instance
var formEditor = new TTAIFormEditor();            

// Render the form json string to the HTML container
var formLayouts = JSON.parse(jsonString);
formEditor.exportHTML("form_editor", formLayouts, null);

// Set up the listener, when the user click save and submit the form
formEditor.didSubmit = function(data){
  console.log(data);
};