{"id":13568243,"url":"https://github.com/eea/volto-object-widget","last_synced_at":"2025-04-11T06:52:38.736Z","repository":{"id":39969749,"uuid":"290582428","full_name":"eea/volto-object-widget","owner":"eea","description":"Volto widgets to edit simple javascript objects. Published as @eeacms/volto-object-widget","archived":false,"fork":false,"pushed_at":"2025-03-12T15:13:14.000Z","size":316,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-03-25T04:41:57.920Z","etag":null,"topics":["plone","react","volto","volto-addon","volto-widget","volto-widgets"],"latest_commit_sha":null,"homepage":"","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/eea.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2020-08-26T19:08:05.000Z","updated_at":"2024-04-22T17:47:56.000Z","dependencies_parsed_at":"2023-02-08T12:45:36.015Z","dependency_job_id":"c70d2298-06b7-41c4-ae2b-6dc19bf988c4","html_url":"https://github.com/eea/volto-object-widget","commit_stats":{"total_commits":179,"total_committers":14,"mean_commits":"12.785714285714286","dds":0.782122905027933,"last_synced_commit":"817718c4f555f951b235f3cfc0f9022bdb1b4ff9"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":"eea/volto-addon-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-object-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-object-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-object-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-object-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eea","download_url":"https://codeload.github.com/eea/volto-object-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358548,"owners_count":21090401,"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":["plone","react","volto","volto-addon","volto-widget","volto-widgets"],"created_at":"2024-08-01T14:00:22.097Z","updated_at":"2025-04-11T06:52:38.713Z","avatar_url":"https://github.com/eea.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":["Widgets"],"readme":"# volto-object-widget\n\n[![Releases](https://img.shields.io/github/v/release/eea/volto-object-widget)](https://github.com/eea/volto-object-widget/releases)\n\n[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-object-widget%2Fmaster\u0026subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-object-widget/job/master/display/redirect)\n[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-master\u0026metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-master)\n[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-master\u0026metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-master)\n[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-master\u0026metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-master)\n[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-master\u0026metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-master)\n\n[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-object-widget%2Fdevelop\u0026subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-object-widget/job/develop/display/redirect)\n[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-develop\u0026metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-develop)\n[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-develop\u0026metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-develop)\n[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-develop\u0026metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-develop)\n[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget-develop\u0026metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget-develop)\n\n[Volto](https://github.com/plone/volto) add-on: Various Volto schema-based widgets.\n\n## Features\n\nThis Volto addon provides several \"abstract\" widgets, to allow complex\ninformation to be editable by the schema-based forms. It centers around the\nconcept: \"we can create a form to edit a JSON object by using a schema\" and so\nit provides, right now, widgets to edit \"list of JSON objects\", a \"mapping of\nJSON objects\" and a single \"JSON object, but I choose the schema for it\".\n\n### FlatListObject\n\n![Flat List object](https://raw.githubusercontent.com/eea/volto-object-widget/master/img/flat-list-widget.png)\n\nThis widget allows you to edit a list of objects by creating, editing and\ndeleting instances of objects editable with the provided `schema` parameter.\nThe list is sortable with drag\u0026drop. You can also provide a schema extender,\na function with signature `(schema, data) =\u003e schema`, which will adjust, per\ninstance of object, its schema. To use this widget, in the schema, set the\n`widget` field to `object_list_inline`.\n\nExample of how the data could look like for a block:\n\n```\n\"a55c5053-ba81-4f73-ab29-7cdea74df20f\": {\n\t\"@type\": \"dataTable\",\n\t\"columns\": [\n\t\t{\n\t\t\t\"@id\": \"f899ca76-68be-4ded-aa0b-669c04c27309\",\n\t\t\t\"column\": \" PERC_HA_07\\n(in %)\",\n\t\t\t\"renderer\": \"progress\",\n\t\t\t\"title\": \"21\"\n\t\t},\n\t\t{\n\t\t\t\"@id\": \"94315c5a-e031-4b7e-acb2-93887878a252\",\n\t\t\t\"column\": \" PERC_HA_07\\n(in %)\",\n\t\t\t\"title\": \"12\"\n\t\t}\n\t],\n}\n```\n\nThe `columns` field, in this case, is data generated by the `FlatListObject`.\nThe schema for this field could look like (`ColumnSchema()` just generates\nanother instance of a schema, suitable for the `column` definition of our\nspecific use case):\n\n```\ncolumns: {\n  title: 'Columns',\n  description: 'Leave empty to show all columns',\n  schema: ColumnSchema(),\n  widget: 'object_list_inline',\n},\n```\n\n### Mapping Widget\n\n![Mapping widget](https://raw.githubusercontent.com/eea/volto-object-widget/master/img/mapping-widget.png)\n\nThis widget allows editing the properties of an object. For example, in the\nfollowing block data, the `row_colors` value is generated by an instance of the\n`MappingWidget`.\n\n```\n\"4430a32a-a266-497b-88e7-72fead5ab718\": {\n  \"@type\": \"dottedTableChart\",\n  \"column_data\": \"habitat_group\",\n  \"row_colors\": {\n    \"Bad\": \"#ed1834\",\n    \"F - Heathland, scrub and tundra\": \"#88c24f\",\n    \"Good\": \"#3c8000\",\n    \"Poor\": \"#f2a70e\",\n    \"Unknown\": \"#8d8d8d\"\n  },\n  \"row_data\": \"assessment\",\n  \"size_data\": \"quantity\"\n},\n```\n\nYou need to provide the `options`, which is a list of objects with `{id, title}` and the `field_props`, which are parameters for the actual field that\nwill be used to edit the values. In our case the schema definition that was\nused to edit the above value is (note, the options are empty, we're populating\nthem in the edit component, before passing the schema to the form):\n\n```\nrow_colors: {\n  title: 'Colors',\n  widget: 'option_mapping',\n  field_props: {\n    widget: 'simple_color',\n    available_colors: settings.available_colors,\n  },\n  options: [],\n}\n```\n\nTo use this widget, in the schema, set the `widget` field to `option_mapping`.\n\n### Object by type\n\n![Object by type](https://raw.githubusercontent.com/eea/volto-object-widget/master/img/object-by-type-widget.png)\n\nWith this widget you can choose the type of value that will be used, from\na predefined list of schemas. A schema that would use this type of widget could\nlook like:\n\n```\nconst LinkEditSchema = {\n  title: 'Link',\n  fieldsets: [\n    {\n      id: 'default',\n      title: 'Default',\n      fields: ['link'],\n    },\n  ],\n  properties: {\n    link: {\n      title: 'Link',\n      widget: 'object_by_type',\n      schemas: [\n        {\n          id: 'internal',\n          icon: internalSVG,\n          schema: InternalLinkSchema,\n        },\n        {\n          id: 'external',\n          icon: externalSVG,\n          schema: ExternalLinkSchema,\n        },\n        {\n          id: 'email',\n          icon: emailSVG,\n          schema: EmailLinkSchema,\n        },\n      ],\n    },\n  },\n  required: [],\n};\n```\n\nTo use this widget, in the schema, set the `widget` field to `object_by_type`.\n\n## Getting started\n\n### Try volto-object-widget with Docker\n\n      git clone https://github.com/eea/volto-object-widget.git\n      cd volto-object-widget\n      make\n      make start\n\nGo to http://localhost:3000\n\n### Add volto-object-widget to your Volto project\n\n1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone\n\n   ```Bash\n   docker compose up backend\n   ```\n\n1. Start Volto frontend\n\n* If you already have a volto project, just update `package.json`:\n\n   ```JSON\n   \"addons\": [\n       \"@eeacms/volto-object-widget\"\n   ],\n\n   \"dependencies\": {\n       \"@eeacms/volto-object-widget\": \"*\"\n   }\n   ```\n\n* If not, create one:\n\n   ```\n   npm install -g yo @plone/generator-volto\n   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-object-widget\n   cd my-volto-project\n   ```\n\n1. Install new add-ons and restart Volto:\n\n   ```\n   yarn\n   yarn start\n   ```\n\n1. Go to http://localhost:3000\n\n1. Happy editing!\n\n## Release\n\nSee [RELEASE.md](https://github.com/eea/volto-object-widget/blob/master/RELEASE.md).\n\n## How to contribute\n\nSee [DEVELOP.md](https://github.com/eea/volto-object-widget/blob/master/DEVELOP.md).\n\n## Copyright and license\n\nThe Initial Owner of the Original Code is European Environment Agency (EEA).\nAll Rights Reserved.\n\nSee [LICENSE.md](https://github.com/eea/volto-object-widget/blob/master/LICENSE.md) for details.\n\n## Funding\n\n[European Environment Agency (EU)](http://eea.europa.eu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feea%2Fvolto-object-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feea%2Fvolto-object-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feea%2Fvolto-object-widget/lists"}