diff --git a/.gitignore b/.gitignore
index a611702..cae7da5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,8 @@
**/generated
# output directory
-/out
\ No newline at end of file
+/out
+
+# msbuild output directories
+/bin
+/obj
\ No newline at end of file
diff --git a/README.md b/README.md
index d12a1ad..c9c0231 100644
--- a/README.md
+++ b/README.md
@@ -9,3 +9,66 @@ The control is styled to match the input fields on a Model-driven app.
Also matches the hover effects
+
+
+# TreeView
+The tree view can be used to visualize a record and it's children (in a 1-N relationship). It has special support for attachments/annotations, enabling you to open or download the attachments with at double click.
+
+
+
+## Adding it to the form
+To add the component to a form, simply add a field with the type `SingleLine.TextArea`. Then find the field properties and locate the final tab, called "Controls".
+Here, you can add the TreeView control, and enable it for all devices. Marking it will reveal all the parameters (properties) you can set for the component. Here is a rundown:
+
+
+| **PROPERTY** | **DESCRIPTION** |
+|--|--|
+| **Dummy Property** | Simply the field it bounds to on the form. You can leave this empty, it is simply used to get the context and use the webapi. |
+| **Max height** | Leave empty to allow the component to expand, or enter a positive number, that sets a maximum height in pixels. |
+| **Use mock data** | Used for testing, fills the tree with fake data that can't be clicked. Write `yes` to allow fake data. |
+| **Download Attachments** | Double clicking an attachment/image will by default open the image or PDF in a new tab. If you wish to download the picture instead, write `yes` here. |
+| **Relationship Map** | A JSON string that defines the relationship from the root entity and the children the tree view should display. |
+
+
+
+### The relationship map
+This input is needed for the component to know what records to fetch, with everything it needs for the query. If you don't know JSON, have a read on [https://en.wikipedia.org/wiki/JSON]().
+
+A Relationship map could look like this:
+```json
+{
+ "entityName" : "mvow_supplierassessment",
+ "titleField" : "mvow_name",
+ "children": [
+ {
+ "entityName" : "mvow_assessment_question",
+ "titleField" : "mvow_name",
+ "parentLinkField" : "mvow_AssessmentLink",
+ "children": [
+ {
+ "entityName" : "annotation",
+ "titleField" : "filename",
+ "parentLinkField" : "_objectid_value"
+ }
+ ]
+ }
+ ]
+}
+```
+
+Every object (defined with {}) has the following attributes:
+
+| **ATTRIBUTE** | **DESCRIPTION** |
+|--|--|
+| entityName | The schema name of the entity to search for. |
+| titleField | Schema name of the field on the entity that should be used as the label in the tree. |
+| parentLinkField | _Optional_ - Needed on all children. Is used to find the records related to the parent. |
+| children | _Optional_ A list of more relationship map objects. This is what defines what children will be shown in the tree view. |
+
+You can find schema names in any solution in the system.
+
+#### The Microsoft bug
+Even though the type of the relationship supports many characters, the actual input field for the parameter has a cap of 100. This is only set client-side and can be changed in the DOM. **You need to do this every time you change the relationship map**.
+How to do it can be seen in the following video:
+
+
\ No newline at end of file
diff --git a/Solution/.gitignore b/Solution/.gitignore
new file mode 100644
index 0000000..317e653
--- /dev/null
+++ b/Solution/.gitignore
@@ -0,0 +1,5 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# msbuild output directories
+/bin
+/obj
\ No newline at end of file
diff --git a/Solution/Other/Customizations.xml b/Solution/Other/Customizations.xml
new file mode 100644
index 0000000..9716685
--- /dev/null
+++ b/Solution/Other/Customizations.xml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1033
+
+
\ No newline at end of file
diff --git a/Solution/Other/Relationships.xml b/Solution/Other/Relationships.xml
new file mode 100644
index 0000000..c22a38e
--- /dev/null
+++ b/Solution/Other/Relationships.xml
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/Solution/Other/Solution.xml b/Solution/Other/Solution.xml
new file mode 100644
index 0000000..bc3e78a
--- /dev/null
+++ b/Solution/Other/Solution.xml
@@ -0,0 +1,94 @@
+
+
+
+
+ DelegatePCF
+
+
+
+
+
+ 1.0
+
+ 2
+
+
+ Delegate
+
+
+
+
+
+
+
+
+
+
+
+ dg
+
+ 54677
+
+
+
+ 1
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+ 2
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Solution/delegatepcf.cdsproj b/Solution/delegatepcf.cdsproj
new file mode 100644
index 0000000..bdc8785
--- /dev/null
+++ b/Solution/delegatepcf.cdsproj
@@ -0,0 +1,48 @@
+
+
+
+ $(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\PowerApps
+
+
+
+
+
+
+ 678feca6-7e92-4950-865b-5b844a3cf3b9
+ v4.6.2
+
+ net462
+ PackageReference
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/TreeView/Components/TreeView.tsx b/TreeView/Components/TreeView.tsx
new file mode 100644
index 0000000..7455b8e
--- /dev/null
+++ b/TreeView/Components/TreeView.tsx
@@ -0,0 +1,153 @@
+import * as React from 'react';
+import {Tree, Input, Skeleton, Empty, Alert} from 'antd';
+import { ITreeNode } from '../Models/TreeNode';
+import { IFetcher } from '../Fetchers/IFetcher';
+import { AntTreeNode } from 'antd/lib/tree';
+const { TreeNode } = Tree;
+const { Search } = Input;
+
+export interface ITreeViewProps{
+ fetcher: IFetcher;
+ openWindow: (node: ITreeNode) => void;
+ maxHeight?: number;
+}
+
+export function TreeWithSearch(props: ITreeViewProps){
+ // STATES
+ const [isLoaded, setIsLoaded] = React.useState(false);
+ const [tree, setTree] = React.useState([]);
+ const [search, setSearch] = React.useState('');
+ const [expandKeys, setExpandKeys] = React.useState([]);
+ const [autoExpandParent, setAutoExpandParent] = React.useState(true);
+ const [errorMsg, setErrorMsg] = React.useState('');
+
+ // EFFECTS (onload)
+ React.useEffect(() => {
+ let fetcher = props.fetcher;
+ fetcher.fetchTrees().then(v => {
+ setTree(v);
+ setExpandKeys(() => keysOfAllParents(v));
+ setIsLoaded(true);
+ }).catch(e => {
+ setTree([]);
+ setErrorMsg(e);
+ setIsLoaded(true);
+ });
+ }, [props.fetcher]);
+
+ // FUNCTIONS
+ let keysOfAllParents = (t: ITreeNode[] | undefined): string[] => {
+ if(t === undefined) return[];
+ let parents = t.filter(i => i.children !== undefined);
+ if (parents.length < 1) return [];
+ let childKeys: string[] = [];
+ parents.forEach(i => childKeys = childKeys.concat(keysOfAllParents(i.children)))
+ return childKeys.concat(parents.map(i => i.id));
+ };
+
+ let onExpand = (expandedKeys: string[]) => {
+ setExpandKeys(expandedKeys);
+ setAutoExpandParent(false);
+ };
+
+ let findNameInTree = (n: string, t: ITreeNode[]): ITreeNode[] => {
+ let nodes = t.filter(i => i.title.toLowerCase().includes(n.toLowerCase()));
+ let childNodes: ITreeNode[] = [];
+ t.forEach(i => {
+ if(i.children) childNodes = childNodes.concat(findNameInTree(n, i.children))
+ });
+ return nodes.concat(childNodes);
+ };
+
+ let findFromIdInTree = (id: string, t: ITreeNode[]): ITreeNode | undefined => {
+ let nodes = t.filter(i => i.id === id);
+ if(nodes.length > 0) return nodes[0]; // There may be only one!
+
+ let childNode: ITreeNode | undefined = undefined;
+ t.forEach(i => {
+ if(i.children) {
+ let tmpNode = findFromIdInTree(id, i.children);
+ if(tmpNode !== undefined) childNode = tmpNode;
+ }
+ });
+
+ return childNode;
+ };
+
+ let onSearch = (e) => {
+ let { value } = e.target;
+ let matchingNodes = findNameInTree(value, tree);
+
+ if(matchingNodes.length < 1){
+ setExpandKeys(keysOfAllParents(tree));
+ setSearch('');
+ return;
+ }
+
+ let keys = matchingNodes.map(i => i.id);
+ setExpandKeys(keys);
+ setSearch(value);
+ };
+
+ let onDoubleClick = (e, n: AntTreeNode) => {
+ let id = n.props.eventKey;
+ if(id === undefined) return;
+ try {
+ let node = findFromIdInTree(id, tree);
+ if(node === undefined) return;
+ props.openWindow(node);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ let generateTree = (Tree: ITreeNode[]) => {
+ return Tree.map(node => {
+ let index = node.title.toLowerCase().indexOf(search.toLowerCase());
+ let title = node.title.toLowerCase().includes(search.toLowerCase()) ? (
+
+ {node.title.substring(0, index)}
+ {search}
+ {node.title.substr(index + search.length)}
+
+ ) : (
+ {node.title}
+ );
+ return (
+
+ {node.children !== undefined && generateTree(node.children)}
+
+ );
+ });
+ };
+
+ // STYLE
+ let containerStyle: React.CSSProperties = {padding: '10px', textAlign: 'left'};
+ containerStyle = props.maxHeight ?
+ {
+ ...containerStyle,
+ maxHeight: props.maxHeight,
+ display: 'flex',
+ flexDirection: 'column'
+ } : containerStyle;
+
+ // RENDER
+ return(
+
+ {errorMsg === '' ||
}
+ {isLoaded &&
}
+ {!isLoaded ?
+
:
+ tree.length < 1 ?
+
:
+
+ {generateTree(tree)}
+ }
+