{"id":20146192,"url":"https://github.com/evoluteur/evolutility-ui-jquery","last_synced_at":"2025-12-12T03:39:57.652Z","repository":{"id":5924646,"uuid":"7144378","full_name":"evoluteur/evolutility-ui-jquery","owner":"evoluteur","description":"Model-driven Web UI for CRUD using REST or localStorage.","archived":false,"fork":false,"pushed_at":"2024-03-17T08:48:23.000Z","size":8461,"stargazers_count":186,"open_issues_count":5,"forks_count":56,"subscribers_count":36,"default_branch":"main","last_synced_at":"2025-03-30T01:11:16.812Z","etag":null,"topics":["backbone-model","backbonejs","code-generation","code-generator","crud","crud-application","crud-functionality","crud-generator","evolutility","forms","javascript","jquery","low-code","mda","metadata","metadata-driven","model-driven-development","models","no-code","ui"],"latest_commit_sha":null,"homepage":"https://evoluteur.github.io/evolutility-ui-jquery/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evoluteur.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2012-12-13T07:34:21.000Z","updated_at":"2025-02-20T11:41:26.000Z","dependencies_parsed_at":"2024-03-16T11:45:56.717Z","dependency_job_id":"e7a2449f-989d-4cd1-be27-dceb5059e2ab","html_url":"https://github.com/evoluteur/evolutility-ui-jquery","commit_stats":{"total_commits":879,"total_committers":7,"mean_commits":"125.57142857142857","dds":0.6052332195676906,"last_synced_commit":"8108d9fa74f68b7c3c6ded3a86ae6e8fa0598190"},"previous_names":["evoluteur/evolutility"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fevolutility-ui-jquery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fevolutility-ui-jquery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fevolutility-ui-jquery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fevolutility-ui-jquery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evoluteur","download_url":"https://codeload.github.com/evoluteur/evolutility-ui-jquery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427012,"owners_count":20937213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backbone-model","backbonejs","code-generation","code-generator","crud","crud-application","crud-functionality","crud-generator","evolutility","forms","javascript","jquery","low-code","mda","metadata","metadata-driven","model-driven-development","models","no-code","ui"],"created_at":"2024-11-13T22:20:23.409Z","updated_at":"2025-12-12T03:39:52.619Z","avatar_url":"https://github.com/evoluteur.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Evolutility-UI-jQuery \u0026middot; [![GitHub license](https://img.shields.io/github/license/evoluteur/evolutility-ui-jquery)](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/evolutility-ui-jquery)](https://www.npmjs.com/package/evolutility-ui-jquery) \n\n\nEvolutility-UI-jQuery provides a set of generic Backbone Views to browse, edit, filter, export and chart Backbone models and collections of different structures.\nWith it you can make web applications by configuring views with metadata instead of hand-coding templates, Javascript and CSS.\n\n![Edit](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/one-edit.gif)\n\nBy default Evolutility-UI-jQuery uses your browser local storage to store data (easier for demos because there is no server or database to setup).\n\n[Evolutility-Server-Node](https://github.com/evoluteur/evolutility-server-node) provides a matching RESTful API using Node.js, Express, and Postgres. \n\n## Demo apps\n\nSample Single Page Apps made with Evolutility: \n[To Do list](http://evoluteur.github.io/evolutility-ui-jquery/demo/index.html#todo/list),\n[AddressBook](http://evoluteur.github.io/evolutility-ui-jquery/demo/index.html#contact/list),\n[Wine Cellar](http://evoluteur.github.io/evolutility-ui-jquery/demo/index.html#winecellar/list),\n[Graphic Novels](http://evoluteur.github.io/evolutility-ui-jquery/demo/index.html#comics/cards).\n\n## Installation\n\n[Download](https://github.com/evoluteur/evolutility-ui-jquery/archive/master.zip) or **clone** Evolutility-UI-jQuery from GitHub.\n\n```bash\n# To get the latest stable version, use git from the command line.\ngit clone https://github.com/evoluteur/evolutility-ui-jquery\n```\n\nor use the [npm package](https://www.npmjs.com/package/evolutility-ui-jquery):\n\n```bash\n# To get the latest stable version, use npm from the command line.\nnpm install evolutility-ui-jquery\n```\n\n\nBy default, Evolutility-UI-jQuery is configured use localStorage for storing data. To make it work with a REST API:\n\n- specify the REST root endpoint using the \"url\" attribute in the \"config.js\" file,\n- run Grunt (to rebuild evolutility-ui-jquery.js (or evolutility-ui-jquery.min.js),\n- move the app to a web server.\n\n```bash\n# To rebuild the project\ncd evolutility-ui-jquery\nnpm install\ngrunt\n```\n\nFor the matching RESTful API you will also need to setup [Evolutility-Server-Node](https://github.com/evoluteur/evolutility-server-node). \n\n\n\n## Views\n\nEvolutility-UI-jQuery's views have a Backbone model (to define the data) and also a UI-model (to define the UI to display the data and interact with it).\n\nAll views for a Backbone model and collection share a single UI-Model which defines of all UI elements across views in a simple declarative way.\n\nEvolutility-UI-jQuery provides 3 types of views\n\n* Views for a model: [Browse](#browse), [Edit](#edit), [Mini (quick edit)](#mini), [JSON](#json).\n* Views for a collection: [List](#list), [Cards](#cards), [Bubbles](#bubbles), [Charts](#charts).\n* Views for actions on a model or collection: [Filter](#filter), [Export](#export), [Import](#import).\n\nA large part of the API (methods, options and events) is common to all views. Some views have additional API.\n\n## Views for One model\n### Browse\nShows all fields for viewing (read only). Fields are grouped in panels and tabs.\n\n![Browse](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/one-browse.gif)\n```javascript\nvar vw = new Evol.ViewOne.Browse({\n            el: myElement,\n            uiModel: myUIModel,\n            model: myModel\n        });\n```\n\nCode: [/js/view-one/one-browse.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-one/one-browse.js)\n\n### Edit\nThis view shows all fields for edition to create or update models.\nIt automatically performs validation based on the UI-model and supports the Master-Details pattern (nested collections).\nFields are grouped in panels and tabs.\n\n![Edit](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/one-edit.gif)\n```javascript\nvar vw = new Evol.ViewOne.Edit({\n            el: myElement,\n            uiModel: myUIModel,\n            model: myModel\n        });\n```\n\nCode: [/js/view-one/one-edit.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-one/one-edit.js)\n\n### Mini\nUsed for quick edits. Only shows important fields (required or showing as a column in grids). Fields are grouped in a single panel.\n\n![Mini](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/one-mini.gif)\n```javascript\nvar vw = new Evol.ViewOne.Mini({\n            el: myElement,\n            uiModel: myUIModel,\n            model: myModel\n        });\n```\n\nCode: [/js/view-one/one-mini.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-one/one-mini.js)\n\n### JSON\nJSON representation of the data.\n\n![JSON](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/one-json.gif)\n```javascript\nvar vw = new Evol.ViewOne.JSON({\n            el: myElement,\n            uiModel: myUIModel,\n            model: myModel\n        });\n```\n\nCode: [/js/view-one/one-json.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-one/one-json.js)\n\n## Views for a collection of Many models\n### List\nGives a tabular view of a collection with paging.\n\n![List](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/many-list.gif)\n```javascript\nvar vw = new Evol.ViewMany.List({\n            el: myElement,\n            uiModel: myUIModel,\n            collection: myCollection\n        });\n```\n\nCode: [/js/view-many/many-list.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-many/many-list.js)\n\n### Cards\nShows records side by side as cards.\n\n![Cards](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/many-cards.gif)\n```javascript\nvar vw = new Evol.ViewMany.Cards({\n            el: myElement,\n            uiModel: myUIModel,\n            collection: myCollection\n        });\n```\n\nCode: [/js/view-many/many-cards.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-many/many-cards.js)\n\n### Bubbles\nThe \"Bubbles\" view displays the data as bubbles with controls to group them and set their color and size (this view uses D3.js). \n    A tooltip with the Card view of the item show on mouse over.\n\n![Bubbles](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/many-bubbles.gif)\n```javascript\nvar vw = new Evol.ViewMany.Bubbles({\n            el: myElement,\n            uiModel: myUIModel,\n            collection: myCollection\n        });\n```\n\nCode: [/js/view-many/many-bubbles.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-many/many-bubbles.js) and [/js/view-many/many-bubbles-d3.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-many/many-bubbles-d3.js)\n\n### Charts\nDraws charts about the collection.\n\n![Charts](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/many-charts.gif)\n```javascript\nvar vw = new Evol.ViewMany.Charts({\n            el: myElement,\n            uiModel: myUIModel,\n            collection: myCollection\n        });\n```\n\nCode: [/js/view-many/many-charts.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-many/many-charts.js)\n\n## Views for Actions\nBackbone Views for actions on a collection or a model.\n### Filter\nView used to build a structured query to filter a collection.\n\n![Filter](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/action-filter.gif)\n```javascript\nvar vw = new Evol.ViewAction.Filter({\n            el: myElement,\n            uiModel: myUIModel\n        });\n```\n\nCode: [/js/view-action/action-filter.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-action/action-filter.js)\n\n### Export\nView to define export options and preview the collection export in different data formats (CSV, TAB, HTML, XML, SQL and JSON).\n\n![Export](https://raw.githubusercontent.com/evoluteur/evolutility-ui-jquery/master/doc/screenshots/action-export.gif)\n```javascript\nvar vw = new Evol.ViewAction.Export({\n            el: myElement,\n            uiModel: myUIModel,\n            collection: myCollection\n        });\n```\n\nCode: [/js/view-action/action-export.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-action/action-export.js)\n\n### Import\nView to import data from a CSVor JSON file. It is a work in progress.\n\n```javascript\nvar vw = new Evol.ViewAction.Import({\n            el: myElement,\n            uiModel: myUIModel,\n            collection: myCollection\n        });\n```\n\nCode: [/js/view-action/action-import.js](https://github.com/evoluteur/evolutility-ui-jquery/blob/master/js/view-action/action-filter.js)\n\n\n## UI-model\n\nViews are not defined in templates but configured with a UI-model using a [vocabulary](http://evoluteur.github.io/evolutility-ui-jquery/doc/ui-model.html) with words like \"field\", \"panel\" and \"tab\" rather than \"input\" and \"div\" to describe UI elements.\n\nHere is the UI-model used to configure all views for the [\"Graphic Novels\" app demo](http://evoluteur.github.io/evolutility-ui-jquery/demo/index.html#comics/cards):\n\nTry it now: [Download Evolutility-UI-jQuery](https://github.com/evoluteur/evolutility-ui-jquery/archive/master.zip), make modification to the demo UI-models (in the \"model\" sub-directory) by adding and modifying fields and panels and see the demo apps become your apps.\n\n```javascript\n\nvar uiModels_comics = {\n    id: 'comics',\n    label: 'Graphic Novels',\n    name: 'graphic novel serie',\n    namePlural: 'graphic novel series',\n    fnTitle: 'title',\n    fnBadge: function(m){\n        var hNb=m.get('haveNb'),\n            sNb=m.get('serieNb');\n        return (hNb==sNb)?hNb:hNb+'/'+sNb;\n    },\n    elements: [\n        {\n            type: 'panel', label: 'Serie', width: 70,\n            elements: [\n                {\n                    id: 'title', attribute: 'title', type: 'text', \n                    label: 'Title', required: true, \n                    maxLength: 255,\n                    width: 62, inMany: true\n                },\n                {\n                    id: 'genre', attribute: 'genre', type: 'lov', \n                    label: 'Genre', width: 38, inMany: true,\n                    list: [\n                        {id: 1, text: 'Adventure'},\n                        {id: 2, text: 'Fairy tale'},\n                        {id: 3, text: 'Erotic'},\n                        {id: 4, text: 'Fantastic'},\n                        {id: 5, text: 'Heroic Fantasy'},\n                        {id: 6, text: 'Historic'},\n                        {id: 7, text: 'Humor'},\n                        {id: 8, text: 'One of a kind'},\n                        {id: 9, text: 'Youth'},\n                        {id: 10, text: 'Thriller'},\n                        {id: 11, text: 'Science-fiction'},\n                        {id: 12, text: 'Super Heros'},\n                        {id: 13, text: 'Western'} \n                    ]\n                },\n                {\n                    id: 'authors', attribute: 'authors', type: 'text', \n                    label: 'Authors', width: 62, inMany: true\n                },\n                {\n                    id: 'language', attribute: 'language', type: 'lov', \n                    label: 'Language', width: 38, inMany: false,\n                    list: [\n                        {id: 2, text: 'French', icon:'flag_fr.gif'},\n                        {id: 1, text: 'American', icon:'flag_us.gif'}                    ]\n                },\n                {\n                    id: 'serie_nb', attribute: 'serie_nb', type: 'integer', \n                    label: 'Albums', width: 15, inMany: false,\n                    inCharts: false \n                },\n                {\n                    id: 'have_nb', attribute: 'have_nb', type: 'integer',\n                    label: 'Owned', width: 15, inMany: false, \n                    inCharts:false \n                },\n                {\n                    id: 'have', attribute: 'have', type: 'text',\n                    label: 'have', width: 32, inMany: false \n                },\n                {\n                    id: 'complete', attribute: 'complete', type: 'boolean',\n                    label: 'Complete', width: 19, inMany: true, \n                    labelFalse:'Incomplete', labelTrue:'Complete'\n                },\n                {\n                    id: 'finished', attribute: 'finished', type: 'boolean', \n                    label: 'Finished', width: 19, inMany: true,\n                    labelTrue:'Finished', labelFalse:'Unfinished', css:'cBlue'\n                },\n                {\n                    id:'amazon', type:'formula', \n                    label:'Amazon', width:100, css:'evol-ellipsis',\n                    formula:function(m){\n                        var urlData=m.get('title')+' '+m.get('authors'),\n                        link=m.get('language')=='FR' ?\n                            'http://www.amazon.fr/s/ref=sr_nr_n_1?keywords='\n                            :'http://www.amazon.com/s/ref=nb_sb_noss?field-keywords=';\n                        return '\u003ca target=\"a\" href=\"'+link+encodeURI(urlData)+'\"\u003e'+\n                            _.escape(urlData)+'\u003c/a\u003e';\n                    }\n                },\n                {\n                    id: 'notes', attribute: 'notes', type: 'textmultiline', \n                    label: 'Notes', maxLength: 1000,\n                    width: 100, height: 6, inMany: false\n                }\n            ]\n        },\n        {\n            type: 'panel', label: 'Cover', width: 30,\n            elements: [\n                {\n                    id: 'pix', attribute: 'pix', type: 'image',\n                    label: 'Cover', width: 100, inMany: true\n                }\n            ]\n        }\n    ]\n};\n\n```\n\nSee [UI-Model documentation](http://evoluteur.github.io/evolutility-ui-jquery/doc/ui-model.html) for the UI vocabulary available (structure of UI-models or metamodel).\n\nUI-Models for the demo apps:\n[To Do list](http://github.com/evoluteur/evolutility-ui-jquery/blob/master/models/todo.js),\n[AddressBook](http://github.com/evoluteur/evolutility-ui-jquery/blob/master/models/contacts.js),\n[Wine Cellar](http://github.com/evoluteur/evolutility-ui-jquery/blob/master/models/winecellar.js),\n[Graphic Novels](http://github.com/evoluteur/evolutility-ui-jquery/blob/master/models/comics.js).\n\n## Stack and dependencies\n\nJavascript, HTML5, CSS3,\n[Backbone.js](http://backbonejs.org),\n[Underscore.js](http://underscorejs.org/),\n[jQuery](http://jquery.com),\n[D3.js](http://d3js.org),\n[Bootstrap](http://getbootstrap.com/),\n[Bootstrap-datepicker](http://eternicode.github.io/bootstrap-datepicker/),\n[Select2](http://ivaynberg.github.io/select2/),\n[Toastr](https://github.com/CodeSeven/toastr).\n\nNote: For convenience, all dependencies are minified together in a single file \"dependencies.min.js\". The dependencies list is specified in \"Gruntfile.js\".\n\nThe React alternative: \n[Evolutility-UI-React](https://github.com/evoluteur/evolutility-ui-react)\n\n## Documentation\n\n[Documentation](http://evoluteur.github.io/evolutility-ui-jquery/doc/index.html): [ui-models](http://evoluteur.github.io/evolutility-ui-jquery/doc/ui-model.html) and [views](http://evoluteur.github.io/evolutility-ui-jquery/doc/views.html).\n\n## License\n\nCopyright (c) 2020 [Olivier Giulieri](https://evoluteur.github.io/).\n\nEvolutility-UI-jQuery is released under the [MIT license](http://github.com/evoluteur/evolutility-ui-jquery/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fevolutility-ui-jquery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevoluteur%2Fevolutility-ui-jquery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fevolutility-ui-jquery/lists"}