diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index 36c70a8..57be214 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -1,8 +1,4 @@
 /**
- * File: edit-widget-control-creator.js
- * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
- * Date: 23.05.2017
- *
  * This file is part of VILLASweb.
  *
  * VILLASweb is free software: you can redistribute it and/or modify
@@ -37,50 +33,50 @@ import EditWidgetMinMaxControl from './edit-widget-min-max-control';
 import EditWidgetHTMLContent from './edit-widget-html-content';
 import EditWidgetParametersControl from './edit-widget-parameters-control';
 
-export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, signals, handleChange) {
+export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, signals, handleChange) {
     // Use a list to concatenate the controls according to the widget type
     var DialogControls = [];
 
     switch(widgetType) {
         case 'CustomAction':
             DialogControls.push(
-              <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-              <EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
+              <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
+              <EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} handleChange={e => handleChange(e)} />,
               <EditWidgetParametersControl key={2} widget={widget} controlId={'actions'} label={'Actions'} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Action':
             DialogControls.push(
-              <EditWidgetSignalControl key={0} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
+              <EditWidgetSignalControl key={0} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
             );
             break;
         case 'Value':
             DialogControls.push(
-                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
+                <EditWidgetSignalControl key={1} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextSizeControl key={2} widget={widget} handleChange={e => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={3} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Lamp':
               DialogControls.push(
-                <EditWidgetSignalControl key={0} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextControl key={1} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetColorControl key={2} widget={widget} controlId={'on_color'} label={'Color On'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={3} widget={widget} controlId={'off_color'} label={'Color Off'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSignalControl key={0} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={1} widget={widget} controlId={'customProperties.threshold'} label={'Threshold'} placeholder={'0.5'} handleChange={e => handleChange(e)} />,
+                <EditWidgetColorControl key={2} widget={widget} controlId={'on_color'} label={'Color On'} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetColorControl key={3} widget={widget} controlId={'off_color'} label={'Color Off'} handleChange={(e) => handleChange(e)} />,
               );
               break;
         case 'Plot':
             DialogControls.push(
-                <EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetSignalsControl key={1} controlId={'signalIDs'} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTimeControl key={0} widget={widget} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSignalsControl key={1} controlId={'signalIDs'} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={2} controlId={'customProperties.ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetMinMaxControl key={3} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Table':
             DialogControls.push(
-                <EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={1} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
             );
             break;
@@ -88,14 +84,14 @@ export default function CreateControls(widgetType = null, widget = null, session
             // Restrict to only image file types (MIME)
             let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
             DialogControls.push(
-                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
+                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetAspectControl key={1} widget={widget} handleChange={e => handleChange(e)} />
             );
             break;
         case 'Gauge':
             DialogControls.push(
-                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
+                <EditWidgetSignalControl key={1} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={2} widget={widget} controlId="colorZones" text="Show color zones" handleChange={e => handleChange(e)} />,
                 <EditWidgetColorZonesControl key={3} widget={widget} handleChange={e => handleChange(e)} />,
                 <EditWidgetMinMaxControl key={4} widget={widget} controlId="value" handleChange={e => handleChange(e)} />
@@ -103,17 +99,17 @@ export default function CreateControls(widgetType = null, widget = null, session
             break;
         case 'PlotTable':
             DialogControls.push(
-                <EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextControl key={1} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTimeControl key={2} widget={widget} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTimeControl key={2} widget={widget} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetMinMaxControl key={3} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Slider':
             DialogControls.push(
-                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
-                <EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
+                <EditWidgetOrientation key={1} widget={widget} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSignalControl key={2} widget={widget} input signals={signals} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={3} text={'Continous Update'} controlId={'continous_update'} widget={widget} input handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={4} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />,
                 <EditWidgetMinMaxControl key={5} widget={widget} controlId={'range'} handleChange={e => handleChange(e)} />,
@@ -123,8 +119,8 @@ export default function CreateControls(widgetType = null, widget = null, session
             break;
         case 'Button':
             DialogControls.push(
-                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
-                <EditWidgetSignalControl key={1} widget={widget} input validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
+                <EditWidgetSignalControl key={1} widget={widget} input signals={signals} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={2} widget={widget} controlId={'toggle'} text="Toggle" handleChange={e => handleChange(e)} />,
                 <EditWidgetNumberControl key={3} widget={widget} controlId={'on_value'} label={'On Value'} defaultValue={1} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetNumberControl key={4} widget={widget} controlId={'off_value'} label={'Off Value'} defaultValue={0} handleChange={(e) => handleChange(e)} />
@@ -132,13 +128,13 @@ export default function CreateControls(widgetType = null, widget = null, session
             break;
         case 'Box':
             DialogControls.push(
-                <EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background color'} handleChange={e => handleChange(e)} />
             );
             break;
         case 'Label':
             DialogControls.push(
-                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
                 <EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
                 <EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
             );
@@ -152,14 +148,14 @@ export default function CreateControls(widgetType = null, widget = null, session
             // Restrict to only xml files (MIME)
             let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
             DialogControls.push(
-                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
+                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} handleChange={(e) => handleChange(e)} />
             );
             break;
 
         case 'Input':
             DialogControls.push(
-                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
+                <EditWidgetSignalControl key={2} widget={widget} input  signals={signals} handleChange={(e) => handleChange(e)} />
             );
             break;
 
diff --git a/src/widget/edit-widget/edit-widget-parameters-control.js b/src/widget/edit-widget/edit-widget-parameters-control.js
index 3a817e3..d1cf65c 100644
--- a/src/widget/edit-widget/edit-widget-parameters-control.js
+++ b/src/widget/edit-widget/edit-widget-parameters-control.js
@@ -49,7 +49,7 @@ class EditWidgetParametersControl extends Component {
 
   render() {
     return (
-        <FormGroup controlId={this.props.controlId} validationState={this.props.validate ? this.props.validate(this.props.controlId) : null}>
+        <FormGroup controlId={this.props.controlId}>
           <FormLabel>{this.props.label}</FormLabel>
           <ParametersEditor content={this.state.widget[this.props.controlId] || {}} onChange={(v)=> this.handleChange(v)} />
         </FormGroup>
diff --git a/src/widget/edit-widget/edit-widget-text-control.js b/src/widget/edit-widget/edit-widget-text-control.js
index c0fc069..a8624c6 100644
--- a/src/widget/edit-widget/edit-widget-text-control.js
+++ b/src/widget/edit-widget/edit-widget-text-control.js
@@ -26,22 +26,47 @@ class EditWidgetTextControl extends Component {
   constructor(props) {
     super(props);
 
+    let value = "";
+    let parts = props.controlId.split('.');
+    if (parts.length === 1) {
+      // not a customProperty
+      value=props.widget[props.controlId]
+    } else if(parts.length === 2){
+      // a custom property
+      value=props.widget[parts[0]][parts[1]]
+    } else {
+      value="controlID contains too many dots"
+    }
+
     this.state = {
-      widget: {}
+      value: value
     };
   }
 
   static getDerivedStateFromProps(props, state){
+
+    let value = "";
+    let parts = props.controlId.split('.');
+    if (parts.length === 1) {
+      // not a customProperty
+      value=props.widget[props.controlId]
+    } else if(parts.length === 2){
+      // a custom property
+      value=props.widget[parts[0]][parts[1]]
+    } else {
+      value="controlID contains too many dots"
+    }
+
     return {
-      widget: props.widget
-    };
+      value: value
+    }
   }
 
   render() {
     return (
-        <FormGroup controlId={this.props.controlId} valid={this.props.validate ? this.props.validate(this.props.controlId) : null}>
+        <FormGroup controlId={this.props.controlId}>
           <FormLabel>{this.props.label}</FormLabel>
-          <FormControl type="text" placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
+          <FormControl type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
           <FormControl.Feedback />
         </FormGroup>
     );
diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js
index e110db3..de0bef1 100644
--- a/src/widget/edit-widget/edit-widget.js
+++ b/src/widget/edit-widget/edit-widget.js
@@ -44,7 +44,7 @@ class EditWidgetDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      if (this.valid) {
+      if (this.validChanges()) {
         this.props.onClose(this.state.temporal);
       }
     } else {
@@ -104,17 +104,17 @@ class EditWidgetDialog extends React.Component {
       this.setState({ temporal: changeObject});
 
     } else {
-      console.log("edit-widget: type text");
-      if(this.state.temporal[e.target.id]){
-
-        console.log("edit-widget: type: " , e.target.type, " target.id", e.target.id, "target.value", e.target.value)
+        console.log("edit-widget: text type");
+        let parts = e.target.id.split('.');
         let finalChange = this.state.temporal;
-
-        finalChange[e.target.id] = e.target.value;
-
-        console.log("edit-widget: finalChange", finalChange);
-        this.setState({ temporal: finalChange});
-      }
+        if (parts.length === 1 && this.state.temporal[e.target.id]) {
+          // not a customProperty
+          finalChange[e.target.id] = e.target.value;
+        } else if (parts.length === 2){
+          // a customProperty is changed
+          finalChange[parts[0]][parts[1]] = e.target.value;
+        }
+        this.setState({temporal: finalChange});
     }
   }
 
@@ -123,18 +123,16 @@ class EditWidgetDialog extends React.Component {
     this.setState({ temporal: widget_data });
   }
 
-  validateForm(target) {
-    // check all controls
+  validChanges() {
+    // check that widget has a name
     var name = true;
 
     if (this.state.name === '') {
       name = false;
     }
 
-    //this.valid = name;
     this.valid = name;
-    // return state to control
-    if (target === 'name') return name ? "success" : "error";
+    return name;
   }
 
   render() {
@@ -146,7 +144,6 @@ class EditWidgetDialog extends React.Component {
             this.state.temporal,
             this.props.sessionToken,
             this.props.files,
-            (id) => this.validateForm(id),
             this.props.signals,
             (e) => this.handleChange(e));
     }