GithubHelp home page GithubHelp logo

sglanzer-deprecated / ember-frost-bunsen Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ciena-frost/ember-frost-bunsen

0.0 2.0 0.0 2.64 MB

Create UIs from JSON configurations

Home Page: http://ciena-frost.github.io/ember-frost-bunsen/

License: MIT License

Shell 0.11% JavaScript 94.97% CSS 0.85% HTML 4.06%

ember-frost-bunsen's Introduction

ember-frost-bunsen

Travis Coveralls NPM

Tutorial

Start with a step-by-step tutorial on bunsen here

Installation

ember install ember-frost-bunsen

API

frost-bunsen-detail

Attribute Type Required Description
bunsenModel Ember.Object or object Yes Value definition
bunsenView Ember.Object or object No View definition
renderers Ember.Object or object No Custom renderer template helper mappings
value Ember.Object or object No Data to render

frost-bunsen-form

Attribute Type Required Description
autofocus boolean No Whether or not to focus on first input
bunsenModel Ember.Object or object Yes Value definition
bunsenView Ember.Object or object No View definition
disabled boolean No Whether or not to disable entire form
onChange Function No Callback for when form values change
onValidation Function No Callback for when form is validated
renderers Ember.Object or object No Custom renderer template helper mappings
showAllErrors boolean No Whether or not to show error messages before user interaction occurs
validators Array<Function> No List of custom validation functions
value Ember.Object or object No Value to initialize form with

Examples

Invocation

Form View

{{
  frost-bunsen-form
  bunsenModel=model
  bunsenView=view
}}

Detail View

{{
  frost-bunsen-detail
  bunsenModel=model
  bunsenView=view
  value=value
}}

Note: ALL values, models, and views MUST be valid JSON. Values are simply the data being represented in the UI which usually come directly from an API response. Models must be valid JSON Schema and views must be valid view schema. Below we will provide examples of values, models, and views to give you a better idea of how this stuff works.

Minimal Example

Value (Data to Render)

{
  "firstName": "John",
  "lastName": "Doe"
}

Model

{
  "type": "object",
  "properties": {
    "firstName": {"type": "string"},
    "lastName": {"type": "string"}
  }
}

View

{
  "cellDefinitions": {
    "main": {
      "children": [
        {"model": "firstName"},
        {"model": "lastName"}
      ]
    }
  },
  "cells": {
    "label": "Main",
    "id": "main"
  },
  "type": "form",
  "version": "2.0"
}

Nested Properties Example

Value (Data to Render)

{
  "name": {
    "first": "John",
    "last": "Doe"
  }
}

Model

{
  "type": "object",
  "properties": {
    "name": {
      "type": "object",
      "properties": {
        "first": {"type": "string"},
        "last": {"type": "string"}
      }
    }
  }
}

View

{
  "cellDefinitions": {
    "main": {
      "children": [
        {"model": "name.first"},
        {"model": "name.last"}
      ]
    }
  },
  "cells": {
    "label": "Main",
    "id": "main"
  },
  "type": "form",
  "version": "2.0"
}

Data Types Example

Value (Data to Render)

{
  "name": "John Doe",
  "age": 35,
  "married": true,
  "spouse": {
    "name": "Jane Doe",
    "age": 32
  }
}

Model

{
  "type": "object",
  "properties": {
    "name": {"type": "string"},
    "age": {"type": "number"},
    "married": {"type": "boolean"},
    "spouse": {
      "type": "object",
      "properties": {
        "name": {"type": "string"},
        "age": {"type": "number"}
      }
    }
  }
}

View

{
  "cellDefinitions": {
    "main": {
      "children": [
        {"model": "name"},
        {"model": "age"},
        {"model": "married"},
        {
          "label": "Spouse's Name",
          "model": "spouse.name"
        },
        {
          "label": "Spouse's Age",
          "model": "spouse.age"
        }
      ]
    }
  },
  "cells": {
    "label": "Main",
    "id": "main"
  },
  "type": "form",
  "version": "2.0"
}

Note: In the above view you will notice we specify label for the spouse properties to customize the label text rendered in the UI.

Custom Validation Example

Bunsen will automatically validate types of most fields, and will flag missing fields. We can also pass in a list of custom validation functions which let us add additional conditions.

Validators are functions that return an Ember.RSVP.Promise which resolves to a POJO which can have one or more error objects. (This allows async actions like checking an API.) These objects specify both the field path (based on the Bunsen View, in case of nested things) and an error message:

{
  value: {
    errors: [  // can be empty, or contain multiple items
      {
        path: '#/vent',
        message: 'Vent core must be odd-numbered'
      },
      {
        path: '#/blasttype',
        message: 'Blast type must be either "frogs" or "toads"'
      }
    ],
    warnings: []
  }
}

Bunsen form specification

Value (Data to Render)

{
  "palindrome": "tacocat",
}

Model

{
  "type": "object",
  "properties": {
    "palindrome": {"type": "string"}
  }
}

View

{
  "cells": [
    {
      "model": "palindrome"
    }
  ],
  "type": "form",
  "version": "2.0"
}

Provide custom validators

Custom validation functions can access all form values, and may return multiple error messages (for multiple fields). Bunsen will invoke each validator in the validators list you give it with the form's current values (on each change), and collate all of the errors together before passing to the action you give it as onValidation.

function palindromeValidator (values) {
  // If missing, a value will be undefined in the values object.
  // Bunsen already flags missing required fields.
  if (values.palindrome !== undefined) {
    const palindrome = (values.palindrome || '').replace(' ', '').toLowerCase()
    const reversed = palindrome.split('').reverse().join('')
    if (palindrome !== reversed) {
      return Ember.RSVP.resolve({
        value: {
          errors: [{
            path: '#/palindrome',
            message: 'Palindrome field does not read the same forwards as backwards'
          }],
          warnings: []
        }
      })
    }
  }
  return Ember.RSVP.resolve({
    value: {
      errors: [],
      warnings: []
    }
  })
}

export default Ember.Component.extend({
  layout: layout,
  classNames: ['palindrome-form'],

  model: bunsenModel,
  view: bunsenView,
  valid: false,
  hasError: Ember.computed.notEmpty('error'),

  validators: [
    palindromeValidator
  ],

  actions: {
    onValidation (e) {
      this.set('valid', e.errors.length === 0)
    }
  }
})

When invoking Bunsen, specify the onValidation and validators options:

{{
  frost-bunsen-form
  bunsenModel=model
  bunsenView=view
  onValidation=(action 'onValidation')
  validators=validators
}}

Development

Setup

git clone [email protected]:ciena-frost/ember-frost-bunsen.git
cd ember-frost-bunsen
npm install && bower install

Development Server

A dummy application for development is available under ember-frost-bunsen/tests/dummy. To run the server run ember server (or npm start) from the root of the repository and visit the app at http://localhost:4200.

Testing

Run npm test from the root of the project to run linting checks as well as execute the test suite and output code coverage.

ember-frost-bunsen's People

Contributors

agonza40 avatar agonzalez-cyan avatar chrisstoll avatar cstolli avatar ember-tomster avatar ewhite613 avatar gknoy avatar job13er avatar laflower avatar psbanka avatar rox163 avatar sandersky avatar sglanzer avatar sophypal avatar travis-ci-ciena avatar vesper2000 avatar

Watchers

 avatar  avatar

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.