altersoftware.IT
altersoftware.IT
altersoftware.IT

jslibs/js-as-form

Library index

AS.form

Dynamically create JSON-based forms.

Key advantages:

Developed and maintained by balestra

Licensed under Creative Commons Attribution 4.0 License for free personal/professional/commercial use, with attribution.

Includes some glyphicons, licensed to Marco Balestra.

Requires

Requires js-as-core and js-as-labels:

<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-core/as-core.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-labels/as-labels.js" charset="UTF-8"></script>

before loading as-form.js

Example of basic usage, loading from Altersoftware server:

<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-core/as-core.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-labels/as-labels.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-form/as-form.js" charset="UTF-8"></script>

Optionally you can include some types by including the related schema files, or you can load them later on, at runtime.

To include them from the beginnning:

<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-core/as-core.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-labels/as-labels.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-form/as-form.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-form/schemes/as-form-basic.js" charset="UTF-8"></script>

Downloads

All downloads are refreshed daily from the latest stable branch of Altersoftware GIT repository.

Schemes

By loading more schemes you can use more and more field types, including custom fields you can write on your own by extending the basic AS.form.field class.

Several examples are provided in the Basic data types file shipped with AS.form.

Static methods

Static methods act on the AS.form code itself, not on the AS.form object(s) created.

The reference for methods of instance objects is here.

AS.form.addForm( asForm )

This is not a method to create a new form, it’s AS.form.create() or new AS.form({ options… }) — see: AS.form

Use this method only to add again to the collection an asForm object returned by asForm.destroy().

Once added again to the collection the form can be rendered using asForm.render( targetNode ).

AS.form.addSchema( uri )

Load an external javascript that extends basic AS.form.field class with one or more field type(s).

uri can be a full or relative URI, must contain at least a / character (otherwise it's searched in the same directory of as-form.js)

When adding a schema AS.from tries also to load a CSS file (same location, same name, “.css” extension) and AS.labels language file (same name plus "-lang" and “.js” extension).

AS.form.create( object )

Creates a whole form with one command.

The object is a key/value javascript object, optional, and all its keys are optional:

See it in action here.

AS.form.getForm( [index] )

Return the indexth AS.form object created, starting from 0.

AS.form.listForms()

Return the array of the AS.form objects created.

AS.form.loadCssFile( currentJavascriptFileName )

Used by schema files to load their own CSS file, if any.

AS.form.loadLangFiles( currentJavascriptFileName )

Used by schema files to load their own label file(s), if any.

Create a form, an example

See it in action here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Form</title>
    <script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-core/as-core.js" charset="UTF-8"></script>
    <script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-labels/as-labels.js" charset="UTF-8"></script>
    <script type="text/javascript" src="https://altersoftware.it/products/jslibs/js-as-form/as-form.js" charset="UTF-8"></script>
    <script type="text/javascript">
        /* <![CDATA[ */
        function init() {
            // Dynamically add form schemes (form types)
            // use AS.form.addSchema( uri ) one or more times
            AS.form.addSchema('https://altersoftware.it/products/jslibs/js-as-form/schemes/as-form-basic.js');
            // If you dynamically loaded schemas, you've to wait
            // that they're all loaded, then trigger the onReady function that will receive
            // a reference to the AS.form object created.
            (new AS.form({ labelWidth: 140, theme: 'light' })).onReady( buildForm );
            // If schemas are loaded in HEAD section, you can simply use
            // let f = new AS.form( options );
            // ...and continue with f as a reference to the AS.form object.
        }
        function buildForm( f ) {
            f.addField(
                'agree',
                'checkbox',
                { value: 'Yes', label: 'I agree', mandatory: true }
            ).addField(
                'test',
                'hidden',
                {value:5}
            );
            f.addField(
                'hands',
                'integer',
                {
                    label: 'Hands',
                    title: 'Number of hands',
                    placeholder: 'Number of hands',
                    min: 0,
                    max: 4,
                    focus: true
                }
            );
            f.addField(
                'hair',
                'select',
                {
                    label: 'Hair',
                    options: [
                        {label:AS.label('selectChooseOne'),value:''},
                        {label:'None',value:'-'},
                        {label:'Dark:', options:['Black','Brown',{label:'Gray',value:'DarkGray'}]},
                        {label:'Light:',options:['Red','Blonde','Gray','White']},
                        'Other'
                    ]
                }
            );
            f.render('target');
        }
        /* ]]> */
    </script>
</head>
<body onload="init()">
    <div id="target">
        <h1>Here the result:</h1>
    </div>
</body>
</html>