List view example

12-11-2018
The list view control provides advanced functionality to display table rows. It allows to filter, sort, select, delete, import, export rows and more. A basic example: ```typescript S.addRoute("/admin/amura/blog/post", () => { let grid = new admin.EntityGrid("amura.blog.post") grid.refresh() let tile = new S.Tile(); tile.element.appendChild(grid.element); let view = new admin.AdminView("padding"); view.content.appendChild(tile.element); S.setView(view); }) ``` A more complete example: ```typescript S.addRoute("/admin/amura/blog/post", () => { let grid = new admin.EntityGrid("amura.blog.post", { properties: [ "id", "title", "tags", "createDate" ], showCheckboxes: true, showTitle: true, showQuicksearch: true, showSearch: true, autoLoad: true, showDetailPage: true, sort: ["id DESC"] }) let tile = new S.Tile(); tile.element.appendChild(grid.element); let view = new admin.AdminView("padding"); view.content.appendChild(tile.element); S.setView(view); }) ``` ![](/open/scl/uploads/Kp8L4fzObB537JZvdzlE.png) It is possible to also show all properties but some others. ```typescript let grid = new admin.EntityGrid("amura.blog.post", { skipProperties: [ "createDate" ] } ``` It works by defining an entity server side: ```typescript function init() { orm.register({ name: "post", permissions: "CRUD", label: "@@Post", pluralLabel: "@@Posts", properties: [ { name: "title", type: "string", size: 255, label: "@@Título" }, { name: "body", type: "mediumText", subType: "markdown", label: "@@Cuerpo", isPublic: true }, { name: "tags", type: "string", size: 255, nullable: true, label: "@@Tags" } ] }) } ``` Importing ormapi will privide the Listview with the necessary api endpoints. ```typescript import "stdlib/ormapi" ``` In fact just by importing ormapi a route will be added with the default Listview and DetailView. Manually adding a route overrides this. Also if the entity has no read (R) permissions nothing will be generated.
Front Sframework