Writing
HomeWritingDocumentation

UniForms


Version: 1.0.1Published: 19th April, 2020by Morgan

Introduction

UniForms is a form-builder library for JavaScript. It is designed to handle deeply-nested objects and recursive data structures.

Note: This document is a work in progress.

Table of contents:


  1. Demo
  2. Using the library
  3. Basic functions
  4. Defining specifications
  5. Default component types
  6. Downloads

1. Demo


See this page for a demo.

2. Using the library


Initialisation

The full library is contained within a single JavaScript file. To use it in your document, define a <script> element and refer to its URL in the "src" attribute.
  e.g. <script src="exampleDirectory/form-builder-v1.js"></script>

The library will initialisation automatically when the script is loaded.

Notes

The variable uniForms will be declared globally.

3. Basic functions


To build a form, use the uniForms.build function. For example: const formElement = uniForms.build(specification); container.append(formElement); See section 4 on how to define specifications.

To read from a form, use the uniForms.get function. For example: const value = uniForms.get(formElement); // do stuff with value...
To set the value of a form, use the uniForms.set function. For example: uniForms.set(formElement,value);

4. Defining specifications


Components

A component is a dictionary representing an input.
The type property identifies the component type. Depending on the component type, other properties may apply. For Example: { type:"int", label:"Age: ", placeholder:"Enter your age" } See section 5 for a full description of the default component types.

Specification

A specification is a dictionary of components. For example: { "ROOT":{ label:"User: " type:"object", properties:{ firstName:"firstName", lastName:"lastName", age:{type:"int"}, } }, "firstName":{type:"string"}, "lastName": {type:"string"} } When uniForms.build is called, the root component (identified by the name "ROOT") is generated.

5. Default component types


Integer


Float


String


Boolean


Array


Object


Select


Constant


6. Downloads


License

All downloadable files can be used for commerical or non-commerical purposes. Do not resell. Attribution is appreciated but not due.

Files

Complete Library: uni-forms-v1.js
Example CSS: uni-forms-v1.css
Demo 1: demo1.html



All possible and potential rights reserved. Should you have any concerns, feel free to contact me at Heledron@gmail.com.
Heledron