Features List: Basic Evolutility features
This project aims to implement the same existing functionality that Evolutility offers.
NOTE: The following is copied from the Evolutility documentation. Actual project design may be slightly different.
For any object, a single model defines UI elements across views in a simple declarative way.
Evolutility provides 2 types of view:
- Views for a model: Browse (Display), Edit (or Create).
- Views for a collection: List, Cards, Charts, Stats. 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.
Shows all fields for viewing (read only). Fields are grouped in panels.
Code: /src/components/views/one/Browse.js
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.
Code: /src/components/views/one/Edit.js
Gives a tabular view of a collection. Each record has action buttons next to it (edit / delete).
Code: /src/components/views/many/List.js
Shows records side by side as cards.
Code: /src/components/views/many/Cards.js
Draws charts about the collection.
Code: /src/components/views/many/Charts.js
Display last update, number of updates in the last week, and for numeric fields the min, max, count, average.
Code: /src/components/views/many/Stats.js
For each application, all views can be generated from the model at run-time. Each model describe an object and its list of fields.
| 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. |
| 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:
|
| 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). |
| lovicon | Set to True to include icon with LOV items. |
| 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"). |
| Property | Meaning |
|---|---|
| id | Unique key for the group. It is optional. |
| type | Type of fields group. Only "panel" is currently supported (tab and other types of groups will be added later). |
| label | Group title displayed in the group header. |
| fields | Array of field ids. |
Note: Groups are optional. By default a single group holds all fields.
Multiple details tables can be specified with "collections".
| Property | Meaning |
|---|---|
| id | Unique key for the collection. |
| title | Collection title. |
| entity | Object linked to. |
| fields | Array of fields. Fields in collections do not need all properties of Fields in objects. |
The following example is the model for a simple graphic novels inventory app.
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"]
}
]
}
More sample models: To-do list, Address book, Restaurants list, Wine cellar.