Git Product home page Git Product logo

angular-schema-form-builder's Introduction

angular-schema-form-builder

A user interface for building definitions for angular-schema-form.

This repo is a response to Schema-Form Issue #304. At the moment it's really just a public design document to facilitat collaboration from the community of Schema-Form users.

Main Goals

  • graphical interface for building form definitions, given a pre-existing schema
  • direct integration with schema-form wherever possible (don't duplicate traversal logic/etc)
  • direct integration with registered custom form types

Secondary Goals

  • graphical interface for building a form definition, and its corresponding schema

Strategy

Palette, Preview, Inspector

###Palette

  • a list of possible form types, populated from the configured decorator
  • drag a list item to the preview section to insert a new form item

###Preview

  • form is rendered by schema-form
  • uses a dummy model so the user can test validations
  • drag field to reorder
  • click field to inspect

###Inspector

  • shows configuration options for the form item selected in the preview section
  • configuration options are rendered by schema-form
  • configuration options are populated by the form type's definition on the decorator
  • changes are reflected in the preview section
  • a custom builder-schema-key form type is available for selecting the key property

Changes to Schema-Form

For the above to be possible, schema-form will have to be modified to allow an object to be used when registering a form type with a decorator:

// old style (should maintain backwards-compatibility)
schemaFormDecoratorsProvider.addMapping(
	'bootstrapDecorator',
	'datepicker',
	'directives/decorators/bootstrap/datepicker/datepicker.html'
);

// new style defining title, description, schema, and form for configuration
schemaFormDecoratorsProvider.addMapping(
	'bootstrapDecorator',
	{
		type: 'datepicker',
		title: 'DatePicker',
		description: 'Datepicker add-on for Angular Schema Form using pickadate!',
		form: ['*'],
		schema: {
			type: 'object',
			properties: {
				minDate: {
					type: ['string', 'null']
				},
				maxDate: {
					type: ['string', 'null']
				}
			}
		}
	},
	'directives/decorators/bootstrap/datepicker/datepicker.html'
);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.