diff --git a/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte b/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
new file mode 100644
index 0000000000..9ad9fc990b
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
@@ -0,0 +1,22 @@
+<script>
+  import OptionSelect from "./OptionSelect.svelte"
+  import { backendUiStore } from "builderStore"
+  import { onMount } from "svelte"
+
+  export let componentInstance = {}
+
+  let datasource = componentInstance.datasource
+  const models = $backendUiStore.models
+
+  let options = []
+
+  $: model = datasource ? models.find(m => m._id === datasource.modelId) : null
+
+  $: if (model) {
+    options = datasource.isModel
+      ? Object.keys(model.schema)
+      : Object.keys(model.views[datasource.name].schema)
+  }
+</script>
+
+<OptionSelect {options} />
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 304a63dc48..5cb92a0e2c 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -2,6 +2,7 @@
   import { onMount, beforeUpdate, afterUpdate } from "svelte"
   import Portal from "svelte-portal"
   import { buildStyle } from "../../helpers.js"
+
   export let options = []
   export let value = ""
   export let styleBindingProperty
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 46ca1b1a05..d623bd1e2f 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -30,6 +30,10 @@
     { key: "favicon", label: "Favicon", control: Input },
   ]
 
+  const canRenderControl = (key, dependsOn) =>
+    propExistsOnComponentDef(key) &&
+    (!dependsOn || componentInstance[dependsOn])
+
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
 </script>
@@ -58,14 +62,17 @@
 
 {#if panelDefinition && panelDefinition.length > 0}
   {#each panelDefinition as definition}
-    {#if propExistsOnComponentDef(definition.key)}
+    {#if canRenderControl(definition.key, definition.dependsOn)}
       <PropertyControl
         control={definition.control}
         label={definition.label}
         key={definition.key}
         value={componentInstance[definition.key]}
         {onChange}
-        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+        props={{ componentInstance, ...excludeProps(definition, [
+            'control',
+            'label',
+          ]) }} />
     {/if}
   {/each}
 {:else}
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index f71a4b23a8..8f9e962e4c 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -3,6 +3,7 @@ import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
 import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
+import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -582,6 +583,18 @@ export default {
                     key: "datasource",
                     control: ModelViewSelect,
                   },
+                  {
+                    label: "Name Field",
+                    key: "nameKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Value Field",
+                    key: "valueKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
                   {
                     label: "Animate Chart",
                     key: "isAnimated",
@@ -617,16 +630,6 @@ export default {
                       "yellow",
                     ],
                   },
-                  {
-                    label: "Name Field",
-                    key: "nameKey",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Field",
-                    key: "valueKey",
-                    control: Input,
-                  },
                   {
                     label: "External Radius",
                     key: "externalRadius",
diff --git a/packages/standard-components/.gitignore b/packages/standard-components/.gitignore
index 5b4f338c89..e825ec0459 100644
--- a/packages/standard-components/.gitignore
+++ b/packages/standard-components/.gitignore
@@ -2,5 +2,4 @@
 node_modules
 yarn.lock
 package-lock.json
-dist/index.js
-dist/index.js.map
+dist
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 170385bb02..754ac407de 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -358,6 +358,7 @@
 		"data": true,
 		"props": {
 			"datasource": "string",
+			"data": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 333c4fcb32..af10d8bb62 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -59,7 +59,7 @@
 
   onMount(async () => {
     if (chart) {
-      if (model) {
+      if (datasource) {
         let _data = await fetchData(datasource)
         data = checkAndReformatData(_data)
         if (data.length === 0) {