{"id":13618691,"url":"https://github.com/mgschoen/contentful-reference-matrix-field-app","last_synced_at":"2025-07-19T20:04:01.630Z","repository":{"id":54434598,"uuid":"317292785","full_name":"mgschoen/contentful-reference-matrix-field-app","owner":"mgschoen","description":"Contentful App that adds UI for a table-like list of references with other associated data.","archived":false,"fork":false,"pushed_at":"2021-02-18T09:35:15.000Z","size":4074,"stargazers_count":32,"open_issues_count":1,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T23:03:55.524Z","etag":null,"topics":["cms","contentful","contentful-app","matrix","references","table","ui-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mgschoen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-30T17:10:34.000Z","updated_at":"2025-03-05T03:43:17.000Z","dependencies_parsed_at":"2022-08-13T15:31:19.487Z","dependency_job_id":null,"html_url":"https://github.com/mgschoen/contentful-reference-matrix-field-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgschoen%2Fcontentful-reference-matrix-field-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgschoen%2Fcontentful-reference-matrix-field-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgschoen%2Fcontentful-reference-matrix-field-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgschoen%2Fcontentful-reference-matrix-field-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mgschoen","download_url":"https://codeload.github.com/mgschoen/contentful-reference-matrix-field-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248511238,"owners_count":21116371,"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":["cms","contentful","contentful-app","matrix","references","table","ui-extension"],"created_at":"2024-08-01T21:00:29.168Z","updated_at":"2025-04-12T03:25:32.554Z","avatar_url":"https://github.com/mgschoen.png","language":"TypeScript","funding_links":[],"categories":[":star: Awesome Apps"],"sub_categories":[],"readme":"# Contentful Reference Matrix Field App\n\nThis [Contentful App](https://www.contentful.com/developers/docs/extensibility/app-framework/) adds a custom UI that represents a list of references with some associated plain text – such as a list of recipe ingredients with the respective amounts.\n\n![](./assets/contentful-ingredients-field-demo.gif)\n\nInspired by [this video](https://www.youtube.com/watch?v=OtmV3TPTbRs) and bootstrapped with [Create Contentful App](https://github.com/contentful/create-contentful-app).\n\n## Functionality overview\n\n* Can be used on JSON Object fields\n* Adds a table-like UI with an entry selection modal\n* Produces data in the form of an array of JSON objects\n* Each object represents a tuple of\n    * a relation to another entry\n    * some arbitrary text\n* Items can be sorted via drag and drop\n* The following things can be configured:\n    * JSON keys\n    * Allowed content types for referenced entries\n    * Label for the text field\n\n## Example Data structure\n\nThe data produced by the reference matrix field type looks something like this:\n\n```json\n[\n    {\n        \"amount\": \"2 tbsp\",\n        \"id\": \"4skkkYCvbdHVhRfI5hdW7o\"\n    },\n    {\n        \"amount\": \"3 tsp\",\n        \"id\": \"2xFnDNGBloZzp59kddJBI6\"\n    },\n    {\n        \"amount\": \"200g\",\n        \"id\": \"2uqKK4iWHxhlRrGn24OLvy\"\n    }\n]\n```\n\nIn this example, `id` represents a relation to an entry.\n\n`amount` is an unformatted string holding additional information about the reference.\n\nNote that both JSON keys can be configured, as well as the allowed content types for referenced entries.\n\n## Setup for Usage in Contentful\n\n(1) Build your app with `$ npm run build` and host the files found in `./build/` somewhere statically.\n\n(2) In your Contentful account, create a new private app. Give it a name and enter the URL that points to the hosted version of your `./build/` directory.\n\n(3) Under \"Location\", check \"Entry field\" and \"JSON Object\"\n\n(4) Under \"Instance Parameter Defintions\", add four instance parameters with the following IDs, each of them of type \"Short text\":\n\n  - `referenceKey`\n  - `textKey`\n  - `textLabel`\n  - `contentTypes`\n\n(5) Save the app and install it to the space(s) you like.\n\n(6) When you add or edit a JSON Object field in your content model, you should now see your app in the \"Appearance\" tab, along with fields for the instance parameters you configured. Fill them out as follows:\n\n| Parameter | Description | Default |\n|-----------|-------------|---------|\n| `referenceKey`| the JSON key used for storing the referenced entry's id | `\"id\"` |\n| `textKey`| the JSON key used for storing the associated text | `\"text\"` |\n| `textLabel`| used as a placeholder for the text input fields | `\"Text\"` |\n| `contentTypes`| a comma separated list of content types that can be referenced (empty means all content types allowed) | `\"\"` |\n\n\n## Development\n\nIn the project directory, you can run:\n\n#### `npm start`\n\nCreates or updates your app definition in contentful, and runs the app in development mode.\nOpen your app to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n#### `npm run build`\n\nBuilds the app for production to the `build` folder.\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\nYour app is ready to be deployed!\n\n## More about Contentful Apps\n\n[Read more](https://www.contentful.com/developers/docs/extensibility/app-framework/create-contentful-app/) and check out the video on how to use the CLI.\n\nCreate Contentful App uses [Create React App](https://create-react-app.dev/). You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started) and how to further customize your app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgschoen%2Fcontentful-reference-matrix-field-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmgschoen%2Fcontentful-reference-matrix-field-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgschoen%2Fcontentful-reference-matrix-field-app/lists"}