dmitryt/json-schema-ui

Set of Angular Bootstrap UI components.

JSON Schema UI

Description

Set of Angular Bootstrap UI components. Demo Page

Installation

>$ git clone git://github.com/dmitryt/json-schema-ui.git

or

>$ bower install git://github.com/dmitryt/json-schema-ui.git

Usage

1. Angular and Bootstrap styles should be installed.
2. Insert that script into your application

<script type="text/javascript" src="<path-to-scripts>/JSON-Schema-UI/src/angular/build/json-schema-ui.js"></script>

Inside your-module.js add dependency:

angular.module('my-module', [
    'json-schema-ui'
]);

Configuration

angular.module('my-module', ['json-schema-ui'])
    .config(['schemaStateServiceProvider', function(schemaStateServiceProvider){
        schemaStateServiceProvider.configure({
            i18n: true, /* Optional. Whether localization is supported or not */
            dateFormat: 'dd.MM.yyyy', /* Optional. Date format for date field. Default is 'dd/MM/yyyy'.*/
            schemaEndpoint: '/example/schemas', /* Optional. Endpoint for schema loading; */
            dictionaryEndpoint: '/example/dictionaries', /* Optional. Endpoint for dictionary loading; */
            dictionaryParser: function(data){  /* Optional. Is used to transform dictionary structure; */
                return data.map(function(item){
                    return {
                        key: item.value,
                        label: item.name
                    };
                });
            }
        });
    }])

I highly recommend to use iether scm-fieldset directive

<scm-fieldset schema="formFields" data="formData" is-readonly="true" sub-path="subPath"></scm-fieldset>

or scm-field directive

<scm-field schema="field" data="formData" is-readonly="true" sub-path="subPath"></scm-field>

schema - field schema or array of field schemas. data - data model. isReadonly - fieldset|field mode. subPath - dynamic data path. Let's take a look at structure of field schema:

{
    "type": "input",
    "path": "path.from.root.input",
    "view": {
        "label": "Input Label"
    }
}

Available options:

Option	Description
path	Required. Model path.
type	Optional. It's used to define default type of control. Available types: input, email, password, checkbox, radio, date, select, textarea, array.
directive	Optional. It's possible to provide custom directive, if it's not enough to use the existing controls. Don't provide type option in this case
value	Optional. Actual for checkbox control. It's a value, that will be filled in model data, when checkbox will be checked.
source	Optional. Actual for select and radio control. Name of source data. Don't forget to cinfgiure dictionaryEndpoint to load it.
complex	Optional. Default is false. Every field has predefined behaviour - it has edit and view modes. But if the field is complex, than it wil be easier for client to provide its own behaviour for such cases. For instance, one of the predefined complex field - is array field.
model	Optional. Is used to extend field's model with static object. For nested fields modelItem property should be used
modelItem	Optional. The same as model property, but is used for array item fields.
unique	Optional|Experimental. Is used for array field. If attribute is set as unique, than only one item of array has it. If user tries to add array item with the same attribute, than event will be fired. The key of event is 'Json-Schema-Ui:scmFieldArray#onItemUpdate'.
required	Optional. Is passed into ng-required
disabled	Optional. Is passed into ng-disabled
validators	Optional. Array of validators with the next format [{label: , fn: }...]. Validator should return true if value if valid and false otherwise.
view.label	Optional. Label, that will be described under the provided control.
view.minMode	Optional. Actual for date control. Available option: "year".
view.placeholder	Optional. Placeholder, that will be described in the provided control.

Changelog

0.1.1

This version uses custom schema, that could be loaded via http.

0.0.1

Basic implementation of UI components. It's used schema, that is generated by (JSON Schema Parser)[https://github.com/dmitryt/JSON-Schema].