-
Notifications
You must be signed in to change notification settings - Fork 18
JsForm Dom Layout
The name attribute is used for matching the object structure.
Following form fields are supported:
- input type="text"
- input type="checkbox"
- input type="password"
- textarea
- select
- input type="file" class="blob": blobs will be converted to base64 encoded strings and added to the object. make sure to annotate the input with class="blob". This only works for current browsers (so no IE<10!)
| css class | Description |
|---|---|
| number | will be converted to a number in json |
| integer | will be converted to a number in json |
| percent | the number in the input will be treated as as percentage. When displaying the actual number shown is the saved number*100: shown: 30 -> saved 0.3 |
| emptynull | whitespace/empty will be a "null" in json |
| array | used with data-array="0" to allow creating simple arrays |
| collection | collection handline |
| blob | used with type="file" - in json: base64 |
| jsobject | this means the input actually contains a jsobject (in data.pojo). it will be used as-is. |
| object | uses the pattern in data-display or the render function in data-render to render the input field based on the object. |
| setObj | using this on a field just sets the object |
| transient | use this to ignore the value when calling get (works on inputs and collections) |
| selectcollection | allow filling a collection by selecting the values |
| bool | used for checkboxes/selectboxes when holding a boolean value (true/false) |
| boolean | used for select boxes when holding a boolean value which might be null/empty ("true"/"false"/"") |
| conditional | allows hiding dom elements based on the fields defined in data-show/data-hide |
| templatefield | allows setting of a given attribute with a template string |
You can also add date and number formatting and internationalization - see https://github.com/corinis/jsForm/wiki/Controls for more information,
You can also just display any data by using an element with the class="field":
<span class="field">prefix.field</span>Note: the matching is in the content of the field. A name attribute will not work!
If you use class=field on a div, it allows you display full html without escaping:
<div class="field">prefix.fieldWithHtmlTags</div>Note: you can use class=noescape if you want html in a span!
Note: This is ONLY available if you have hogan.js or handlebars.js included as well
- class="templatefield"
- data-attr: You can set "any" atttribute by specifying the name of the attribute in the data-attr
- data-template: you can access cur (current element in a repeatable) and data (the global data object) using mustache template (you can use [[ or **{{...}}**as placeholder)
<a href="#" class="templatefield" data-attr="href" data-template="http://somelink.com/load/{{data.id}}/{{data.name}}">Click Here</a>
<div class="collection" data-field="data.imageList">
<!-- cur references each element in data.imageList -->
<img class="templatefield" data-attr="src" data-template="http://somelink.com/load/[[cur.id]]/thumbnail.png">
</div>You can also generate the href attribute of links:
<a href="prefix.field" class="field" data-prefix="http://somelink.com/load/" data-postfix="/info">Click Here</div>Or the src attribute of images:
<img src="prefix.field" class="field" data-prefix="http://somelink.com/load/" data-postfix=".png"/>- data-prefix: will be prepended to the field
- data-postfix: will be put after the field
Select boxes can either be pure lookup (i.e. select a string) or more complex object selections.
Often you just want to check if a value is true or false:
<select name="data.active class="bool">
<option value="true">YES</option>
<option value="false">no :(/option>
</select>With bool the default is "false" if not set or really false.
Sometimes you want to force the user to actually enter something. In that case use "boolean":
<select name="data.enabled class="boolean">
<option value="">Please select something</option>
<option value="true">YES</option>
<option value="false">no :(/option>
</select>you can use mandatory to force a selection.
In order to allow a correct object selection you need to specify a lookup field which will me matched.
<select name="data.group" class="object" data-key="id">
<option data-pojo='{"id":1,value:"asdf"}'>some object</option>
</select>The data-pojo can also be set using $("option").data().pojo = {};
You can use the class setObj and it will set the "data().pojo" to the given element. This allows i.e. data lookups in events.
Conditionals allow to hide parts of a form depending if a field exist (exists means non-null, for number > 0, and if boolean non-false).
You can use
- data-show: only show if the value if non-empty and non-false
- data-hide: hide if the value is set
- data-toggle: live toggle based on the value (you can "invert" it by prefixing the value with !). This only works for one single field
This can be done by setting the class conditional and specifying the fields to check in the data-show (meaning: show the dom element if any of the given fields exist) or data-hide (meaning: hide if any of the fields exists).
<input type="checkbox" name="data.active"/> activate Age<br/>
<div class="conditional" data-toggle="data.active">
Age: <input name="data.age" class="number"/><br/>
</div>Note: this also works "life"
For some the default condition will not suffice, so you can specify a callback function passed in the options and referenced through the data-eval:
<div class="conditional" data-eval="myCustomCondition">
Age: <input name="data.age" class="number"/><br/>
</div>And the script:
$("form").jsForm({
conditionals: {
/**
* @param ele {jQuery(dom)} the html element the condition is applied for
* @param data {object} the data object
*/
myCustomCondition: function(ele, data) {
if(data.id)
ele.show();
else
else.hide();
}
}
});Note: when working like this, you have to manually evaluate or specify the fields you want to work with. the data object is the WHOLE data object passed to the fill method