12/31/2015

New* FormGenLib - My JavaScript Library to dynamically Generate HTML Forms (Built-in Support for Bootstrap_v3)

Automatically Generate awesome looking HTML form using minimal JSON options (theme Bootstrap v3)
DEMO
https://shishtpal.github.io/formgenlib/
Released Development Version
contribute to project
Or Request some feature on github

Project is under Development, API may change

Input Types

general
checkbox
file
hidden
radio
select
textarea
text
password

Special Types

List (Allow You to send a list of values)
Set (Choose just one values for a given set of values)
Photo (Upload Photo Widget)
Clearfix
Date
Heading

Form Layouts

Because we are using Underscore Templating Engine, So, We can use Global Functions inside Templates. And some properties are not defined than you can check for them with the help of this special object reference Object.

Memorize Form State

Except Input Type file , Input Fileds can Memorize its State, And to Memorize form State, we are using data-value custom attribute with each input type. And when we render or load saved form from LocalStorage, formgenlib trigger load events, that we used to load value form data-value attribute and inject into that Input Fields.
There is one toolbar to save, clean and load form states.
  • clean - clear LocalStorage
  • save - Save Current Form State to LocalStorage
  • load - Load previously saved form State
    • You can save one state for one form
    • Because we are Using form_key attribute to save Form state into LocalStorage
    • If You want to load saved state from Server (Backend)
    • Then Each Component schema should have either value or values attribute according to their schema.

Example

  • This is sample Javascript code that Generate HTML form for First Time
    • And save to localStorage
  • Next, time Form will loaded from LocalStorage
  • If You want it to re-render HTML Form
    • Then set the value LocalStorage.isClean = "false"
## Example Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
var i = new GenerateForm("#form_container");
var form = {
 form_key: "thisForm",
    action: "/apis/testing",
    method: "POST",
    caption: "Testing Simple Html Form",
    id: "mygenform",
    style: "border:2px solid red;",
    schema: [
  {
      type: "heading",
      cont_grid: [12],
      label: "Simple Hello world",
      label_class: " text-center btn-warning btn-sm",
      style: "",
      control_id: "demoworld"
  },
  {
   cont_grid: [12, 6, 4, 3],
   type: "text",
   label: "Name",
   title: "Your Name?",
   name: "name",
   placeholder: "Your Name ?"
  },
  {
   cont_grid: [12, 6, 4, 3],
   type: "text",
   label: "Email",
   title: "Your Email?",
   name: "email",
   placeholder: "Your Email ?",
   autocomplete: true
  },
  {
   cont_grid: [12, 6, 4, 3],
   type: "text",
   label: "Mobile No.",
   title: "Your Mobile No?",
   name: "mobileno",
   placeholder: "Your Mobile no. ?"

  },
  {
            type: "date",
            cont_grid: [12, 6, 4, 3],
            cont_style: "",
            label: "Admission Date",
            title: "Admission Date?",
            name: "admdate",
            control_id: "admdateID",
            style: "",
            placeholder: "01/05/2014",
            value: "05/08/1992"
        },
     {
      type: "clearfix"
     },
     {
      cont_grid: [12, 6, 4],
      type: "select",
      label: "Gender",
      title: "Gender?",
      name: "gender",
      control_id: "genderID",
      items: ["00|Other", "01|Male", "02|Female"]
     },
  {
      cont_grid: [12, 6, 4],
      cont_class: "",
      cont_style: "",
      type: "photo",
      label: "Select Photo",
      title: "Your Photo",
      name: "mypic",
      control_id: "myPhoto",
      img_default: "/_assets/img/elect001.png",
      img_alt: "My Photo",
      img_style: "",
      img_id: "myphotoid",
  },
  {
      cont_grid: [12,6, 4],
      cont_class: "",
      cont_style: "",
      type: "list",
      label: "Likes ?",
      title: "What You likes?",
      name: "likes[]",
      control_id: "mylikes",
      items: ["01|Play", "02|Reading", "03|Game"],
  },
  {
   type: "clearfix"
  },
  {
   cont_grid: [12],
   type: "textarea",
   label: "About me?",
   name: "aboutme",
   control_id: "aboutmeID",
   style: "background:cyan;",
   title: "About me",
   value: "Hello World"
  },
     {
      name: "Click",
      value: "Submit",
      control_id: "formsubmit",
      control_class: "btn-primary btn-block",
      style: "",
      type: "submit"
     }
    ]
};
i.config(form);
i.injectFormCompAsNew();
i.listen();

Checkout Project on Github
Thank You.
Posted by at
Labels: , , ,

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )