diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html
index 7e5ba51..3f64484 100755
--- a/controllets/data-sevc-controllet/data-sevc-controllet.html
+++ b/controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -47,6 +47,7 @@
 <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
 <link rel="import" href="../treeview-controllet/treeview-controllet.html">
+<link rel="import" href="../text-element-controllet/text-element-controllet.html">
 
 <!--
  `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.
@@ -253,6 +254,11 @@ Example:
                     height: 50vh;
                 }
 
+                #idm_layout_main_container{
+                    position: relative;
+                    height: 25vh;
+                }
+
                 paper-menu{
                     width: 100%;
                 }
@@ -411,6 +417,13 @@ Example:
                                             </div>
                                             <div id="datalet_idm_fields_container" class="area_container"></div>
                                         </div>
+
+                                        <div id="idm_layout_main_container" class="area_container">
+                                            <div class="title">
+                                                <div class="medium">Layout fields</div>
+                                            </div>
+                                            <div id="idm_layout_container" class="area_container"></div>
+                                        </div>
                                     </div>
                                 </div>
 
@@ -470,6 +483,12 @@ Example:
              */
 
             /**
+             * Received when the user change text value of the selected datalet layout inputs
+             *
+             * @event text-element-controllet_content-changed
+             */
+
+            /**
              * Fired when the user press to finish button. At this event are attached all information about the visualization currently created
              *
              * @event data-sevc-controllet.dataletCreated
@@ -478,7 +497,8 @@ Example:
             listeners : {
                 'items-slider-controllet_item-selected' : '_dataletSelected',
                 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
-                'treeview-controllet-fileds-selected' : '_fieldsSelected'
+                'treeview-controllet_fileds-selected' : '_fieldsSelected',
+                'text-element-controllet_content-changed' : '_textElementChanged'
             },
 
             properties : {
@@ -555,6 +575,17 @@ Example:
                     value : []
                 },
                 /**
+                 * It's used to store the params to give to datalet. This kind of params will not processed by selection step
+                 *
+                 * @attribute params_fields
+                 * @type Object
+                 * @default empty
+                 */
+                params_fields:{
+                  type: Object,
+                  value: {}
+                },
+                /**
                  * It's used to store the tab index in the first pass
                  *
                  * @attribute DatasourceTabSelected
@@ -577,7 +608,6 @@ Example:
                     type : Array,
                     value : []
                 }
-
             },
             /**
              * It is called after the element’s template has been stamped and all elements inside the element’s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.
@@ -593,6 +623,7 @@ Example:
                 $(this.$.fields_placeholder).perfectScrollbar();
                 $(this.$.selected_fields_main_container).perfectScrollbar();
                 $(this.$.idm_fields_main_container).perfectScrollbar();
+                $(this.$.idm_layout_main_container).perfectScrollbar();
                 $(this.$.table_fields_container).perfectScrollbar();
 
             },
@@ -642,6 +673,7 @@ Example:
 
                var response = e.detail.response;
                this.$.datalet_idm_fields_container.innerHTML = "";
+               this.$.idm_layout_container.innerHTML = "";
 
                if(response.idm.inputs.input.constructor == Object) {
                    var input = response.idm.inputs.input;
@@ -658,6 +690,58 @@ Example:
                    }
                }
 
+               if(response.idm.inputs.layouts.input.constructor == Object) {
+                   var input = response.idm.inputs.layouts.input;
+                   this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" description="' + input.description + '" number="1"></text-element-controllet>';
+               }else{
+                   for(var i =0; i < response.idm.inputs.layouts.input.length; i++){
+                       var input = response.idm.inputs.layouts.input[i];
+                       this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" ' +
+                                                                                         'description="' + input.description + '" ' +
+                                                                                         'number="' + (i+1) + '">' +
+                                                                '</text-element-controllet>';
+                   }
+
+               }
+
+            },
+            /**
+             * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.
+             *
+             * @method generateDataletPreview
+             */
+            generateDataletPreview : function(){
+
+                var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
+                this.selected_fields = Array();
+
+                for (var i = 0; i < input_mapped_fields.length; i++) {
+                    if (input_mapped_fields[i].value != "") {
+                        this.selected_fields.push(input_mapped_fields[i].value);
+                    }
+                }
+
+                var input_layouts_fields = Polymer.dom(this.$.idm_layout_container).querySelectorAll('text-element-controllet');
+                this.params_fields = {'data-url' : this.dataUrl};
+
+                for (var i = 0; i < input_layouts_fields.length; i++) {
+                    if (input_layouts_fields[i].value != "") {
+                        this.params_fields[input_layouts_fields[i].heading]  =  input_layouts_fields[i].value;
+                    }
+                }
+
+
+                var datalet_params ={
+                    component   : this.selected_datalet,
+                    params      : this.params_fields,
+                    fields      : this.selected_fields,
+                    placeHolder : this.$.datalet_placeholder
+                };
+
+
+                ComponentService.deep_url = this.deepUrl;
+                ComponentService.getComponent(datalet_params);
+
             },
             /**
              * Validate the current pass in order to access to next one.
@@ -804,30 +888,20 @@ Example:
              */
             _fieldsMapped : function(e){
 
-                var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
-                this.selected_fields = Array();
-
-                for (var i = 0; i < input_mapped_fields.length; i++) {
-                    if (input_mapped_fields[i].value != "") {
-                        this.selected_fields.push(input_mapped_fields[i].value);
-                    }
-                }
-
-                var datalet_params ={
-                    component   : this.selected_datalet,
-                    params      :{
-                        'data-url' : this.dataUrl
-                    },
-                    fields      : this.selected_fields,
-                    placeHolder : this.$.datalet_placeholder
-                };
-
-
-                ComponentService.deep_url = this.deepUrl;
-                ComponentService.getComponent(datalet_params);
+                this.generateDataletPreview();
 
             },
             /**
+             * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text
+             *
+             * @method _textElementChanged
+             *
+             * @param {Event} e
+             */
+            _textElementChanged : function(e){
+                this.generateDataletPreview();
+            },
+            /**
              * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
              *
              * @method _handleDatasourceDragOver
@@ -846,7 +920,7 @@ Example:
              */
             _onFinish : function(e){
 
-                if(this.selected_fields.length == 0 || this.selected_datalet == ""){
+                if((this.selected_fields.length == 0) || this.selected_datalet == ""){
                     this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";
                     this.$.message.show();
                     return;
@@ -854,7 +928,8 @@ Example:
 
                 var data = {
                     dataUrl : this.dataUrl,
-                    fields : this.selected_fields,
+                    params :  this.params_fields,
+                    fields :  this.selected_fields,
                     datalet : this.selected_datalet
                 }
 
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet.html b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
deleted file mode 100755
index a010f70..0000000
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet.html
+++ /dev/null
@@ -1,446 +0,0 @@
-<!--
-@group ROUTETOPA Polymer Core Elements
-
-The `select-visualization-form-controllet` is a slider container of elements.
-Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
-slider with all components initialized with data and query attributes
-
-### Code
-
-Example
-
-@class select-visualization-form-controllet
-
--->
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
-
-<dom-module id="datalet-selection-controllet">
-    <template>
-        <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
-        <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">
-        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
-        <style is="custom-style">
-            body {
-                font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-                font-size: 14px;
-                margin: 0;
-                padding: 24px;
-                -webkit-tap-highlight-color: rgba(0,0,0,0);
-                -webkit-touch-callout: none;
-            }
-
-            paper-input {
-                width: 80%;
-            }
-
-            /*paper-dialog {
-                position: fixed;
-                top: 16px;
-                right: 16px;
-                width: 400px;
-                height: 400px;
-            }*/
-
-            html /deep/ paper-dialog { /*::shadow #datalet_dialog_content*/
-                /*position: fixed;
-                top: 25%;
-                left: 25%;
-                bottom: 25%;
-                right: 25%;
-                margin: 0px;*/
-                width: 90%;
-                height: 95%;
-            }
-
-            /*Toggle style*/
-            input.toggle {
-                max-height: 0;
-                max-width: 0;
-                opacity: 0;
-            }
-            input.toggle + label {
-                display: block;
-                position: relative;
-                box-shadow: inset 0 0 0px 1px #d5d5d5;
-                text-indent: -5000px;
-                height: 30px;
-                width: 50px;
-                border-radius: 15px;
-            }
-
-            input.toggle + label:before {
-                content: "";
-                position: absolute;
-                display: block;
-                height: 30px;
-                width: 30px;
-                top: 0;
-                left: 0;
-                border-radius: 15px;
-                background: rgba(19, 191, 17, 0);
-                -moz-transition: .25s ease-in-out;
-                -webkit-transition: .25s ease-in-out;
-                transition: .25s ease-in-out;
-            }
-
-            input.toggle + label:after {
-                content: "";
-                position: absolute;
-                display: block;
-                height: 30px;
-                width: 30px;
-                top: 0;
-                left: 0px;
-                border-radius: 15px;
-                background: white;
-                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
-                -moz-transition: .25s ease-in-out;
-                -webkit-transition: .25s ease-in-out;
-                transition: .25s ease-in-out;
-            }
-            input.toggle:checked + label:before {
-                width: 50px;
-                background: rgba(19, 191, 17, 1);
-            }
-
-            input.toggle:checked + label:after {
-                left: 20px;
-                box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);
-            }
-
-            /deep/ #fields_order_placeholder { list-style-type: none; margin: 0; padding: 0; width: 60%; }
-            /deep/ #fields_order_placeholder li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
-            /deep/ html>body #fields_order_placeholder li { height: 1.5em; line-height: 1.2em; }
-            /deep/ .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
-
-        </style>
-
-        <iron-ajax
-                auto
-                id="data_request"
-                url={{dataUrl}}
-                handle-as="json"
-                verbose="true"
-                on-response="handleResponseData"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-ajax
-                id="datales_list_request"
-                auto
-                url={{dataletsListUrl}}
-                handle-as="json"
-                on-response="handleResponseDatalets"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <div id="modals">
-        </div>
-
-        <paper-dialog id="datalet_dialog" modal="true" transition="core-transition-center" closeAttribute="close">
-           <h2>Datalets preview</h2>
-           <paper-dialog-scrollable id="datalet_dialog_content">
-           </paper-dialog-scrollable>
-           <div class="buttons">
-              <paper-button dialog-dismiss>Close</paper-button>
-           </div>
-        </paper-dialog>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Data source</h3>
-            </div>
-            <div class="panel-body">
-                <section>
-                    <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{dataUrl}}"></paper-input>
-                </section>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Selection data fileds to visualize</h3>
-            </div>
-            <div class="panel-body">
-                <section>
-                    <div class="horizontal center-justified layout">
-                        <div id="fields_placeholder" class="horizontal-section">
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Selection fileds order</h3>
-            </div>
-            <div class="panel-body">
-                <section>
-                    <div class="horizontal center-justified layout">
-                        <ul id="fields_order_placeholder">
-                        </ul>
-                    </div>
-                </section>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Visualization tools selection</h3>
-            </div>
-            <div class="panel-body">
-                <div id="datalets_menu" class="layout">
-                    <label for="datalets_selector">Available Datalets list:</label>
-                    <select class="form-control" id="datalets_selector">
-                    </select>
-                </div>
-            </div>
-        </div>
-
-        <section>
-            <paper-button on-click="goto" raised>Go to visualization</paper-button>
-        </section>
-        <paper-toast id="message" text=""></paper-toast>
-        <content></content>
-    </template>
-
-    <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
-    <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
-    <script src="../shared_js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
-
-    <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
-
-    <script>
-
-        DataletSelectionControllet = Polymer({
-            is: 'datalet-selection-controllet',
-            listeners: {
-                'tap' : 'clickHandler'
-            },
-            hostAttributes: {
-                dataUrl: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
-                deepUrl: "http://service.routetopa.eu/WebComponentsDEV/DEEP/",
-                dataletsListUrl: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
-            },
-            properties: {
-                /**
-                 * It represent the data url from CKAN api
-                 *
-                 * @attribute dataUrl
-                 * @type string
-                 * @default 'null'
-                 */
-                dataUrl: {
-                    type: String,
-                    value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
-                    observer: '_dataUrlChanged'
-                },
-                /**
-                 * It represent the DEEP url to get information about the datalets
-                 *
-                 * @attribute deepUrl
-                 * @type string
-                 * @default 'null'
-                 */
-                deepUrl: {
-                    type: String,
-                    value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50"
-                },
-                /**
-                 * It stores all tools available in WebComponent server
-                 *
-                 * @attribute tools
-                 * @type array
-                 * @default 'null'
-                 */
-                tools:{
-                   type: Array,
-                   value: []
-                },
-                /**
-                 * It stores all fields related to data retrieved from CKAN api url
-                 *
-                 * @attribute fields
-                 * @type array
-                 * @default 'null'
-                 */
-                fields_order:{
-                   type: String,
-                   value: []
-                },
-                fieldsMap: {
-                    type: Map,
-                    value: null
-                },
-                datalet_query:{
-                    type: String,
-                    value: ""
-                }
-            },
-            /**
-             * data-url member changed watcher. It's called when dataUrl changes its value
-             *
-             * @method dataUrlChanged
-             */
-            _dataUrlChanged: function(newValue, oldValue){
-                this.$.data_request.generateRequest();
-            },
-            createFieldsContainer: function(id, heading){
-                var panelDefault       = document.createElement('div');
-                panelDefault.className = 'panel panel-default';
-                var panelHeading       = document. createElement('div');
-                panelHeading.className = 'panel-heading';
-                panelHeading.innerHTML = heading;
-                var panelBody          = document. createElement('div');
-                panelBody.className    = 'panel-body';
-                panelBody.id           = id;
-                var fieldPanel         = document.createElement('div');
-                fieldPanel.className   = 'panel-body';
-
-                panelBody.appendChild(fieldPanel);
-                panelDefault.appendChild(panelHeading);
-                panelDefault.appendChild(panelBody);
-
-                return panelDefault;
-            },
-            createCustomStyledToggle: function(id, label){
-                return '<div class="wrapper">'
-                       + '<input id="'+ id +'" type="checkbox" class="toggle">'
-                       + '<label for="'+ id +'">'+ label +'</label>'
-                       + label
-                       + '</div>';
-
-            },
-            /**
-             * Callback to parse the data requested when dataUrl change its value
-             *
-             * @method handleResponseData
-             */
-            handleResponseData: function(e){
-                //crete root node and insert it in to shadow dom
-                var mainPanel = this.createFieldsContainer("root", "Data fields");
-                this.$.fields_placeholder.innerHTML = "";
-                this.$.fields_placeholder.appendChild(mainPanel);
-                this.fieldsMap = new Map;
-                this.fieldsMap["root"] = mainPanel;
-                //call recursive analyze function for current json to get all fields user can select
-                this.analyzeObject(new Array("root"), null, e.detail.response);
-            },
-            analyzeObject: function(parent_list, curr_field, object) {
-                if(curr_field != null){
-                    if(object == null) object = "";
-
-                    if(object.constructor == Array){//Deal with flat array case
-                        if(object[0].constructor != Object){
-                            this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createCustomStyledToggle(parent_list.toString(), curr_field);
-                            return;
-                        }
-                    }
-                    if(object.constructor == Array || object.constructor == Object){
-                        var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
-                        this.fieldsMap[curr_field] = panel;
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
-                    }else{
-                        //CUSTOM STYLED TOGGLE
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createCustomStyledToggle(parent_list.toString(), curr_field);
-                    }
-                }
-                if(object.constructor == Array || object.constructor == Object) {
-                    var obj = (object.constructor == Array) ? object[0] : object;
-                    if(Object.prototype.toString.call(obj) === '[object String]') return;//Deal with flat array case
-                    for (var field in obj) {
-                        var parents = new Array();
-                        parent_list.every(function (element, index, array) {
-                            parents.push(element);
-                            return true;
-                        });
-                        parents.push(field);
-                        this.analyzeObject(parents, field, obj[field]);
-                    }
-                }
-            },
-            /**
-             * Callback to parse the components response object
-             *
-             * @method handleResponseComponents
-             */
-            handleResponseDatalets: function(e){
-                html = "";
-                for(var i=0;i < e.detail.response.length;i++){
-                    html += '<option value="' + e.detail.response[i] + '"' + ((i==0) ? ' selected>' : '>') + e.detail.response[i] + '</option>';
-                }
-                $(this.$.datalets_selector).append(html);
-            },
-            /**
-             * Callback called when "Go to visualization" button is pressed
-             *
-             * @method handleResponseComponents
-             */
-            goto: function(){
-                var fields = Polymer.dom(this.$.fields_order_placeholder).querySelectorAll('li');
-                this.fields_order = "";
-                for(var i=0;i<fields.length;i++){
-                    this.fields_order += fields[i].id + ",";
-                }
-                this.fields_order = this.fields_order.substring(0, this.fields_order.length - 1);
-
-
-                var cbs = Polymer.dom(this.$.fields_placeholder).querySelectorAll('input[type=checkbox]:checked');
-                this.datalet_query = "";
-
-                if(cbs.length == 0){
-                    this.$.message.text = "No fields selected.";
-                    this.$.message.show();
-                    return;
-                }
-
-                var fields = Array();
-                for(var i=0;i<cbs.length;i++){
-                    fields.push(cbs[i].id.replace("root,", ""));
-                }
-
-                var datalet_params ={
-                    component   : this.$.datalets_selector.options[this.$.datalets_selector.selectedIndex].text,
-                    params      :{
-                        'data-url' : this.dataUrl,
-                        'fields-order' : this.fields_order
-                    },
-                    fields      : fields,
-                    placeHolder : this.$.datalet_dialog_content
-                };
-                ComponentService.deep_url = this.deepUrl;
-                ComponentService.getComponent(datalet_params);
-
-                document.getElementById("datalet_dialog").open();
-            },
-            clickHandler : function(e){
-               if(!e.target.control) {
-                   if (e.target.className == 'toggle') {
-                       (this.$.fields_order_placeholder).innerHTML = "";
-                       var cbs = Polymer.dom(this.$.fields_placeholder).querySelectorAll('input[type=checkbox]:checked');
-                       for(var i=0;i<cbs.length;i++) {
-                           var fields = cbs[i].id.split(',');
-                           var ele = document.createElement('li');
-                           ele.className = "ui-state-default";
-                           ele.id        = i;
-                           ele.innerHTML = fields[fields.length -1];
-                           (this.$.fields_order_placeholder).appendChild(ele);
-                       }
-                   }
-               }
-            },
-            ready: function(){
-                $(this.$.fields_order_placeholder).sortable({
-                    placeholder: "ui-state-highlight"
-                });
-                $(this.$.fields_order_placeholder).disableSelection();
-            }
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet_.html b/controllets/datalet-selection-controllet/datalet-selection-controllet_.html
deleted file mode 100755
index 70de044..0000000
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet_.html
+++ /dev/null
@@ -1,339 +0,0 @@
-<!--
-@group ROUTETOPA Polymer Core Elements
-
-The `select-visualization-form-controllet` is a slider container of elements.
-Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
-slider with all components initialized with data and query attributes
-
-### Code
-
-Example
-
-@class select-visualization-form-controllet
-
--->
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
-<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
-
-<dom-module id="datalet-selection-controllet">
-    <template>
-        <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
-        <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">
-        <style is="custom-style">
-            body {
-                font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-                font-size: 14px;
-                margin: 0;
-                padding: 24px;
-                -webkit-tap-highlight-color: rgba(0,0,0,0);
-                -webkit-touch-callout: none;
-            }
-
-            paper-input {
-                width: 80%;
-            }
-
-            paper-checkbox {
-                display: block;
-                margin-bottom: 40px;
-            }
-
-        </style>
-
-        <!--<iron-ajax
-                auto
-                id="data_request"
-                url={{data_url}}
-                handle-as="json"
-                verbose="true"
-                on-response="this.handleResponseData"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-ajax
-                auto
-                url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
-                handle-as="json"
-                on-response="handleResponseDatalets"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-request id="xhr"></iron-request>-->
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Data source</h3>
-            </div>
-            <div class="panel-body">
-                <section>
-                    <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{data_url}}"></paper-input>
-                </section>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Selection data fileds to visualize</h3>
-            </div>
-            <div class="panel-body">
-                <section>
-                    <div class="horizontal center-justified layout">
-                        <div id="fields_placeholder" class="horizontal-section">
-                           <!-- <template is="dom-repeat" items="{{fields}}">
-                                <paper-checkbox>{{item}}</paper-checkbox>
-                            </template>-->
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Visualization tools selection</h3>
-            </div>
-            <div class="panel-body">
-                <div id="datalets_menu" class="layout"></div>
-            </div>
-        </div>
-
-        <section>
-            <!--<paper-button on-click="goto" raised>Go to visualization</paper-button>-->
-            <button id="goto" type="button" class="btn btn-primary">Go to visualization</button>
-        </section>
-        <content></content>
-    </template>
-
-    <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
-    <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
-
-    <script>
-
-        DataletSelectionControllet = Polymer({
-            is: 'datalet-selection-controllet',
-            properties: {
-                /**
-                 * It represent the data url from CKAN api
-                 *
-                 * @attribute data_url
-                 * @type string
-                 * @default 'null'
-                 */
-                data_url: {
-                    type: String,
-                    value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
-                    observer: '_data_urlChanged'
-                },
-                /**
-                 * It stores all tools available in WebComponent server
-                 *
-                 * @attribute tools
-                 * @type array
-                 * @default 'null'
-                 */
-                tools:{
-                   type: Array,
-                   value: []
-                },
-                /**
-                 * It stores all fields related to data retrieved from CKAN api url
-                 *
-                 * @attribute fields
-                 * @type array
-                 * @default 'null'
-                 */
-                fields:{
-                   type: Array,
-                   value: []
-                },
-                fieldsMap: {
-                    type: Map,
-                    value: null
-                }
-            },
-            /**
-             * data-url member changed watcher. It's called when data_url changes its value
-             *
-             * @method data_urlChanged
-             */
-            _data_urlChanged: function(newValue, oldValue){
-                //this.$.xhr.send({url: newValue, body: {}}).then(function (e){this.handleResponseData(e)});
-                //get the data fields
-                var comp = this;
-                $.ajax({
-                    url: newValue,
-                    dataType: "json",
-                    success: function(e){comp.handleResponseData(e)}
-                });
-                //get datalets list
-                $.ajax({
-                    url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
-                    dataType: "json",
-                    success: function(e){comp.handleResponseDatalets(e)}
-                });
-            },
-            createFieldsContainer: function(id, heading){
-                var panelDefault       = document.createElement('div');
-                panelDefault.className = 'panel panel-default';
-                var panelHeading       = document. createElement('div');
-                panelHeading.className = 'panel-heading';
-                panelHeading.innerHTML = heading;
-                var panelBody          = document. createElement('div');
-                panelBody.className    = 'panel-body';
-                panelBody.id           = id;
-                var fieldPanel         = document.createElement('div');
-                fieldPanel.className   = 'panel-body';
-
-                panelBody.appendChild(fieldPanel);
-                panelDefault.appendChild(panelHeading);
-                panelDefault.appendChild(panelBody);
-
-                return panelDefault;
-
-            },
-            cretePaperCheckbox: function (id, label ) {
-                var html = '<paper-checkbox id="' + id + '" role="checkbox" tabindex="0" toggles="" aria-pressed="false" aria-disabled="false" aria-checked="false" aria-label="' + label + '" class="x-scope paper-checkbox-0">'
-                        +    '<div id="checkboxContainer" class="style-scope paper-checkbox">'
-                        +       '<paper-ripple id="ink" class="circle style-scope paper-checkbox" center="">'
-                        +          '<div id="background" class="style-scope paper-ripple"></div>'
-                        +          '<div id="waves" class="style-scope paper-ripple"></div>'
-                        +       '</paper-ripple>'
-                        +    '<div id="checkbox" class="style-scope paper-checkbox">'
-                        +       '<div id="checkmark" class="hidden style-scope paper-checkbox"></div>'
-                        +       '</div>'
-                        +    '</div>'
-                        +    '<div id="checkboxLabel" aria-hidden="true" class="style-scope paper-checkbox">' + label + '</div>'
-                        +  '</paper-checkbox>';
-
-                return html;
-            },
-            createBootstrapCheckbox: function(id, label) {
-                return '<div class="checkbox checkbox-primary">'
-                        + '<label class="checkbox-inline">'
-                        +    '<input type="checkbox" data-label="'+ label +'" id="'+ id +'"/>' + label
-                        + '</label>'
-                        + '</div>';
-
-            },
-            createBootstrapToggle: function(id, label) {
-                return '<div class="checkbox">'
-                        + '<label style="padding-left: 3px; text-decoration: double;">'
-                        +    '<input type="checkbox" data-label="'+ label +'" id="'+ id +'" data-toggle="toggle" />   ' + label
-                        + '</label>'
-                        + '</div>';
-
-            },
-            /**
-             * Callback to parse the data requested when data_url change its value
-             *
-             * @method handleResponseData
-             */
-            handleResponseData: function(e){
-                //crete root node and insert it in to shadow dom
-                var mainPanel = this.createFieldsContainer("root", "Data fields");
-                this.$.fields_placeholder.appendChild(mainPanel);
-                this.fieldsMap = new Map;
-                this.fieldsMap["root"] = mainPanel;
-                //call recursive analyze function for current json to get all fields user can select
-                this.analyzeObject("root", null, e);
-            },
-            analyzeObject: function(parent, curr_field, object) {
-                if(curr_field != null){
-                    var parent_list = parent.split('.');
-                    var ele = null;
-                    if(object.constructor == Array || object.constructor == Object){
-                        var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
-                        this.fieldsMap[curr_field] = panel;
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
-
-                    }else{
-                        /*var checkbox = document.createElement('paper-checkbox');
-                        checkbox.innerHTML = "<b>" + curr_field + '</b><br>';
-                        checkbox.id        = parent;
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].appendChild(checkbox);*/
-                        //Polymer.dom.flush();
-                        //this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.cretePaperCheckbox(parent, curr_field);
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createBootstrapToggle(parent, curr_field);
-
-                    }
-                }
-                if(object.constructor == Array || object.constructor == Object) {
-                    var obj = (object.constructor == Array) ? object[0] : object;
-                    for (var field in obj) {
-                        if (obj[field] != null) {
-                                parent_list = parent.split('.');
-                                this.analyzeObject(parent + '.' + field, field, obj[field]);
-                        }
-                    }
-                }
-            },
-            /**
-             * Callback to parse the components response object
-             *
-             * @method handleResponseComponents
-             */
-            handleResponseDatalets: function(e){
-                this.tools = e;
-                /*html = '<paper-menu>';
-                for(i=0;i < e.length;i++){
-                    html += '<paper-item>' + e[i] + '</paper-item>';
-                }
-                html += '</paper-menu>';*/
-                html = '<label for="datalets_selector">Available Datalets list:</label>'
-                     + '<select class="form-control" id="datalets_selector">';
-                for(i=0;i < e.length;i++){
-                    html += '<option>' + e[i] + '</option>';
-                }
-                html += '</select>';
-                $(this.$.datalets_menu).append(html);
-            },
-            /**
-             * Callback called when "Go to visualization" button is pressed
-             *
-             * @method handleResponseComponents
-             */
-            goto: function(){
-                var url = "http://service.routetopa.eu/oxwall/webcomp";
-                var query = "$result$records[";
-                var cbs = this.shadowRoot.querySelectorAll("paper-checkbox");
-                for(i=0;i<cbs.length;i++){
-                    if(cbs[i].checked){
-                        query += cbs[i].id + ",";
-                    }
-                }
-                query = query.slice(0,-1);
-                query += "]";
-
-                var cmp = this.$.toolsmenu.selectedItemLabel;
-
-                url += "/" + cmp + "/" + btoa(this.data_url) + "/" + query + "/0";
-
-                window.location = url;
-            },
-            ready: function(){
-
-                /*this.fields = [
-                    {parent:"root", name :"No fields available"}
-                ];*/
-
-                this.tools = [
-                    'No tools available'
-                ];
-
-                //this.$.data_request.addEventListener('response', this.handleResponseData);
-
-               /* var comp = this;
-                $.ajax({
-                    url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
-                    dataType: "json",
-                    success: comp.handleResponseDatalets
-
-                });*/
-                $(this.$.goto).click(this.goto());
-            }
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet_2.html b/controllets/datalet-selection-controllet/datalet-selection-controllet_2.html
deleted file mode 100755
index b609eb3..0000000
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet_2.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!--
-@group ROUTETOPA Polymer Core Elements
-
-The `select-visualization-form-controllet` is a slider container of elements.
-Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
-slider with all components initialized with data and query attributes
-
-### Code
-
-Example
-
-@class select-visualization-form-controllet
-
--->
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
-
-<dom-module id="datalet-selection-controllet">
-    <template>
-        <!--<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
-        <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">-->
-        <style>
-            body {
-                font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-                font-size: 14px;
-                margin: 0;
-                padding: 24px;
-                -webkit-tap-highlight-color: rgba(0,0,0,0);
-                -webkit-touch-callout: none;
-            }
-
-            paper-input {
-                width: 80%;
-            }
-
-            paper-checkbox {
-                display: block;
-                margin-bottom: 40px;
-            }
-
-        </style>
-
-        <!--<iron-ajax
-                auto
-                id="data_request"
-                url={{dataUrl}}
-                handle-as="json"
-                verbose="true"
-                on-response="this.handleResponseData"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-ajax
-                auto
-                url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
-                handle-as="json"
-                on-response="handleResponseDatalets"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-request id="xhr"></iron-request>-->
-    </template>
-
-    <script>
-
-        DataletSelectionControllet = Polymer({
-            is: 'datalet-selection-controllet',
-            properties: {
-                /**
-                 * It represent the data url from CKAN api
-                 *
-                 * @attribute dataUrl
-                 * @type string
-                 * @default 'null'
-                 */
-                dataUrl: {
-                    type: String,
-                    value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
-                    observer: '_data_urlChanged'
-                },
-                /**
-                 * It stores all tools available in WebComponent server
-                 *
-                 * @attribute tools
-                 * @type array
-                 * @default 'null'
-                 */
-                tools:{
-                   type: Array,
-                   value: []
-                },
-                /**
-                 * It stores all fields related to data retrieved from CKAN api url
-                 *
-                 * @attribute fields
-                 * @type array
-                 * @default 'null'
-                 */
-                fields:{
-                   type: Array,
-                   value: []
-                },
-                fieldsMap: {
-                    type: Map,
-                    value: null
-                }
-            }
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/controllets/draggable-element-controllet/draggable-element-controllet.html b/controllets/draggable-element-controllet/draggable-element-controllet.html
index 03f007c..64d9a6e 100755
--- a/controllets/draggable-element-controllet/draggable-element-controllet.html
+++ b/controllets/draggable-element-controllet/draggable-element-controllet.html
@@ -197,7 +197,7 @@ Example:
                  */
                 number: {
                     type: String,
-                    value : "0"
+                    value : "1"
                 },
                 /**
                  * It's the name of the target field
diff --git a/controllets/text-element-controllet/text-element-controllet.html b/controllets/text-element-controllet/text-element-controllet.html
new file mode 100644
index 0000000..3e297e2
--- /dev/null
+++ b/controllets/text-element-controllet/text-element-controllet.html
@@ -0,0 +1,181 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-styles/color.html">
+
+<!--
+`text-element-controllet` is a text area with heading. It fires an event when the text value is modified. This event can be useful when you have to monitor many af this elements.
+
+
+Example:
+
+    <text-element-controllet heading="myField"
+                             description="myFieldDescription"
+                             number="1">
+    </text-element-controllet>
+
+
+@element text-element-controllet
+@status beta
+@homepage
+@group controllets
+-->
+
+
+<dom-module id="text-element-controllet">
+    <template>
+
+        <style is="custom-style">
+
+            .avatar {
+                display: inline-block;
+                position: relative;
+                float: left;
+                height: 1.7em;
+                width: 1.7em;
+                border-radius: 50%;
+                background: var(--paper-blue-500);
+                color: white;
+                line-height: 2em;
+                font-size: 0.74em;
+                text-align: center;
+            }
+
+            .heading{
+                /*width: 12.5em;*/
+            }
+
+            .big {
+                display: inline-block;
+                position: relative;
+                float: left;
+                font-size: 1em;
+                padding: 0.5em 0.25em 0.5em;
+                color: var(--google-grey-500);
+            }
+
+            .medium {
+                position: relative;
+                float: left;
+                font-size: 0.8125em;
+                padding-bottom: 0px;
+                display: inline-block;
+                width: 32.5em;
+                padding-left: 10px;
+            }
+
+
+        </style>
+
+        <div>
+            <div>
+                <div class="heading">
+                    <div class="avatar">{{number}}</div>
+                    <div class="medium">{{description}}</div>
+                </div>
+            </div><br>
+            <paper-textarea id="text" label="{{heading}}" floatingLabel value="{{value}}"></paper-textarea>
+        </div>
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is: 'text-element-controllet',
+
+            /**
+             * Fired when the user change the text value
+             *
+             * @event text-element-controllet_content-changed
+             */
+
+            targets : null,
+
+            properties: {
+                /**
+                 * It's the name of the elelent
+                 *
+                 * @attribute heading
+                 * @type Strig
+                 * @default 'Heading'
+                 */
+                heading : {
+                    type : String,
+                    value : "Heading"
+                },
+                /**
+                 * It's the description of the elelent
+                 *
+                 * @attribute description
+                 * @type Strig
+                 * @default 'Description'
+                 */
+                description: {
+                    type: String,
+                    value: "Description"
+                },
+                /**
+                 * It's a string value the represent the current number of elelent. It will be use in the label section.
+                 *
+                 * @attribute number
+                 * @type Strig
+                 * @default '0'
+                 */
+                number: {
+                    type: String,
+                    value : "0"
+                },
+                value :{
+                    type: String,
+                    value: "",
+                    observer : '_valueChanged'
+                }
+            },
+            /**
+             * Callback related to text change
+             *
+             * @method _valueChanged
+             *
+             * @param {Event} e
+             */
+            _valueChanged : function(oldvalue, newValue){
+                this.fire('text-element-controllet_content-changed', {newValue: newValue});
+            },
+            /**
+             * It returns the value in text area
+             *
+             * @method getValue
+             */
+            getValue : function(){
+                return this.$.text.value;
+            }
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/treeview-controllet/treeview-controllet.html b/controllets/treeview-controllet/treeview-controllet.html
index 649b710..6b56824 100755
--- a/controllets/treeview-controllet/treeview-controllet.html
+++ b/controllets/treeview-controllet/treeview-controllet.html
@@ -220,6 +220,12 @@ Example:
 
             is : 'treeview-controllet',
 
+            /**
+             * Fired when the user check a checkbox
+             *
+             * @event treeview-controllet_fileds-selected
+             * */
+
             listeners : {
                 'tap' : '_clickHandler'
             },
@@ -353,7 +359,7 @@ Example:
                     fields.push(cbs[i].id.replace("root,",""));
                 }
 
-                this.fire('treeview-controllet-fileds-selected', {fields : fields});
+                this.fire('treeview-controllet_fileds-selected', {fields : fields});
             },
 
             _clickHandler : function(e){
diff --git a/datalets/barchart-datalet/barchart-datalet.html b/datalets/barchart-datalet/barchart-datalet.html
index 1f7f2d9..4c66992 100755
--- a/datalets/barchart-datalet/barchart-datalet.html
+++ b/datalets/barchart-datalet/barchart-datalet.html
@@ -47,6 +47,7 @@ Example:
         <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
     </template>
     <script>
+
         var BarchartBehavior = {
 
 
@@ -63,18 +64,18 @@ Example:
                         zoomType: 'xy'
                     },
                     title: {
-                        text: 'Bar chart'
+                        text: this._component.title
                     },
                     xAxis: {
                         categories: this.properties.categories.value,
                         title: {
-                            text: null
+                            text: this._component.xAxisLabel
                         }
                     },
                     yAxis: {
                         min: 0,
                         title: {
-                            text: 'Foreclosure (units)',
+                            text: this._component.yAxisLabel,
                             align: 'high'
                         },
                         labels: {
@@ -82,7 +83,7 @@ Example:
                         }
                     },
                     tooltip: {
-                        valueSuffix: ' units'
+                        valueSuffix: ' ' + this._component.suffix
                     },
                     plotOptions: {
                         bar: {
@@ -110,9 +111,57 @@ Example:
             }
         };
 
+
         BarchartDatalet = Polymer({
             is: 'barchart-datalet',
 
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the title of the chart
+                 *
+                 * @attribute title
+                 * @type Strig
+                 * @default ''
+                 */
+                title: {
+                    type: String,
+                    value: "Heading"
+                },
+                /**
+                 * It's the values suffix
+                 *
+                 * @attribute suffix
+                 * @type Strig
+                 * @default 'units'
+                 */
+                suffix : {
+                    type : String,
+                    value : "units"
+                }
+            },
+
             /**
              * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior
              * and run the Datalet workcycle.
diff --git a/datalets/base-datalet/base-datalet.html b/datalets/base-datalet/base-datalet.html
index e8b628c..f8cf939 100755
--- a/datalets/base-datalet/base-datalet.html
+++ b/datalets/base-datalet/base-datalet.html
@@ -84,6 +84,13 @@ Example :
              */
             ready: function(){
                 this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
+            },
+            /**
+             * Set the domain url to show in the footer
+             */
+            setDomain: function(url){
+                this.$.domain.textContent = url;
+
             }
         });
     </script>
diff --git a/datalets/column3Dchart-datalet/column3Dchart-datalet.html b/datalets/column3Dchart-datalet/column3Dchart-datalet.html
index 214941b..a800b6a 100755
--- a/datalets/column3Dchart-datalet/column3Dchart-datalet.html
+++ b/datalets/column3Dchart-datalet/column3Dchart-datalet.html
@@ -57,8 +57,8 @@ Example:
     </template>
 
     <script>
-        var chart = null;
 
+        var chart = null;
 
         var column3DchartBehavior = {
 
@@ -68,42 +68,45 @@ Example:
              * @method transformData
              */
             presentData: function(){
-                         chart = new Highcharts.Chart({
-                             chart: {
-                                 renderTo: this._component.$.charts.$.container,
-                                 borderColor: '#EBBA95',
-                                 borderWidth: 2,
-                                 zoomType : 'xy',
-                                 type: 'line',
-                                 type: 'column',
-                                 margin: 75,
-                                 options3d: {
-                                     enabled: true,
-                                     alpha: 15,
-                                     beta: 15,
-                                     depth: 50,
-                                     viewDistance: 25
-                                 }
-                             },
-                             xAxis: {
-                                 categories: this.properties.categories.value,
-                                 title: {
-                                     text: null
-                                 }
-                             },
-                             title: {
-                                 text: this.properties.title
-                             },
-                             subtitle: {
-                                 text: '3D CHART demo by dragging the sliders below'
-                             },
-                             plotOptions: {
-                                 column: {
-                                     depth: 25
-                                 }
-                             },
-
-                     series: this.properties.series.value
+                chart = new Highcharts.Chart({
+                    chart: {
+                        renderTo: this._component.$.charts.$.container,
+                        borderColor: '#EBBA95',
+                        borderWidth: 2,
+                        zoomType : 'xy',
+                        type: 'line',
+                        type: 'column',
+                        margin: 75,
+                        options3d: {
+                            enabled: true,
+                            alpha: 15,
+                            beta: 15,
+                            depth: 50,
+                            viewDistance: 25
+                        }
+                    },
+                    title: {
+                        text: this._component.title
+                    },
+                    xAxis: {
+                        categories: this.properties.categories.value,
+                        title: {
+                            text: this._component.xAxislabel
+                        }
+                    },
+                    title: {
+                        text: this.properties.title
+                    },
+                    subtitle: {
+                        text: this._component.title
+                    },
+                    plotOptions: {
+                        column: {
+                            depth: 25
+                        }
+                    },
+
+                    series: this.properties.series.value
                 });
 
                 // Activate the sliders
@@ -123,6 +126,42 @@ Example:
         column3DchartDatalet = Polymer({
             is: 'column3Dchart-datalet',
 
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the title of the chart
+                 *
+                 * @attribute title
+                 * @type Strig
+                 * @default ''
+                 */
+                title: {
+                    type: String,
+                    value: "Heading"
+                }
+            },
+
             /**
              * 'ready' callback extend the column3DchartComponentBehavior with HighchartsComponentBehavior and column3DchartBehavior
              * and run the Datalet workcycle.
@@ -130,6 +169,7 @@ Example:
              * @method ready
              */
             ready: function(){
+
                 var column3DchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, column3DchartBehavior);
                 column3DchartComponentBehavior.init(this);
             }
diff --git a/datalets/columnchart-datalet/columnchart-datalet.html b/datalets/columnchart-datalet/columnchart-datalet.html
index eab5204..1f02992 100755
--- a/datalets/columnchart-datalet/columnchart-datalet.html
+++ b/datalets/columnchart-datalet/columnchart-datalet.html
@@ -47,6 +47,7 @@ Example:
         <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
     </template>
     <script>
+
         var ColumnchartBehavior = {
 
 
@@ -62,18 +63,18 @@ Example:
                         zoomType: 'xy'
                     },
                     title: {
-                        text: 'Column chart'
+                        text: this._component.title
                     },
                     xAxis: {
                         categories: this.properties.categories.value,//this._component.categories,
                         title: {
-                            text: null
+                            text: this._component.xAxisLabel
                         }
                     },
                     yAxis: {
                         min: 0,
                         title: {
-                            text: 'Units',
+                            text: this._component.yAxisLabel,
                             align: 'high'
                         },
                         labels: {
@@ -81,7 +82,7 @@ Example:
                         }
                     },
                     tooltip: {
-                        valueSuffix: ' units'
+                        valueSuffix: ' ' + this._component.suffix
                     },
                     plotOptions: {
                         bar: {
@@ -109,9 +110,57 @@ Example:
             }
         };
 
+
         LinechartDatalet = Polymer({
             is: 'columnchart-datalet',
 
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the title of the chart
+                 *
+                 * @attribute title
+                 * @type Strig
+                 * @default ''
+                 */
+                title: {
+                    type: String,
+                    value: "Heading"
+                },
+                /**
+                 * It's the values suffix
+                 *
+                 * @attribute suffix
+                 * @type Strig
+                 * @default 'units'
+                 */
+                suffix : {
+                    type : String,
+                    value : "units"
+                }
+            },
+
             /**
              * 'ready' callback extend the ColumnchartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
              * and run the Datalet workcycle.
diff --git a/datalets/linechart-datalet/linechart-datalet.html b/datalets/linechart-datalet/linechart-datalet.html
index b2f34a5..cf8d335 100755
--- a/datalets/linechart-datalet/linechart-datalet.html
+++ b/datalets/linechart-datalet/linechart-datalet.html
@@ -59,20 +59,20 @@ Example:
 
                 $(this._component.$.charts.$.container).highcharts({
                     title: {
-                        text: 'Line chart'
+                        text: "" + this._component.title
                     },
                     chart: {
-                		zoomType: 'xy'
-            		},
+                        zoomType: 'xy'
+                    },
                     xAxis: {
                         categories: this.properties.categories.value,//this._component.categories,
                         title: {
-                            text: null
+                            text: this._component.xAxisLabel
                         }
                     },
                     yAxis: {
                         title: {
-                            text: 'Units'
+                            text: this._component.yAxisLabel
                         },
                         plotLines: [{
                             value: 0,
@@ -81,7 +81,7 @@ Example:
                         }]
                     },
                     tooltip: {
-                        valueSuffix: ' units'
+                        valueSuffix: ' ' + this._component.suffix
                     },
                     legend: {
                         layout: 'vertical',
@@ -102,9 +102,57 @@ Example:
             }
         };
 
+
         LinechartDatalet = Polymer({
             is: 'linechart-datalet',
 
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the title of the chart
+                 *
+                 * @attribute title
+                 * @type Strig
+                 * @default ''
+                 */
+                title: {
+                    type: String,
+                    value: "Heading"
+                },
+                /**
+                 * It's the values suffix
+                 *
+                 * @attribute suffix
+                 * @type Strig
+                 * @default 'units'
+                 */
+                suffix : {
+                    type : String,
+                    value : "units"
+                }
+            },
+
             /**
              * 'ready' callback extend the LinechartComponentBehavior with HighchartsComponentBehavior and LinechartBehavior
              * and run the Datalet workcycle.
diff --git a/datalets/preview-datalet/preview-datalet.html b/datalets/preview-datalet/preview-datalet.html
new file mode 100644
index 0000000..2227d12
--- /dev/null
+++ b/datalets/preview-datalet/preview-datalet.html
@@ -0,0 +1,130 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+<link rel="import" href="../base-datalet/base-datalet.html">
+
+<!--
+`preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
+
+Example:
+
+    <data-sevc-controllet data-url="http://spod.routetopa.eu"
+    </data-sevc-controllet>
+
+
+@element preview-datalet
+@status beta
+@homepage
+@group datalets
+-->
+
+<dom-module id="preview-datalet">
+    <template>
+        <style is="custom-style">
+            .content {
+                /*width: 50%;*/
+                margin: 0px auto;
+            }
+
+            .embed-container {
+                height: 0;
+                /*width: 100vw;*/
+                padding-bottom: 56.25%;
+                overflow: hidden;
+                position: relative;
+
+
+            }
+
+            .embed-container iframe {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        </style>
+        <div class="content">
+            <a href="{{url}}" target="_blank">{{url}}</a>
+            <div class="embed-container" style="height:300px;padding:0px;overflow:hidden;">
+                <iframe style="zoom:0.75;
+                                width:1280px;
+                                height:786px;
+                                border:none;
+                                -ms-transform: scale(0.50);
+                                -moz-transform: scale(0.50);
+                                -o-transform: scale(0.50);
+                                -webkit-transform: scale(0.50);
+                                transform: scale(0.50);
+                                -ms-transform-origin: 0 0;
+                                -moz-transform-origin: 0 0;
+                                -o-transform-origin: 0 0;
+                                -webkit-transform-origin: 0 0;
+                                transform-origin: 0 0;"
+                                 src="{{url}}"
+                                 scrolling="yes">
+                </iframe>
+            </div>
+        </div>
+
+        <base-datalet id="base" data-url="{{dataUrl}}"></base-datalet>
+
+    </template>
+
+    <script>
+
+        Polymer({
+            is : 'preview-datalet',
+
+            properties: {
+                /**
+                 * It's the url for the preview
+                 *
+                 * @attribute url
+                 * @type Strig
+                 * @default ''
+                 */
+                url : {
+                    type : String,
+                    value : ""
+                }
+            },
+
+            /**
+             * It is called after the element’s template has been stamped and all elements inside the element’s local
+             * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
+             * and had their ready method called.
+             *
+             * Extract the dataset domain from the entire URL and set the text content of the datalet footer.
+             *
+             * @method ready
+             *
+             */
+            ready: function(){
+                this.$.base.setDomain(this.url.split("/")[0] + "//" + this.url.split("/")[2]);
+            }
+        });
+    </script>
+</dom-module>
+
diff --git a/datalets/preview-datalet/preview-datalet.png b/datalets/preview-datalet/preview-datalet.png
new file mode 100644
index 0000000..fcda733
--- /dev/null
+++ b/datalets/preview-datalet/preview-datalet.png
diff --git a/datalets/test-datalet/ext-datalet.html b/datalets/test-datalet/ext-datalet.html
deleted file mode 100644
index 694e510..0000000
--- a/datalets/test-datalet/ext-datalet.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<link rel="import"
-                   href="../../bower_components/polymer/polymer.html">
-<link rel="import"
-      href="test-datalet.html">
-
-<dom-module id="ext-datalet">
-
-    <template>
-        <test-datalet owner="{{owner}}"></test-datalet>
-    </template>
-    <script>
-        Polymer({
-            is: "ext-datalet",
-            behaviors: [BaseBehaviour],
-            setOwner: function(){
-               this.owner = "Specialization";
-            },
-            ready: function() {
-                //Polymer.dom(this.root).appendChild(new TestDatalet(this.owner));
-                this.setOwner()
-            }
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/datalets/test-datalet/index.html b/datalets/test-datalet/index.html
deleted file mode 100644
index 1a5b610..0000000
--- a/datalets/test-datalet/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-    <script src="../shared_js/jquery-1.11.2.min.js"></script>
-    <script>
-        jQuery(document).ready(function($) {
-            $.ajax({
-                url: "http://www.dublinked.ie/datastore/server/FileServerWeb/FileChecker?metadataUUID=c94cd225ed3740e2bfe891e2db6ccabf&filename=FCC_ACABoundaries_P20130501-1408.csv&_=1435920548083:2",
-                type:"GET",
-                dataType: "script",
-                headers : {
-                    'Accept' : '*/*',
-                    'Accept-Encoding' : 'gzip, deflate',
-                    'Accept-Language' : 'it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4',
-                    'Cache-Control' : 'max-age=0',
-                    'Connection' : 'keep-alive',
-                    'Host' : 'www.dublinked.ie',
-                    'Referer' : 'http://service.routetopa.eu/WebComponentsDEV/COMPONENTS/datalets/test-datalet/index.html',
-                    'User-Agent' : 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36'
-                },
-                success: function(data){
-                    alert(data);
-                },
-                error: function(xhr, status, error){
-                   alert(error);
-                }});
-           /* try {
-                $.getScript("http://www.dublinked.ie/datastore/server/FileServerWeb/FileChecker?metadataUUID=c94cd225ed3740e2bfe891e2db6ccabf&filename=FCC_ACABoundaries_P20130501-1408.csv")
-                        .done(function (script, textStatus) {
-                            console.log(textStatus);
-                        });
-            }catch(err){
-                alert(err.message);
-            }*/
-        });
-
-    </script>
-</head>
-<body>
-<link rel="import" href="http://service.routetopa.eu/WebComponentsDEV/COMPONENTS/datalets/linechart-datalet/linechart-datalet.html">
-<linechart-datalet data_url="http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&amp;limit=50" query="$.result.records..Supplier $.result.records..Amount">
-</linechart-datalet>
-<br><br><br><br><br>
-<link rel="import" href="http://service.routetopa.eu/WebComponentsDEV/COMPONENTS/datalets/datatable-datalet/datatable-datalet.html">
-<datatable-datalet data_url="http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&amp;limit=50" query="$.result.records..Supplier $.result.records..Amount">
-</datatable-datalet>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/datalets/test-datalet/test-datalet.html b/datalets/test-datalet/test-datalet.html
deleted file mode 100644
index b30f427..0000000
--- a/datalets/test-datalet/test-datalet.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<link rel="import"
-      href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="test-datalet">
-
-    <template>
-        <!-- bind to the "owner" property -->
-        This is <b>{{owner}}</b>'s name-tag element.
-    </template>
-
-    <script>
-        BaseBehaviour ={
-            properties:{
-                owner:{
-                    type: String,
-                    value: "surname"
-                },
-                setOwner: function(){
-                    this.owner = "Base";
-                }
-
-            },
-            factoryImpl: function(owner) {
-                this.owner = owner;
-            }
-        }
-
-        TestDatalet = Polymer({
-            is: "test-datalet",
-            behaviors: [BaseBehaviour]
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/datalets/treemap-datalet/treemap-datalet.html b/datalets/treemap-datalet/treemap-datalet.html
index e60eb9b..f270727 100755
--- a/datalets/treemap-datalet/treemap-datalet.html
+++ b/datalets/treemap-datalet/treemap-datalet.html
@@ -109,7 +109,7 @@ Example:
         var TreemapBehavior = {
 
             map : {
-                name : "Expenses",
+                name : this._component.name,
                 children : []
             },
 
@@ -180,6 +180,20 @@ Example:
         Polymer({
             is : 'treemap-datalet' ,
 
+            properties: {
+                /**
+                 * It's the name for treemap
+                 *
+                 * @attribute name
+                 * @type String
+                 * @default ''
+                 */
+                name: {
+                    type: String,
+                    value: ""
+                }
+            },
+
             ready: function(){
                 var TreemapComponentBehavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior);
                 TreemapComponentBehavior.init(this);