{"id":21417930,"url":"https://github.com/msg-systems/uica-widgets","last_synced_at":"2025-03-16T19:21:21.035Z","repository":{"id":57304082,"uuid":"50118133","full_name":"msg-systems/uica-widgets","owner":"msg-systems","description":"User interface component architecture (UICA) - Widget composition","archived":false,"fork":false,"pushed_at":"2018-04-13T11:54:51.000Z","size":3422,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-07T01:16:03.483Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","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/msg-systems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-21T15:53:19.000Z","updated_at":"2017-03-22T12:33:23.000Z","dependencies_parsed_at":"2022-09-20T20:52:00.949Z","dependency_job_id":null,"html_url":"https://github.com/msg-systems/uica-widgets","commit_stats":null,"previous_names":["msg-systems/msg-js-spa-widgets"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msg-systems","download_url":"https://codeload.github.com/msg-systems/uica-widgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243707360,"owners_count":20334619,"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":[],"created_at":"2024-11-22T19:18:14.639Z","updated_at":"2025-03-16T19:21:21.000Z","avatar_url":"https://github.com/msg-systems.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# uica-widgets\nUser Interface Component Architecture (UICA) Widgets\n\n## How to use the table widget\n\n### General\n\nIf a component should be a table then it is necessary that this component extends from the abstract table widget component:\n\n        extend: app.widget.abstract.table.{ctrl|model|view}\n\nIf the table should be able to support single select and/or multi select and/or tree functionality it is necessary to overwrite the specific mehtods. e.g. for single select\n\n       singleSelectPluginOptions () {\n            let selectOptions = this.singleSelectDefaultOptions()\n            selectOptions.markups = {\n                checkedMarkup: this.view.call(\"jbit7:multiSelectCheckedMarkup\"),\n                uncheckedMarkup: this.view.call(\"jbit7:multiSelectUncheckedMarkup\")\n            }\n            return selectOptions\n        },\n\n       singleSelectDefaultOptions () {\n            return {\n                width: 30,\n                minWidth: 30,\n                cssClass: \"{specific CSS-Class}\",\n                headerCssClass: \"{specific CSS-Class}\"\n            }\n        },\n\nFor multi select please overwrite the methods `multiSelectPluginOptions` and `multiSelectDefaultOptions` and for the tree functionality the methods `treePluginOptions` and `treeDefaultOptions` have to be overwritten.\n\n\n### How to initialize the table\n\n#### Options\n\nSetting the options is done in the model. Except the default options of the library [SlickGrid](https://github.com/mleibman/SlickGrid/wiki/Grid-Options/), the following default oprions are set:\n\n\n\u003ctable style=\"width:100%\"\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n\t\u003cth width=\"30%\"\u003eOption\u003c/th\u003e\n\t\u003cth width=\"30%\"\u003eDefault\u003c/th\u003e\n\t\u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003erowHeight\u003c/td\u003e\n\t\u003ctd\u003e27\u003c/td\u003e\n\t\u003ctd\u003ethe height of a row, the default option of SlickGrid is 25\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003eenableColumnReorder\u003c/td\u003e\n\t\u003ctd\u003efalse\u003c/td\u003e\n\t\u003ctd\u003ethe default option of SlickGrid is true\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003eforceFitColumns\u003c/td\u003e\n\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003ctd\u003ethe default option of SlickGrid is false\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003eactivateRowSelectionModel\u003c/td\u003e\n\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003ctd\u003eactivates the possibility to select a row/rows. If it is set to false the table is not selectable at all\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003eselectActiveRow\u003c/td\u003e\n\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003ctd\u003eIf set to true, the selected row/rows will be saved.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003eactivateSelectPlugIn\u003c/td\u003e\n\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003ctd\u003eif set to true the selection of a row is done through a separate column. If set to false the selection is done by a click  somewhere in the row, does not matter in which column\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003emultiSelect\u003c/td\u003e\n\t\u003ctd\u003efalse\u003c/td\u003e\n\t\u003ctd\u003eit is only possible to select one row at once. If set to true multiple rows can be selected.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nIf it is necessary to have different options than the default, they can be overwritten in the method `initializeOptions` in the model, e.g.\n\n\t\tinitializeOptions () {\n            this.base()\n            this.options.multiSelect = true\n            this.options.editable = true\n\t\t\tthis.options.rowHeight = 36\n        }\n\n#### Columns\n\nTo define which columns should exist for the table, it is necessary to implement the method `initializeColumns`. The method must set the dynamics `columns`, it must be an array of column object. A column object hast the following mandatory and optional fields (see also [SlickGrid Column-Options](https://github.com/mleibman/SlickGrid/wiki/Column-Options)):\n\n\u003ctable style=\"width:100%\"\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n\t\u003cth width=\"30%\"\u003eOption\u003c/th\u003e\n\t\u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003efield\u003c/td\u003e\n\t\u003ctd\u003emandatory: the name of the attribute, which value of the data object should be representated in this column\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003eid\u003c/td\u003e\n\t\u003ctd\u003emandatory: the unique id of a column, normally this should be the same as id\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003eformatter\u003c/td\u003e\n\t\u003ctd\u003eoptional: a function that returns the value to be written in the cell, can be a simple string or a HTML string.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003euseFormatterForSearch\u003c/td\u003e\n\t\u003ctd\u003eoptional: Boolean flag, if the formatted value or the unformatted data value should be used for the search, e.g. a date's data value are milliseconds 1487890800000 and the formatted value therefore is 24.02.17\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n\t\u003ctd\u003euseFormatterForSort\u003c/td\u003e\n\t\u003ctd\u003eoptional: Boolean flag, if the formatted value or the unformatted data value should be used for the sort. Same mechanism as useFormatterForSearch\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nAn example for the method `initializeColumns`:\n\n\tinitializeColumns () {\n            let columns = [\n                {id: \"type\", cssClass: \"centerText\",  headerCssClass: \"centerText\", maxWidth: 200, \n\t\t\t\t\tformatter: app.util.format.slickColumnFormatter.typeFormatter},\n                {id: \"origin\", cssClass: \"centerText\",  headerCssClass: \"centerText\", maxWidth: 200},\n                {id: \"description\", cssClass: \"centerText\",  headerCssClass: \"centerText\"}\n            ]\n\n            this.columns = _.map(columns, each =\u003e {\n                each.field = each.field || each.id\n                each.name = each.name || i18next.t(`___config.id___.column.${each.id}`)\n                each.toolTip = each.toolTip || i18next.t(`___config.id___.tooltip.${each.id}`)\n                each.sortable = each.hasOwnProperty('sortable') ? each.sortable : true\n                each.useFormatterForSearch = each.hasOwnProperty('useFormatterForSearch') ? each.useFormatterForSearch: true\n                each.useFormatterForSort = each.hasOwnProperty('useFormatterForSort') ? each.useFormatterForSort: true\n                return each\n            })\n        }\n\n#### Data Table Entries\n\nSetting the data is done in the controller.\nIn the observer of the data it is necessary to call teh method `updatePresentationTableEntries`, e.g.:\n\n      this.observeParentModel(\"global:data:orders\", (ev, orders, oldOrders) =\u003e {\n      \t\tthis.updatePresentationTableEntries(orders, oldOrders)\n      }, {boot: true})\n\nThe method `updatePresentationTableEntries` generates presentation objects out of the given data objects, that will be given to the table.\n\nIf it is necessary that the presentation object has more or different attributes then the data object, it is possible to add or overwrite attributes in the method `addPresentationAttributesToItemFromEntity`, e.g.\n\n\t\taddPresentationAttributesToItemFromEntity (item, entity) {\n            item.lossType = app.util.format.DisplayFormatter.lossTypeFormatter(entity)\n            item.workorderState = entity.workOrder \u0026\u0026 entity.workOrder.postBoxState ? entity.workOrder.postBoxState.text : \"\"\n        }\n\nThis method is internal called for each object of the array (in this example the array this.model.value(\"global:data:orders\")) whereby the parameter `item` the generated presentation object is and `entity` the original data object.\nBut it is not allowed to overwrite the attribute `id` in this method. Use the method `presentationIdOfEntity` instead.\n\nThe table needs a unique id, this is generated internal, by default the attribute `id` of the data object is used. If another id is needed, if the unique identifier of the data object is no the attribute id or even more than one attributes it is possible to overwrite the method `presentationIdOfEntity (entity)`. This method needs to return the value of the unique identifier of the given data object (parameter entity).\n\n\t\tpresentationIdOfEntity (entity) {\n            return entity.orderId + entity.anotherAttribute\n        }\n\n\n#### TreeTable\n\nFor tree tables thie method `generatePresentationTableEntries` must be overwritten. To generate one table tree item call `generatePresentationTreeEntry(entity, pParent, isLeaf, defaultCollapsed)`. If more attributes are needed for the tree table presentation object it is handle like with flat tables, the attributes needs to be added or overwritten for each table presentation object (item) in the method `addPresentationAttributesToItemFromEntity`.\n\n\n### Filter table entries\n\nIf there is a modelfield that holds the filter value, you can observe this modelfield and then call the method `filterTableEntries` with the filter value as parameter, e.g.\n\n\t\t\tthis.observeParentModel(\"global:data:filterValue\", (ev, value) =\u003e {\n                this.filterTableEntries(value)\n            }, {boot: true})\n\n\n### Sort table entries\n\nIt is possible to set the inital sort object. Normally this has to be done in the lifecycle `create` like this:\n\t\t\n\t\t    this.model.value(\"data:sortObject\", {field: \"{attribute of the presentation object}\", asc: 1})\n\nSorting only possible if the \u003ca href='#options'\u003eGrid Option\u003c/a\u003e *sortable* is set to true.\n\n\n\n### Add, delete or update of a data object\n\nThe table were given presentation objects of data objects. It is possible that the array of data objects changes. Now the presentation objects or rather the table entries needs to be synchronized. Therefore the following needs to be done.\n\n#### Add a new data object\n\nThe method `addEntities(entities)` can be called to add one or more entities (the parameter entities can be one single data object or an array o data objects).\n\nAdditional the method `onItemAdded(args)` must be overwritten. There the modelfield that holds the data objects must be updated. \n\n\t\t// args = {item: tableEntry, index: index}\n\t\tonItemAdded(args) {\n            let addedEntity = args.item.entity\n            this.model.value('global:data:orders').push(addedEntity)\n        }\n\n\n#### Delete an existing data object\n\nThe method `addEntities(entities)` can be called to delete one or more entities (the parameter entities can be one single data object or an array o data objects).\n\nAdditional the method `onItemDeleted(args)` must be overwritten. There the modelfield that holds the data objects must be updated. \n\n\t\t// args = {item: tableEntry}\n\t\tonItemDeleted(args) {\n            let deletedEntity = args.item.entity\n            _.remove(this.model.value('global:data:orders'), deletedEntity)\n        }\n\n#### Update a data object\n\nThe method `updateEntities(entities)` can be called to update one or more entities (the parameter entities can be one single data object or an array o data objects).\n\nAdditional the method `onItemUpdated(args)` ( args = {item: tableEntry, index: index} ) has to be overwritten if necessary. It is possible that this is not necessary when the references of the updated entitites was change before and due this change the update of the presentation objects was triggered. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsg-systems%2Fuica-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsg-systems%2Fuica-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsg-systems%2Fuica-widgets/lists"}