Views

 Browse Evol.ViewOne.Browse

Shows all fields for browsing the record in read-only mode. Fields are grouped in panels and tabs.

 

var vw = new Evol.ViewOne.Browse({
    el: $('#evol'),
    uiModel: myUIModel,
    model: myModel
});

API: Options - Methods - Events

 Edit Evol.ViewOne.Edit

This view shows all fields for edition to create or update models. It automatically performs validation based on the UI-model and supports the Master-Details pattern (nested collections). Fields are grouped in panels and tabs.

 

var vw = new Evol.ViewOne.Edit({
    el: $('#evol'),
    uiModel: myUIModel,
    model: myModel
});

API: Options - Methods - Events

 Mini (quick-edit) Evol.ViewOne.Mini

Only shows important fields (required or showing as a column in grids). Fields are grouped in a single panel.

 

var vw = new Evol.ViewOne.Mini({
    el: $('#evol'),
    uiModel: myUIModel,
    model: myModel
});

API: Options - Methods - Events

 JSON Evol.ViewOne.JSON

JSON representation of the data.

 

var vw = new Evol.ViewOne.JSON({
    el: $('#evol'),
    uiModel: myUIModel,
    model: myModel
});

This view is not useful to everyone, but can be convinient for developers.

API: Options - Methods - Events

Layout

Layouts are used for the views "Browse" and "Edit". Evolutility follows the "flow positioning" method. Elements position is entirely determined by their order in the ui-model, which does not require any description of the positioning, absolute or relative, of the user interface on the screen. The ordering of the information and the internal description of each element (such as field type, width, and height) implies the coordonates of every element on each screen.

You can organize fields in panels (sections) on the page. Panels are placed sequentially, left to right, until a width of 100% is reached. Once the maximum width is reached, the next panel will appear below the previous group of panels.

In the following screenshot the form is organized into 4 panels for "Identity" (width=60%), "Contact Info" (width=40%), "Address" (width=60%), and "Misc." (width=40%). Each of these panels contains one or several fields.

Identity: width=60% "Contact Info": width=40% Address: width=60% "Misc.": width=40%

Inside each panel, fields are placed using the same rule: placed sequentially, left to right, until a width of 100% is reached.

		Lastname: width=100% Firstname: width=100% email: width=100%
		Lastname: width=50% Firstname: width=50% email: width=100%

The previous 2 screenshots demonstrate how elements are re-positioned simply by changing their width.

The "flow positioning" method is also quite flexible as it allows different numbers of fields on different rows which is quite useful for cases like an address.

Address: width=100% Address 2: width=100% City: width=62% State: width=15% Zip: width=23%

View layout customization with CSS

It is possible to enhance or adapt layout by adding CSS classes.

For example, here is a CSS to change the background of all cards in the Cards views for all apps.

.evol-cards-body > .panel {
  background-color: blue;
}

It can also by applied to a specific object as follow:

[data-eid="contact"] .evol-cards-body > .panel {
 background-color: green !important;
}

For the demo, in Cards view, cards height is defined in CSS for each entity.

 List Evol.ViewMany.List

Gives a tabular view of a collection with paging.

 

var vw = new Evol.ViewMany.List({
    el: $('#evol'),
    uiModel: myUIModel,
    collection: myCollection
});

 Cards Evol.ViewMany.Cards

Shows records side by side as cards. A single card can also act as a tooltip when using the view Bubbles .

 

var vw = new Evol.ViewMany.Cards({
    el: $('#evol'),
    uiModel: myUIModel,
    collection: myCollection
});

 Bubbles Evol.ViewMany.Bubbles

The "Bubbles" view displays the data as bubbles with controls to group them and set their color and size (this view uses D3.js).

 

var vw = new Evol.ViewMany.Bubbles({
    el: $('#evol'),
    uiModel: myUIModel,
    collection: myCollection
});

 Charts Evol.ViewMany.Charts

Displays charts about the collection. Draws a pie chart or bar chart for each field of type list, boolean, integer and decimal.

 

var vw = new Evol.ViewMany.Charts({
    el: $('#evol'),
    uiModel: myUIModel,
    collection: myCollection
});

 Filter Evol.ViewAction.Filter

View used to build a structured query to filter a collection.

 

Filter example: "phone number start by 415" or "for categories Finances and Business"... 

var vw = new Evol.ViewAction.Filter({
    el: $('#evol'),
    uiModel: myUIModel
});

 Export Evol.ViewAction.Export

View to define export options and preview the collection export in different data formats (CSV, TAB, HTML, XML, SQL and JSON).

 

var vw = new Evol.ViewAction.Export({
    el: $('#evol'),
    uiModel: myUIModel,
    colllection: myCollection
});

 Import Evol.ViewAction.Import

View to import data from a CSV or JSON source.

var vw = new Evol.ViewAction.Import({
    el: $('#evol'),
    uiModel: myUIModel
});