# dc-extension-tree > > Tree field component for use in [Amplience Dynamic Content](https://amplience.com/dynamic-content) Latest version **0.1.0** (published 2020-01-29) · 0 weekly downloads ## Install ```sh npm install dc-extension-tree pnpm add dc-extension-tree yarn add dc-extension-tree bun add dc-extension-tree ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0 | | Published | 2020-01-29 | | First published | 2020-01-29 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 19 | | Unpacked size | 2.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | techiedarren | ## Links - npm: https://www.npmjs.com/package/dc-extension-tree - Homepage: http://./ - npm.io page: https://npm.io/package/dc-extension-tree ## Dependencies (19) - [ajv](https://npm.io/package/ajv.md) ^6.10.2 - [clsx](https://npm.io/package/clsx.md) ^1.0.4 - [react](https://npm.io/package/react.md) ^16.9.0 - [react-dnd](https://npm.io/package/react-dnd.md) ^10.0.2 - [react-dom](https://npm.io/package/react-dom.md) ^16.9.0 - [typescript](https://npm.io/package/typescript.md) 3.5.3 - [@types/node](https://npm.io/package/@types/node.md) 12.7.2 - [@types/react](https://npm.io/package/@types/react.md) 16.9.2 - [react-scripts](https://npm.io/package/react-scripts.md) ^3.2.0 - [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.39 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) 16.8.5 - [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.5.1 - [dc-extensions-sdk](https://npm.io/package/dc-extensions-sdk.md) ^1.0.1 - [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.5.1 - [react-sortable-tree](https://npm.io/package/react-sortable-tree.md) ^2.7.1 - [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^10.0.2 - [@material/react-material-icon](https://npm.io/package/@material/react-material-icon.md) ^0.15.0 - [unofficial-dynamic-content-ui](https://npm.io/package/unofficial-dynamic-content-ui.md) ^0.2.0 - [@syncfusion/ej2-react-navigations](https://npm.io/package/@syncfusion/ej2-react-navigations.md) ^17.3.27 ## Recent versions - 0.1.0 (latest) — 2020-01-29 ## README # dc-extension-tree > Tree field component for use in [Amplience Dynamic Content](https://amplience.com/dynamic-content) ![Amplience Dynamic Content Tree UI Extension](media/screenshot.png) ## Usage This extension can be used to edit a hierarchy of nodes. Each node in the tree has a "type" which maps to a particular node type defined inside the schema. ### Example Schema ```json { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "...", "title": "Menu", "description": "", "allOf": [{ "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content" }], "type": "object", "properties": { "menu": { "type": "array", "title": "Menu", "ui:extension": { "url": "https://unpkg.com/dc-extension-tree/build/" }, "items": { "oneOf": [{ "$ref": "#/definitions/menu" }] } } }, "propertyOrder": [], "definitions": { "menu": { "type": "object", "title": "Menu", "labelField": "label", "properties": { "type": { "const": "menu" }, "data": { "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Menu label" } } }, "children": { "type": "array", "items": { "oneOf": [{ "$ref": "#/definitions/menuItem" }] } } } }, "menuItem": { "type": "object", "title": "Menu Item", "labelField": "label", "properties": { "type": { "const": "menu-item" }, "data": { "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Menu label" } } } } } } } ``` ## Advanced ### Node Labels By default, nodes will be displayed using the “title” field from the node schema. You can also use a field from the node instead as the display label by setting the property “labelField” inside your node schema. Example: ```json { "type": "object", "labelField": "label", "properties": { "type": { "const": "menu" }, "data": { "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Menu label" } } } } } ``` ### Validation To enable validation, pass in an additional parameter “pointer” inside the “ui:extension” params. The pointer should indicate where in the schema the tree field is located, relative to the root of the schema, using a slash separated path. Example: ```json { "ui:extension": { "url": "...", "params": { "pointer": "/menu" } } } ``` ### Content Link Cards & Icons If your schema includes content link fields, the extension will show a default icon when the value is populated. You can override this with either a card or custom icon by providing the following settings: ```json { "ui:extension": { "url": "...", "params": { "contentTypes": { "cards": { "": "https://myapp.com/preview/card?vse={{vse.domain}}&content={{content.sys.id}}" }, "icons": { "": "https://myapp.com/icons/icon-banner.png" } } } } } ``` You can also use a wildcard “*” to use the same card or icon for every content type: ```json { "ui:extension": { "url": "...", "params": { "contentTypes": { "cards": { "*": "https://myapp.com/preview/card?vse={{vse.domain}}&content={{content.sys.id}}" }, "icons": { "*": "https://myapp.com/icons/icon-banner.png" } } } } } ``` ## License Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --- _Source: https://npm.io/package/dc-extension-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._