FormView

FormView renders html form that allows a user to enter data that is sent to a server for processing. The following is a simplest example of a form:

function main(arg)
{
   var form = new FormView();  
   return [form];
}
main(arg);

FormView - Empty form

An empty form has only Run button. When you click it, a HTTP GET will be sent to a server. You can set a method of a form by using the method parameter.

function main(arg)
{
   console.log('The request method is ' + arg.method);

   var form = new FormView({method:'post'});  
   return [form];
}
main(arg);

Now, the form sends a HTTP POST request to a server. The code above displays a post form and logs a method of the request. You can notice that when you first time open the page, the method is get, but when you click the Run button, the method is post. You can also combine both types of a form. The following example displays two forms, one below the other.

function main(arg)
{
   console.log('The request method is ' + arg.method);
   var getForm = new FormView({
      method:'get',
      title: 'Get Form'
   });

   var postForm = new FormView({
      method:'post',
      title: 'Post Form'
   });
   
   return [getForm, postForm];
}
main(arg);

FormView - Two forms

Ok, so actually, how to display a input and process information?

function main(arg)
{
   console.log('The request method is ' + arg.method);
   
   if (arg.method == 'get')
   {
      console.log('GetInput is ' + arg.queryString.GetInput); 
   }
  
   if (arg.method == 'post')
   {
      console.log('PostInput is ' + arg.form.PostInput); 
   }
  
   var getForm = new FormView({
      method:'get',
      title: 'Get Form',
      controls: [{name:'GetInput'}]
   });

   var postForm = new FormView({
      method:'post',
      title: 'Post Form',
      controls: [{name:'PostInput'}]
   });
   
   return [getForm, postForm];
}
main(arg);

When a user triggers a HTTP GET request (a form with the get method), the content of a form is added to the query string and a value can be accessed via arg.queryString.{control_name}. In case of HTTP POST request (a form with the post method), value of a control is sent to a server in a body and can be accessed via arg.form.{name}.

Controls

FormView supports all the standard controls. Let’s look how to use them.

TextBox

function main(arg)
{
  var formView = new FormView({
    controls: [
      {
         name:'TextBox',
         type:'input',
         label:'Text Box',
         value: 'This is my text box',
         readOnly: false,
         description: 'You can enter here any text',
         error: 'In case something is not ok'
      }
    ]});
  return [formView];
}
main(arg);

FromView

CheckBox

function main(arg)
{
  var formView = new FormView({
    controls: [
      {
         name:'CheckBox',
         type:'checkbox',
         label:'Check Box',
         value: true,
         readOnly: false,
         description: 'You can check me out',
         error: 'In case something is not ok'
      }
    ]});
  return [formView];
}
main(arg);

FromView

Select

function main(arg)
{
  var formView = new FormView({
    controls: [
      {
         name:'Select',
         type:'select',
         label:'Select Option',
         value: 'Two',
         options: ['One', 'Two', 'Three'],
         readOnly: false,
         description: 'You can select any of my option',
         error: 'In case something is not ok'
      },
      {
         name:'Another Select',
         type:'select',
         label:'Select Another Option',
         value: '2',
         options: [{value: 1, text: 'One'}, {value: 2, text: 'Two'}, {value: 3, text: 'Three'}],
         readOnly: false,
         description: 'You can select any of my option',
         error: 'In case something is not ok'
      }
    ]});
  return [formView];
}
main(arg);

FromView

Date

function main(arg)
{
 var formView = new FormView({
   controls: [
     {
        name:'Date',
        type:'date',
        label:'Date control',
        value: new Date(),
        readOnly: false,
        description: 'You can enter date here',
        error: 'In case something is not ok'
     }
   ]});
 return [formView];
}
main(arg);

FromView

DateTime

function main(arg)
{
 var formView = new FormView({
   controls: [
     {
        name:'Date',
        type:'datetime',
        label:'DateTime control',
        value: new Date(),
        readOnly: false,
        description: 'You can enter date and time here',
        error: 'In case something is not ok'
     }
   ]});
 return [formView];
}
main(arg);

FromView

Layout

Each element of the controls array is a row.

function main(arg)
{
  var formView = new FormView({
    controls: [
      {name:'Row1'}, // first row with only one control
      [{name:'Row2_1'},{name:'Row2_2'},{name:'Row2_3'}], //second row with 3 controls
      [{name:'Row3'}, null] // another row with control that takes only half screen
    ]});
  return [formView];
}
main(arg);

FromView

Validation

All information entered by a user are sent to a server where can be validated. Depending on http method, the values can be accessed via arg.form.{name} or arg.queryString.{name}. There are two ways to show validation errors. You can add an error to the global array errors or use error property of a control.

The following is an example of using the errors global array.

function main(arg)
{
   var formView = new FormView({
     method: 'post',
     controls: [{name: 'name', value: arg.form.name}]
   });
  
   if (arg.method == 'post')
   {
      if (!arg.form.name)
      {
         this.errors.push('Name cannot be empty.');
      }
   }
   
   return formView;
}
main(arg);

FromView