Package Exports

evolutility-ui-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (evolutility-ui-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Evolutility-UI-React

Evolutility-UI-React provides a set of React Views to display and interact with objects of different data structures. These views work together to provide full web apps.

With Evolutility-UI-React you can quickly make a web application UI by configuring views with metadata instead of hand-coding Javascript, CSS, and HTML.

Evolutility-UI-React works hand-in-hand with Evolutility-Server-Node which provides the matching REST endpoints based on the same metadata.

This project is a work in progress. I'm still learning React.

Installation

Download or clone from GitHub.

# To get the latest stable version, use git from the command line.
git clone https://github.com/evoluteur/evolutility-ui-react

In the Evolutility-UI-React directory, use the command line to type the following:

# Install dependencies
npm install

# Run the node.js server
npm start

In a web browser, go to the url http://localhost:8080/.

For the REST endpoints, you also need to setup Evolutility-Server-Node.

Views

For any object, a single model defines UI elements across views in a simple declarative way.

Evolutility-UI-React provides 2 types of view:

Views for a model: Browse, Edit.
Views for a collection: List, Cards, Charts.

Notes: Views for actions will come later.

A large part of the API (methods, options and events) is common to all views. Some views have additional API.

Views for One object

Browse

Shows all fields for viewing (read only). Fields are grouped in panels.

Browse

Code: /js/views/one/Browse.js

Edit

This view shows all fields for edition to create or update records. It automatically performs validation based on the model. Fields are grouped in panels and tabs.

Edit

Code: /js/views/one/Edit.js

Views for Many objects

List

Gives a tabular view of a collection.

List

Code: /js/views/many/List.js

Cards

Shows records side by side as cards.

Cards

Code: /js/views/many/Cards.js

Charts

Draws charts about the collection.

Charts

Code: /js/views/many/Charts.js

Models

For each application, several views will be generated form a single model. Models describe the object and its list of fields.

Entity

Property	Meaning
id	Unique key to identify the entity (used as API parameter).
icon	Icon file name for the entity (example: "cube.gif".
name	Object name (singular).
namePlural	Object name (plural).
title	Application name.
fields	Array of fields.
groups	Array of groups. If not provided a single group will be used.
titleField	Field id for the column value used as record title. titleField can also be a function.

Field

Property	Meaning
id	Unique key for the field (can be the same as column but doesn't have to be).
type	Field type to show in the UI. Possible field types: boolean (yes/no) date datetime decimal document email image integer lov (list of values) money text textmultiline time url
required	Determines if the field is required for saving.
readonly	If set to true, the field value cannot be changed.
defaultValue	Default field value for new records.
max, min	Maximum/Minimum value allowed (only applies to numeric fields).
maxLength, minLength	Maximum/Minimum length allowed (only applies to text fields).
inMany	Determines if the field is present (by default) in lists of records.
height	For fields of type "textmultiline", number of lines used in the field (in Browse and Edit views).
width	Percentage width in Browse and Edit views.
help	Optional help on the field.
noCharts	Prevent the field to have a charts (only necessary for fields of type integer, decimal, money, boolean, list of values which are "chartable").

Group

Property	Meaning
id	Unique key for the group. It is optional.
type	Only "panel" is currently supported ("tab" is next).
label	Group title as displayed to the user.
fields	Array of field ids.

Sample model

The following example is a graphic novels collection app. The classic To-Do app is also included in the demo.

module.exports = {
    id: "comics",
    label: "Graphic Novels",
    name: "graphic novel serie",
    namePlural: "graphic novel series",
    icon: "comics.png",
    titleField: "title",
    searchFields: ["title", "authors", "notes"]

    fields:[
      {
          id: "title", type: "text", label: "Title", required: true, 
          maxLength: 255,
          width: 100, inMany: true
      },
      {
          id: "authors", type: "text", width: 62, inMany: true,
          label: "Authors"
      },
      {
          id: "genre", type: "lov", label: "Genre", 
          width: 38, inMany: true,
          list: [
            {id: 1, text: "Adventure"},
            {id: 2, text: "Fairy tale"},
            {id: 3, text: "Erotic"},
            {id: 4, text: "Fantastic"},
            {id: 5, text: "Heroic Fantasy"},
            {id: 6, text: "Historic"},
            {id: 7, text: "Humor"},
            {id: 8, text: "One of a kind"},
            {id: 9, text: "Youth"},
            {id: 10, text: "Thriller"},
            {id: 11, text: "Science-fiction"},
            {id: 12, text: "Super Heros"},
            {id: 13, text: "Western"} 
          ]
      },
      {
          id: "serie_nb", type: "integer", 
          width: 15, inMany: false,
          label: "Albums", noCharts: true 
      },
      {
          id: "have_nb", type: "integer", 
          width: 15, inMany: false,
          label: "Owned", noCharts: true 
      },
      {
          id: "have", type: "text", 
          width: 15, inMany: false,
          label: "Have" 
      },
      {
          id: "language", type: "lov", label: "Language", 
          width: 17, inMany: true,
          lovicon: true,
          list: [
            {id: 2, text: "French", icon:"flag_fr.gif"},
            {id: 1, text: "American", icon:"flag_us.gif"}
          ]
      },
      {
          id: "complete", type: "boolean", 
          width: 19, inMany: false,
          label: "Complete"
      },
      {
          id: "finished", type: "boolean", 
          width: 19, inMany: false,
          label: "Finished"
      },
      {
          id: "pix", type: "image", 
          width: 30, inMany: true,
          label: "Cover"
      },
      {
          id: "notes", type: "textmultiline", 
          label: "Notes", maxLength: 1000,
          width: 70, height: 7, inMany: false
      }
  ],

  groups: [
        { 
          id:"serie", type: "panel", label: "Serie", width: 70,
          fields: ["title", "authors", "genre", 
                "serie_nb", "have_nb", "have", 
                "language", "complete", "finished", "notes"]
        },
        { 
          id:"pix", type: "panel", label: "Album Cover", width: 30,
          fields: ["pix"]
        }
  ]
}

Other implementations of Evolutility

Evolutility-UI-jQuery using jQuery and Backbone.

Evolutility-Server-Node using Node.js, Express, and PostgreSQL.

Evolutility using ASP.net and Microsoft SQL-Server.

License

Evolutility-UI-React is released under the MIT license.