diff --git a/ccp/js/executionformcontroller.js b/ccp/js/executionformcontroller.js
index b0c954a..a6f3651 100644
--- a/ccp/js/executionformcontroller.js
+++ b/ccp/js/executionformcontroller.js
@@ -55,6 +55,7 @@ class CCPExecutionForm extends HTMLElement{
   render(){
     this.#rootdoc.innerHTML = `
       <div>
+        <link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
         <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
         <style>
diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js
index 66d34b2..0827d28 100644
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@@ -1,125 +1,145 @@
 class CCPInputWidgetController extends HTMLElement {
-	
+
   #data = null;
-  
-  constructor(){
-  	super()
-  }
-  
-  connectedCallback(){
-    this.#data = JSON.parse(atob(this.getAttribute("input")))
-    
-    if(this.isChecklist()){
-      
-      const opts = this.#data.schema.enum.join(",")
-      this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
-    
-    } else if(this.isEnum()){
-      
-      const opts = this.#data.schema.enum.join(",")
-      this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`    
-    }else if(this.isCode()){
-      this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
-    
-    }else if(this.isDateTime()){
-      const t = this.#data.schema.format.toLowerCase() === "datetime" ? 
-        "datetime-local" : this.#data.schema.format.toLowerCase()
-      this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
-    
-    }else if(this.isFile()){
-      this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
-    
-    }else if(this.isRemoteFile()){
-      this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
-    
-    }else if(this.isSecret()){
-      this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
-    
-    }else if(this.isBoolean()){
-      this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
-    
-    }else if(this.isNumber()){
-      this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
-    
-    }else{
-      this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
-    }
-  }
-  
-  set value(value){
-    this.firstElementChild.value = value  
-  }
-  
-  get value(){
-    return this.firstElementChild.value.length === 1 ? 
-      this.firstElementChild.value[0] : 
-      this.firstElementChild.value
-  }
-  
-  get name(){
-    return this.firstElementChild.name
-  }
-  
-  isChecklist(){
-    return this.isEnum() && (this.#data.schema.format === "checklist") 
-  }
-  
-  isNumber(){
-    return (this.#data.schema.type === "string") && 
-      ("format" in this.#data.schema) && 
-      (this.#data.schema.format != null) &&
-      (this.#data.schema.format.toLowerCase() === "number") 
-  }
-  
-  isBoolean(){
-    return (this.#data.schema.type === "string") && 
-      ("format" in this.#data.schema) && 
-      (this.#data.schema.format != null) &&
-      (this.#data.schema.format.toLowerCase() === "boolean") 
-  }
-  
-  isEnum(){
-    return (this.#data.schema.type === "string") && ("enum" in this.#data.schema) 
+
+  constructor() {
+    super()
   }
 
-  isSecret(){
-    return (this.#data.schema.type === "string") && 
-      ("format" in this.#data.schema) && 
+  connectedCallback() {
+    this.#data = JSON.parse(atob(this.getAttribute("input")))
+
+    if (this.isChecklist()) {
+
+      const opts = this.#data.schema.enum.join(",")
+      this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
+      this.querySelector("d4s-ccp-input-checklist").default = this.#data.schema.default
+
+    } else if (this.isEnum()) {
+
+      const opts = this.#data.schema.enum.join(",")
+      this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
+      this.querySelector("d4s-ccp-input-enum").default = this.#data.schema.default
+
+    } else if (this.isCode()) {
+      
+      this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
+      this.querySelector("d4s-ccp-input-textarea").default = this.#data.schema.default
+
+    } else if (this.isDateTime()) {
+      
+      const t = this.#data.schema.format.toLowerCase() === "datetime" ?
+        "datetime-local" : this.#data.schema.format.toLowerCase()
+      this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
+
+    } else if (this.isFile()) {
+      
+      this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
+      this.querySelector("d4s-ccp-input-file").default = this.#data.schema.default
+
+    } else if (this.isRemoteFile()) {
+      
+      this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
+      this.querySelector("d4s-ccp-input-remotefile").default = this.#data.schema.default
+
+    } else if (this.isSecret()) {
+      
+      this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs }" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
+      this.querySelector("d4s-ccp-input-secret").default = this.#data.schema.default
+
+    } else if (this.isBoolean()) {
+      
+      this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
+      this.querySelector("d4s-ccp-input-boolean").default = this.#data.schema.default
+
+    } else if (this.isNumber()) {
+      
+      this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
+
+    } else {
+      
+      this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
+
+    }
+  }
+
+  set value(value) {
+    this.firstElementChild.value = value
+  }
+
+  get value() {
+    return this.firstElementChild.value.length === 1 ?
+      this.firstElementChild.value[0] :
+      this.firstElementChild.value
+  }
+
+  get name() {
+    return this.firstElementChild.name
+  }
+
+  isChecklist() {
+    return this.isEnum() && (this.#data.schema.format === "checklist")
+  }
+
+  isNumber() {
+    return (this.#data.schema.type === "string") &&
+      ("format" in this.#data.schema) &&
+      (this.#data.schema.format != null) &&
+      (this.#data.schema.format.toLowerCase() === "number")
+  }
+
+  isBoolean() {
+    return (this.#data.schema.type === "string") &&
+      ("format" in this.#data.schema) &&
+      (this.#data.schema.format != null) &&
+      (this.#data.schema.format.toLowerCase() === "boolean")
+  }
+
+  isEnum() {
+    return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
+  }
+
+  isSecret() {
+    return (this.#data.schema.type === "string") &&
+      ("format" in this.#data.schema) &&
       (this.#data.schema.format != null) &&
       (this.#data.schema.format.toLowerCase() === "secret")
   }
-  
-  isCode(){
-    return (this.#data.schema.type === "string") && 
-      ("format" in this.#data.schema) && 
-      (this.#data.schema.format != null) && 
-      (this.#data.schema.format.toLowerCase() === "code") 
-  }
 
-  isFile(){
-    return (this.#data.schema.type === "string") && 
-      ("format" in this.#data.schema) && 
-      (this.#data.schema.format != null) && 
-      (this.#data.schema.format.toLowerCase() === "file") 
-  }
-  
-  isRemoteFile(){
-    return (this.#data.schema.type === "string") && 
-      ("format" in this.#data.schema) && 
-      (this.#data.schema.format != null) && 
-      (this.#data.schema.format.toLowerCase() === "remotefile") 
-  }
-  
-  isDateTime(){
-    return (this.#data.schema.type === "string") && 
+  isCode() {
+    return (this.#data.schema.type === "string") &&
       ("format" in this.#data.schema) &&
       (this.#data.schema.format != null) &&
-      (["date", "time", "datetime"].indexOf(this.#data.schema.format.toLowerCase()) !== -1) 
+      (this.#data.schema.format.toLowerCase() === "code")
+  }
+
+  isFile() {
+    return (this.#data.schema.type === "string") &&
+      ("format" in this.#data.schema) &&
+      (this.#data.schema.format != null) &&
+      (this.#data.schema.format.toLowerCase() === "file")
+  }
+
+  isRemoteFile() {
+    return (this.#data.schema.type === "string") &&
+      ("format" in this.#data.schema) &&
+      (this.#data.schema.format != null) &&
+      (this.#data.schema.format.toLowerCase() === "remotefile")
+  }
+
+  isDateTime() {
+    return (this.#data.schema.type === "string") &&
+      ("format" in this.#data.schema) &&
+      (this.#data.schema.format != null) &&
+      (["date", "time", "datetime"].indexOf(this.#data.schema.format.toLowerCase()) !== -1)
   }
 }
 window.customElements.define('d4s-ccp-input', CCPInputWidgetController);
 
-class CCPBaseInputWidgetController extends HTMLElement{
+class CCPBaseInputWidgetController extends HTMLElement {
   #rootdoc = null;
   #minOccurs = 1;
   #maxOccurs = 1;
@@ -130,114 +150,126 @@ class CCPBaseInputWidgetController extends HTMLElement{
   #options = null
   #value = null
   #readonly = false
-  
+
   //useful to avoid having a custom element for every basic input type
   #type = null
-  
+
   #count = 1
-  
-  constructor(){
+
+  constructor() {
     super()
     this.#rootdoc = this//this.attachShadow({ mode: "open" });
     this.#name = this.getAttribute("name")
     this.#title = this.getAttribute("title")
     this.#description = this.getAttribute("description")
-    this.#default = this.getAttribute("default")
+    //this.#default = this.getAttribute("default")
     this.#minOccurs = Number(this.getAttribute("minoccurs") ? this.getAttribute("minoccurs") : 1)
     this.#maxOccurs = Number(this.getAttribute("maxoccurs") ? this.getAttribute("maxoccurs") : 1)
+    this.#maxOccurs = Math.max(this.#minOccurs, this.#maxOccurs)
     this.#readonly = this.getAttribute("readonly") === "true"
-    
+
     // coalesce all basic input types
     this.#type = this.getAttribute("type")
-    
+
     // Handle enum case
     this.#options = (this.getAttribute("options") ? this.getAttribute("options").split(",") : null)
-     
-    this.value = Array(Math.max(this.#minOccurs,1)).fill(this.#default)
+
+    //this.value = Array(Math.max(this.#minOccurs, 1)).fill(this.#default)
   }
-  
-  setValue(v){
+
+  set default(def){
+    this.#default = def
+    const defarr = Array.isArray(def) ? def : [def]
+    const min = Math.max(this.#minOccurs, 1)
+    var v = []
+    for(let j=0; j < this.#maxOccurs; j++){
+      if(j < defarr.length){
+        v.push(defarr[j])
+      }else if(j < min){
+        v.push(defarr[defarr.length - 1])
+      }
+    }
+    this.value = v
+  }
+
+  setValue(v) {
     this.#value = v
     this.render()
   }
-  
-  set value(v){
+
+  set value(v) {
     const actual = Array.isArray(v) ? v : [v]
-    if(actual.length < this.#minOccurs || actual.length > this.#maxOccurs){
+    if (actual.length < this.#minOccurs || actual.length > this.#maxOccurs) {
       throw `Value with length ${v.length} does not respect bounds [${this.minOccurs},${this.maxOccurs}]`
     }
     this.#value = actual
     this.render()
   }
-  
-  get value(){
+
+  get value() {
     return this.#value
   }
-  
-  get rootdoc(){
+
+  get rootdoc() {
     return this.#rootdoc
   }
-  
-  get required(){
+
+  get required() {
     return this.#minOccurs > 0
   }
-  
-  get readonly(){
+
+  get readonly() {
     return this.#readonly
   }
-  
-  isIncrementable(){
+
+  isIncrementable() {
     return this.#value.length < this.#maxOccurs
   }
-  
-  isDecrementable(){
+
+  isDecrementable() {
     return this.#value.length > this.#minOccurs && this.#value.length > 1
   }
-  
-  get count(){
+
+  get count() {
     return this.#count
   }
-  
-  get name(){
+
+  get name() {
     return this.#name
   }
-  
-  get title(){
+
+  get title() {
     return this.#title
   }
-  
-  get description(){
+
+  get description() {
     return this.#description
   }
-  
-  get default(){
+
+  get default() {
     return this.#default
   }
-  
-  get options(){
+
+  get options() {
     return this.#options
   }
-  
-  set default(v){
-    this.#default = v
-  }
-  
-  get type(){
+
+  get type() {
     return this.#type
   }
-  
-  renderPlusMinus(){
+
+  renderPlusMinus() {
     this.rootdoc.querySelector("div[name=plusminus]").innerHTML = `
         ${this.isIncrementable() ? `<span name="plus" title="add one" class="badge text-success border-success btn">+</span>` : ``}
         ${this.isDecrementable() ? `<span name="minus" title="remove one" class="badge border border-danger  text-danger btn">-</span>` : ``}
     `
   }
-  
-  renderContent(){
+
+  renderContent() {
     this.rootdoc.querySelector("div[name=content]").innerHTML = this.content()
   }
-  
-  render(){
+
+  render() {
     this.rootdoc.innerHTML = `
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
       <div name="root" class="my-3 ccp-input-widget form-field row">
@@ -260,46 +292,48 @@ class CCPBaseInputWidgetController extends HTMLElement{
         </label>
      </div>        
     `
-    
+
     this.renderPlusMinus()
     this.renderContent()
-    
-    this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev => {
       const src = ev.target.getAttribute("name")
-      if(src === "plus"){
-        this.#value.push(this.#default)
+      if (src === "plus") {
+        this.#value.push(this.#value[this.#value.length - 1])
         this.renderPlusMinus()
         this.renderContent()
-      }else if(src === "minus"){
+        ev.preventDefault()
+      } else if (src === "minus") {
         this.#value.pop()
         this.renderPlusMinus()
         this.renderContent()
+        ev.preventDefault()
       }
     })
   }
 }
 
-class CCPSimpleInputWidgetController extends CCPBaseInputWidgetController{
-    
-  constructor(){
+class CCPSimpleInputWidgetController extends CCPBaseInputWidgetController {
+
+  constructor() {
     super()
   }
-  
-  connectedCallback(){
-    this.rootdoc.addEventListener("input", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
+
+  connectedCallback() {
+    this.rootdoc.addEventListener("input", ev => {
+      if (ev.target.getAttribute("name") === this.name) {
         const index = Number(ev.target.getAttribute("data-index"))
-        this.value[index] = ev.target.value 
+        this.value[index] = ev.target.value
       }
     })
   }
-    
-  content(){
-    if(this.value.length <= 1){
+
+  content() {
+    if (this.value.length <= 1) {
       return `<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`
     }
-    var out = 
-      this.value.map((c,i)=>{
+    var out =
+      this.value.map((c, i) => {
         return `
           <input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
         `
@@ -309,31 +343,35 @@ class CCPSimpleInputWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-simple', CCPSimpleInputWidgetController);
 
-class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
-  
-  constructor(){
+class CCPEnumInputWidgetController extends CCPBaseInputWidgetController {
+
+  constructor() {
     super()
   }
-  
-  connectedCallback(){
-    this.rootdoc.addEventListener("change", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
+
+  connectedCallback() {
+    this.rootdoc.addEventListener("change", ev => {
+      if (ev.target.getAttribute("name") === this.name) {
         const index = Number(ev.target.getAttribute("data-index"))
-        this.value[index] = ev.target.value 
+        this.value[index] = ev.target.value
       }
     })
   }
-  
-  content(){
-    if(this.value.length <= 1){
-      const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n")
+
+  content() {
+    if (this.value.length <= 1) {
+      const opts = this.options ?
+        this.options.map(o => `<option value="${o}" ${this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n") :
+        ''
       return `<select data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>`
     }
-    var out = 
-      this.value.map((c,i)=>{
-        const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length >= i && c === this.value[i] ? 'selected' : ''}>${o}</option>`).join("\n")
+    var out =
+      this.value.map((v, i) => {
+        const opts = this.options ?
+          this.options.map(o => `<option value="${o}" ${o === v ? 'selected' : ''}>${o}</option>`).join("\n") :
+          ''
         return `
-          <select data-index="${i}" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
+          <select data-index="${i}" value="${v}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
         `
       }).join("\n")
     return out
@@ -341,34 +379,39 @@ class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-enum', CCPEnumInputWidgetController);
 
-class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
-  
-  constructor(){
+class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController {
+
+  constructor() {
     super()
   }
-   
-  connectedCallback(){
-    this.rootdoc.addEventListener("change", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
+
+  connectedCallback() {
+    this.rootdoc.addEventListener("change", ev => {
+      if (ev.target.getAttribute("name") === this.name) {
         const index = Number(ev.target.getAttribute("data-index"))
-        
+
         const elems = Array.prototype.slice.call(ev.currentTarget.querySelectorAll(`input[name='${this.name}'][data-index='${index}']`))
-        
-        this.value[index] = elems.filter(e=>e.checked).map(e=>e.value).join(",")
+
+        this.value[index] = elems.filter(e => e.checked).map(e => e.value).join(",")
       }
     })
   }
-  
-  buildOpts(index, selections){
-    return this.options.map(o=>`
-      <div class="form-check form-switch form-check-inline">
-        <label>${o}</label>
-        <input data-index="${index}" class="form-check-input" type="checkbox" name="${this.name}" value="${o}" ${this.readonly ? 'readonly' : ''} ${selections.indexOf(o) > -1 ? 'checked' : ''}/></div>
-    `).join("\n")
+
+  buildOpts(index, selections) {
+    return this.options ? this.options.map(o => `
+        <div class="form-check form-switch form-check-inline">
+          <label>${o}</label>
+          <input data-index="${index}" class="form-check-input" type="checkbox" name="${this.name}" value="${o}" ${this.readonly ? 'readonly' : ''} ${selections.indexOf(o) > -1 ? 'checked' : ''}/></div>
+      `).join("\n") :
+      `
+        <div class="form-check form-switch form-check-inline">
+          <span class="muted text-danger">No options supplied</span>
+        </div>
+      `
   }
-  
-  content(){
-    if(this.value.length === 1){
+
+  content() {
+    if (this.value.length === 1) {
       const opts = this.buildOpts(0, this.value.length ? this.value[0].split(",") : [])
       return `
         <div class="my-2">
@@ -376,8 +419,8 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
         </div>
       `
     }
-    var out = 
-      this.value.map((c,i)=>{
+    var out =
+      this.value.map((c, i) => {
         const opts = this.buildOpts(i, c.split(","))
         return `
           <div class="my-2">
@@ -390,35 +433,34 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-checklist', CCPChecklistInputWidgetController);
 
-class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
-  
-  constructor(){
+class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController {
+
+  constructor() {
     super()
   }
-  
-  connectedCallback(){
-    this.value.forEach((v,i)=>{ this.value[i] = v === "" ? false : v})
-    this.rootdoc.addEventListener("input", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
+
+  connectedCallback() {
+    this.rootdoc.addEventListener("input", ev => {
+      if (ev.target.getAttribute("name") === this.name) {
         const index = Number(ev.target.getAttribute("data-index"))
         this.value[index] = ev.target.checked
       }
     })
   }
-  
-  content(){
-    if(this.value.length <= 1){
+
+  content() {
+    if (this.value.length <= 1) {
       return `
         <div class="my-2 form-check form-switch form-check-inline">
-          <input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] == "true" ? 'checked' : ''} value="${ this.value[0]}"/>
+          <input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] === "true" || this.value[0] === true ? 'checked' : ''} value="${this.value[0]}"/>
         </div>
       `
     }
-    var out = 
-      this.value.map((c,i)=>{
+    var out =
+      this.value.map((c, i) => {
         return `
           <div class="my-2 form-check form-switch form-check-inline">
-            <input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c == "true" ? 'checked' : ''} value="${this.value[i]}"/>
+            <input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c === "true"  || c === true ? 'checked' : ''}/>
           </div>
         `
       }).join("\n")
@@ -427,27 +469,27 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-boolean', CCPBooleanInputWidgetController);
 
-class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
-    
-  constructor(){
+class CCPTextAreaWidgetController extends CCPBaseInputWidgetController {
+
+  constructor() {
     super()
   }
-  
-  connectedCallback(){
-    this.rootdoc.addEventListener("input", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
+
+  connectedCallback() {
+    this.rootdoc.addEventListener("input", ev => {
+      if (ev.target.getAttribute("name") === this.name) {
         const index = Number(ev.target.getAttribute("data-index"))
-        this.value[index] = ev.target.value 
+        this.value[index] = ev.target.value
       }
     })
   }
-  
-  content(){
-    if(this.value.length <= 1){
+
+  content() {
+    if (this.value.length <= 1) {
       return `<textarea data-index="0" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" rows="5" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}>${this.value.length ? this.value[0] : ''}</textarea>`
     }
-    var out = 
-      this.value.map((c,i)=>{
+    var out =
+      this.value.map((c, i) => {
         return `
           <textarea name="${this.name}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" rows="5" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}>${c}</textarea>
         `
@@ -457,19 +499,19 @@ class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-textarea', CCPTextAreaWidgetController);
 
-class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
-  
-  constructor(){
+class CCPFileInputWidgetController extends CCPBaseInputWidgetController {
+
+  constructor() {
     super()
   }
-  
-  connectedCallback(){
-    this.rootdoc.addEventListener("change", ev=>{
+
+  connectedCallback() {
+    this.rootdoc.addEventListener("change", ev => {
       const tgt = ev.target
-      if(tgt.getAttribute("name") === this.name){
+      if (tgt.getAttribute("name") === this.name) {
         const index = Number(tgt.getAttribute("data-index"))
         const file = ev.target.files[0]
-        if(file.size > 100*1024){
+        if (file.size > 100 * 1024) {
           alert("This input allows only small files (100K). Use references instead ")
           ev.stopPropagation()
           ev.preventDefault()
@@ -477,32 +519,34 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
           return false
         }
         const reader = new FileReader()
-        reader.addEventListener('load', ev=>{
+        reader.addEventListener('load', ev => {
           let encoded = ev.target.result.toString().replace(/^data:(.*,)?/, '');
           if ((encoded.length % 4) > 0) {
             encoded += '='.repeat(4 - (encoded.length % 4));
           }
           this.value[index] = encoded
-          this.querySelector("small[name=preview]").textContent = encoded.substr(0,5) + "..." + encoded.substr(encoded.length-5)
+          this.querySelector("small[name=preview]").textContent = encoded.substr(0, 5) + "..." + encoded.substr(encoded.length - 5)
         })
         reader.readAsDataURL(file)
       }
     })
   }
-  
-  content(){
-    if(this.value.length <= 1){
-     const v = this.value.length ? this.value[0] : ''
-     return `
+
+  content() {
+    if (this.value.length <= 1) {
+      const v = this.value.length ? this.value[0] : ''
+      const preview = typeof(v) === "string" ? v.substring(0, 5) + "..." + v.substring(v.length - 5) : ""
+      return `
         <input type="file" data-index="0" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required && !v ? 'required' : ''} value="${v}"/>
-        <small name ="preview" class="form-text text-muted">${v.substr(0,5) + "..." + v.substr(v.length-5)}</small>
+        <small name ="preview" class="form-text text-muted">${preview}</small>
       `
     }
-    var out = 
-      this.value.map((c,i)=>{
+    var out =
+      this.value.map((c, i) => {
+        const preview = typeof(v) === "string" ? c.substring(0, 5) + "..." + c.substring(v.length - 5) : ""
         return `
           <input type="file" data-index="${i}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''} value="${c}"/>
-          <small name ="preview" class="form-text text-muted">${c.substr(0,5) + "..." + c.substr(s.length-5)}</small>
+          <small name ="preview" class="form-text text-muted">${preview}</small>
         `
       }).join("\n")
     return out
@@ -510,27 +554,41 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController);
 
-class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
-  
-  constructor(){
+class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
+
+  #publicorprotected_dialog = null;
+  #target = null
+  #publiclink = null;
+  #protectedlink = null;
+  #index = null;
+
+  constructor() {
     super()
   }
-  
-  connectedCallback(){
-    this.rootdoc.addEventListener("input", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
-        const index = Number(ev.target.getAttribute("data-index"))
-        this.value[index] = ev.target.value 
-      }
-    })
+
+  async setPublicLink(l){
+    const b = document.querySelector("d4s-boot-2")
+    const link = await b.secureFetch(l)
+    if(link.ok){
+      const result = await link.json()
+      this.#target.value = this.value[this.#index] = result
+      this.#publicorprotected_dialog.style.display = "none"
+      this.#publicorprotected_dialog.classList.remove("show")
+      this.#publiclink = this.#protectedlink = this.#target =  this.#index = null
+      const newev = new Event("input", { bubbles : true})
+      this.dispatchEvent(newev)
+    }else{
+      alert("Unable to get public link for item")
+      this.#target.value = this.value[this.#index] = ""
+    }
   }
 
-  addToolContent(){
+  addToolContent() {
     const iss = document.querySelector("d4s-boot-2").loginToken.iss;
     const addresses = {
-      "https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
-      "https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
-      "https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
+      "https://accounts.dev.d4science.org/auth/realms/d4science": "https://workspace-repository.dev.d4science.org/storagehub/workspace",
+      "https://accounts.pre.d4science.org/auth/realms/d4science": "https://pre.d4science.org/workspace",
+      "https://accounts.d4science.org/auth/realms/d4science": "https://api.d4science.org/workspace"
     };
     this.rootdoc.querySelector("div[name=tools]").innerHTML += `
       <svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
@@ -549,42 +607,84 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
             allow-drag="true"/>
         </div>
       </div>
+      <div class="modal fade" style="background-color:rgba(0,0,0,0.3)" name="publicorprotected" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role=    this.#publicorprivate = 
+        "document">
+          <div class="modal-content shadow-lg border-primary">
+            <div class="modal-body">
+              Choose whether you want to use the public link or the protected link (requires authentication and authorization).
+            </div>
+            <div class="modal-footer">
+              <button name="public" type="button" class="btn btn-info">Public link</button>
+              <button name="protected" type="button" class="btn btn-primary">Protected link</button>
+            </div>
+          </div>
+        </div>
+      </div>
     `
-    const ws = this.rootdoc.querySelector("div[name=ws]")
-    this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev=>{
-      ws.classList.toggle("d-none")
-    })
-
-    this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev=>{
-      ws.classList.add("d-none")
-    })
-    
-    this.addEventListener("dragover", ev=>{
-      ev.preventDefault()
-    })
-    
-    this.addEventListener("drop", ev=>{
+    this.#publicorprotected_dialog = this.rootdoc.querySelector("div.modal[name=publicorprotected]")
+    this.#publicorprotected_dialog.addEventListener("click", ev => {
       ev.stopPropagation()
-      if(ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null){
-        const index = Number(ev.target.getAttribute("data-index"))
-        ev.target.value = ev.dataTransfer.getData("text/plain+downloadlink")
-        this.value[index] = ev.target.value
+      ev.preventDefault()
+      const name = ev.target.getAttribute("name")
+      if(this.#index != null && this.#target != null){
+        if(name === "public") {
+          this.setPublicLink(this.#publiclink);
+        }
+        else if(name === "protected"){
+          this.#target.value = this.value[this.#index] = this.#protectedlink;
+          this.#publicorprotected_dialog.style.display = "none"
+          this.#publicorprotected_dialog.classList.remove("show")
+          this.#publiclink = this.#protectedlink = this.#target =  this.#index = null
+          const newev = new Event("input", { bubbles : true})
+          this.dispatchEvent(newev)
+        } 
+        else return;
       }
     })
-    
-    document.addEventListener("keydown", ev=>{
-      if(ev.code == 'Escape' ) ws.classList.add("d-none");
+
+    const ws = this.rootdoc.querySelector("div[name=ws]")
+    this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev => {
+      ws.classList.toggle("d-none")
+      ev.preventDefault()
+      ev.stopPropagation()
+    })
+
+    this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev => {
+      ws.classList.add("d-none")
+      ev.preventDefault()
+      ev.stopPropagation()
+    })
+
+    this.addEventListener("dragover", ev => {
+      ev.preventDefault()
+    })
+
+    this.addEventListener("drop", ev => {
+      ev.stopPropagation()
+      if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) {
+        this.#publicorprotected_dialog.style.display = "block"
+        this.#publicorprotected_dialog.classList.add("show")
+        this.#target = ev.target
+        this.#index = Number(ev.target.getAttribute("data-index"))
+        this.#publiclink = ev.dataTransfer.getData("text/plain+publiclink")
+        this.#protectedlink = ev.dataTransfer.getData("text/plain+downloadlink")
+      }
+    })
+
+    document.addEventListener("keydown", ev => {
+      if (ev.code == 'Escape') ws.classList.add("d-none");
     })
   }
-    
-  content(){
-    this.addToolContent()
-    if(this.value.length <= 1){
+
+  content() {
+    if(!this.readonly && !this.querySelector("div[name=ws]")) this.addToolContent();
+    if (this.value.length <= 1) {
       return `
        <input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`
     }
-    var out = 
-      this.value.map((c,i)=>{
+    var out =
+      this.value.map((c, i) => {
         return `
           <input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
         `
@@ -594,32 +694,32 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-remotefile', CCPRemoteFileInputWidgetController);
 
-class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
-    
-  constructor(){
+class CCPSecretInputWidgetController extends CCPBaseInputWidgetController {
+
+  constructor() {
     super()
   }
-  
-  connectedCallback(){
-    this.rootdoc.addEventListener("input", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
+
+  connectedCallback() {
+    this.rootdoc.addEventListener("input", ev => {
+      if (ev.target.getAttribute("name") === this.name) {
         const index = Number(ev.target.getAttribute("data-index"))
-        this.value[index] = ev.target.value 
+        this.value[index] = ev.target.value
       }
     })
-    
-    this.rootdoc.addEventListener("click", ev=>{
-      if(ev.target.getAttribute("name") === "password_toggle"){
+
+    this.rootdoc.addEventListener("click", ev => {
+      if (ev.target.getAttribute("name") === "password_toggle") {
         const index = Number(ev.target.getAttribute("data-index"))
         const field = this.rootdoc.querySelector(`input[data-index='${index}']`)
-        if(field.type === "text") field.type="password";
+        if (field.type === "text") field.type = "password";
         else field.type = "text";
       }
     })
   }
-    
-  content(){
-    if(this.value.length <= 1){
+
+  content() {
+    if (this.value.length <= 1) {
       return `
         <div style="position:relative">
           <input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
@@ -627,8 +727,8 @@ class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
         </div>
         `
     }
-    var out = 
-      this.value.map((c,i)=>{
+    var out =
+      this.value.map((c, i) => {
         return `
           <div style="position:relative">
             <input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js
index d1bfd85..6ecab23 100644
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@@ -23,7 +23,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
     return this.#index
   }
   
-  computeDefaultInputType(){
+  /*computeDefaultInputType(){
     if(this.#input.schema.format === "secret"){
        return "password"
     }else if(this.#input.schema.format === "date"){
@@ -34,14 +34,15 @@ class CCPInputWidgetEditorController extends HTMLElement{
       return "datetime-local"
     }
     return "text"
-  }
+  }*/
   
   isSelectedFormat(fmt){
-    return this.#input.schema.format === fmt  
+    return this.#input.schema.format === fmt
   }
  
   renderDefaultByType(){
-    if(this.#input.schema.format === "code"){
+    return `<d4s-ccp-input name="default" input="${btoa(JSON.stringify(this.#input))}"></d4s-ccp-input>`
+    /*if(this.#input.schema.format === "code"){
       return `
         <textarea rows="5" name="default" class="form-control" placeholder="default">${this.#input.schema.default}</textarea>
       `
@@ -49,7 +50,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
       return `
         <input type="${this.computeDefaultInputType()}" value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>	    
       `   
-    }
+    }*/
   }
 
   renderDeleteButton(){
@@ -62,6 +63,8 @@ class CCPInputWidgetEditorController extends HTMLElement{
     this.#index = i
     this.#input = input
     this.#type = input.schema.enum ? "enum" : "string"
+    const minOccurs = input.minOccurs = Number(input.minOccurs) ? Number(input.minOccurs) : 0
+    const maxOccurs = input.maxOccurs = Number(input.maxOccurs) ? Number(input.maxOccurs) : 0
     this.innerHTML = `
         <details ${ reopen ? 'open' : ''}>
           <summary class="mb-3">
@@ -85,22 +88,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
               <div class="col-3">
                 <div class="form-field" title="Type">
                   <label>Type</label>
-                  <select name="type" class="form-control" placeholder="type" value="${this.#type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
+                  <select name="type" class="form-control" placeholder="type" value="${this.#type}">
                     <option value="string" ${this.#type === "string" ? "selected" : ""}>String</option>
-                    <option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>
+                    ${ input.id === 'ccpimage' ? '' : `<option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>` }
                   </select>
                 </div>
               </div>
               <div class="col">
                 <div class="form-field" title="Minimum occurrences">
                   <label>Min occurs</label>
-                  <input value="${input.minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${input.minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
                 </div>
               </div>
               <div class="col">
                 <div class="form-field" title="Maximum occurrences">
                   <label>Max occurs</label>
-                  <input value="${input.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${input.maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
                 </div>
               </div>
               <div class="col" title="Read only">
@@ -123,7 +126,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
                     <option value="boolean" ${this.isSelectedFormat('boolean') ? "selected" : ""}>True/False</option>
                     <option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
                     <option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
-                    <option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Remote file</option>
+                    <option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Workspace file</option>
                     <option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
                     <option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
                   </select>
@@ -150,8 +153,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
               </div>
             </div>
             <div name="input-default" class="mb-3">
-              <div class="form-field" title="Default value">
-                ${this.renderDefaultByType()}
+              <label>Default value</label>
+              <div class="form-field border border-info px-2 py-1" style="background-color:#0dcaf022" title="Default value">
+                <div name="default-container">${this.renderDefaultByType()}</div>
                 <span style="user-select:none;position:relative;top:-1.6rem;float:right;cursor:pointer" name="password_toggle" class="${this.isSelectedFormat('secret') ? 'inline' : 'd-none'}">&#128065;</span>
               </div>
             </div>
@@ -166,54 +170,64 @@ class CCPInputWidgetEditorController extends HTMLElement{
         ev.preventDefault()
       }
     })
-    
+
+    const defaultinp = this.querySelector("div[name='input-default']")
+    defaultinp.addEventListener("input", ev=>{
+      const inp = this.querySelector("d4s-ccp-input")
+      this.#input.schema.default = inp.value
+    })
+
+    defaultinp.addEventListener("change", ev=>{
+      const inp = this.querySelector("d4s-ccp-input")
+      this.#input.schema.default = inp.value
+    })
+
+    defaultinp.addEventListener("click", ev=>{
+      const src = ev.target.getAttribute("name")
+      if (src === "plus" || src === "minus") {
+        const inp = this.querySelector("d4s-ccp-input")
+        this.#input.schema.default = inp.value
+      }
+    })
+
     this.addEventListener("input", ev=>{
       const val = ev.target.value
       const ename = ev.target.getAttribute("name")
+      const display = this.querySelector("div[name='default-container']")
       if(ename === "id"){
         this.#input.id = val
       }
       else if(ename === "title"){
         this.#input.title = val
+        display.innerHTML = this.renderDefaultByType() 
       }
       else if(ename === "description"){
         this.#input.description = val
+        display.innerHTML = this.renderDefaultByType()
       }
       else if(ename === "minOccurs"){
-        this.#input.minOccurs = val
+        this.#input.minOccurs = Number(val) ? Number(val) : 0
+        display.innerHTML = this.renderDefaultByType()
       }
       else if(ename === "maxOccurs"){
-        this.#input.maxOccurs = val
+        this.#input.maxOccurs = Number(val) ? Number(val) : 0
+        display.innerHTML = this.renderDefaultByType()
       }
       else if(ename === "format"){
         this.#input.schema.format = val
-        //this.render(this.#input, this.#index, true)
-	/*this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none")
-        this.querySelector("div[name=input-default] input[name=default]").type = ""
-        if(this.#input.schema.format === "secret"){
-           this.querySelector("div[name=input-default] input[name=default]").type = "password"
-           this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none")
-        }else if(this.#input.schema.format === "date"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "date"
-        }else if(this.#input.schema.format === "time"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "time"
-        }else if(this.#input.schema.format === "dateTime"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
-        }else if(this.#input.schema.format === "file"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "file"
-        }*/
+        display.innerHTML = this.renderDefaultByType()
       }
       else if(ename === "contentMediaType"){
         this.#input.schema.contentMediaType = val
+        display.innerHTML = this.renderDefaultByType()
       }
       else if(ename === "options"){
         this.#input.schema.enum = val.split(",")
-      }
-      else if(ename === "default"){
-        this.#input.schema.default = val
+        display.innerHTML = this.renderDefaultByType()
       }
       else if(ename === "readonly"){
         this.#input.schema.readOnly = ev.target.checked
+        display.innerHTML = this.renderDefaultByType()
       }
       else if(ename === "type"){
         this.#type = ev.target.value
@@ -225,10 +239,10 @@ class CCPInputWidgetEditorController extends HTMLElement{
           this.querySelector("div[name=enum-input]").classList.add("d-none")
           this.querySelector("div[name=string-input]").classList.remove("d-none")
           delete this.#input.schema['enum']
-        } 
-      } 
+        }
+        display.innerHTML = this.renderDefaultByType() 
+      }
     })
-    
   }
   
 }
diff --git a/ccp/js/methodeditorcontroller.js b/ccp/js/methodeditorcontroller.js
index 14748ee..964da7d 100644
--- a/ccp/js/methodeditorcontroller.js
+++ b/ccp/js/methodeditorcontroller.js
@@ -1,4 +1,4 @@
-class CCPMethodEditorController extends HTMLElement{
+class CCPMethodEditorController extends HTMLElement {
 
   #boot;
   #rootdoc;
@@ -6,46 +6,46 @@ class CCPMethodEditorController extends HTMLElement{
   #serviceurl;
   #infrastructures;
   #locked = false;
-  
+
   #isupdate = false;
   #cloneornew_dialog = null;
   #dragging_method = null;
-  
+
   #tmp_inputs = []
   #tmp_outputs = []
   #current = null;
   #method_template = {
-    id : "",
-    title : "New Method",
-    description : "New empty method",
-    version : "1.0.0",
-    jobControlOptions : "async-execute",
-    metadata :  [],
-    inputs : {},
-    outputs : {},
-    additionalParameters : {
-      parameters : [
+    id: "",
+    title: "New Method",
+    description: "New empty method",
+    version: "1.0.0",
+    jobControlOptions: "async-execute",
+    metadata: [],
+    inputs: {},
+    outputs: {},
+    additionalParameters: {
+      parameters: [
         {
-          name : "deploy-script",
-          value : []
+          name: "deploy-script",
+          value: []
         },
         {
-          name : "execute-script",
-          value : []
+          name: "execute-script",
+          value: []
         },
         {
-          name : "undeploy-script",
-          value : []
+          name: "undeploy-script",
+          value: []
         }
       ]
     },
-    links : []
+    links: []
   }
-  
+
   #scripts = `
     <link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
   `
-  
+
   #style = ` 
     <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
@@ -121,7 +121,7 @@ class CCPMethodEditorController extends HTMLElement{
     <svg viewBox="0 0 24 24">
           <path d="M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z" />
   `
-  
+
   #plus_icon = `
     <svg viewBox="0 0 24 24">
       <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
@@ -142,226 +142,226 @@ class CCPMethodEditorController extends HTMLElement{
       <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
     </svg>
   `
-  
+
   #annotation_input_icon = `
     <svg viewBox="0 -960 960 960">
       <path d="M450-234h60v-129h130v-60H510v-130h-60v130H320v60h130v129ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554v-186H220v680h520v-494H551ZM220-820v186-186 680-680Z"/>
     </svg>
   `
-   
-  constructor(){
+
+  constructor() {
     super();
     this.#boot = document.querySelector("d4s-boot-2")
-    this.#rootdoc = this.attachShadow({ "mode" : "open"})
+    this.#rootdoc = this.attachShadow({ "mode": "open" })
   }
 
-  connectedCallback(){
+  connectedCallback() {
     this.#serviceurl = this.getAttribute("serviceurl")
     this.initMethod()
     this.fetchInfrastructures()
     this.connectNewEditRequest()
   }
-  
-  connectNewEditRequest(){
-    document.addEventListener("neweditrequest", ev=>{ 
+
+  connectNewEditRequest() {
+    document.addEventListener("neweditrequest", ev => {
       this.cloneOrEditMethod(ev.detail)
     })
   }
 
-  isInfrastructureRegistered(infra){
-    return (this.#infrastructures.filter(i=>i.id === infra.id)).length > 0
+  isInfrastructureRegistered(infra) {
+    return (this.#infrastructures.filter(i => i.id === infra.id)).length > 0
   }
 
-  fetchInfrastructures(){
+  fetchInfrastructures() {
     this.#boot.secureFetch(this.#serviceurl + "/infrastructures").
-      then(resp=>{
-        if(resp.status !== 200) throw "Unable to fetch infrastructures";
+      then(resp => {
+        if (resp.status !== 200) throw "Unable to fetch infrastructures";
         return resp.json()
-      }).then(data=>{
+      }).then(data => {
         this.#infrastructures = data
         this.render()
-      }).catch(err=>{
+      }).catch(err => {
         alert(err)
       })
   }
 
-  saveMethod(){
-    if(this.#locked) return;
-    if(this.#current != null){
+  saveMethod() {
+    if (this.#locked) return;
+    if (this.#current != null) {
       this.adoptTemporaries()
       const text = `Please confirm ${this.#isupdate ? "updating" : "creation"} of ${this.#current.title} version ${this.#current.version}`
-      if(window.confirm(text)){
+      if (window.confirm(text)) {
         this.lockRender()
         const url = this.#serviceurl + "/methods"
-        const args = { 
-          body : JSON.stringify(this.#current), 
-          method : this.#isupdate ? "PUT" : "POST", 
-          headers : {"Content-type" : "application/json"}
+        const args = {
+          body: JSON.stringify(this.#current),
+          method: this.#isupdate ? "PUT" : "POST",
+          headers: { "Content-type": "application/json" }
         }
         this.#boot.secureFetch(url, args).then(
-          (resp)=>{
-            if(resp.ok){
+          (resp) => {
+            if (resp.ok) {
               return resp.text()
-            }else throw "Error saving process: " + resp.status
-        }).then(data=>{
-          if(!this.#isupdate){ 
-            this.#current = JSON.parse(data)
-            this.#isupdate = true
-            this.#tmp_inputs = Object.keys(this.#current.inputs).map(k=>this.#current.inputs[k])
-            this.#tmp_outputs = Object.keys(this.#current.outputs).map(k=>this.#current.outputs[k])
-          }
-          this.unlockRender()
-        }).catch(err=>{
-          alert(err)
-          this.unlockRender()
-        })
+            } else throw "Error saving process: " + resp.status
+          }).then(data => {
+            if (!this.#isupdate) {
+              this.#current = JSON.parse(data)
+              this.#isupdate = true
+              this.#tmp_inputs = Object.keys(this.#current.inputs).map(k => this.#current.inputs[k])
+              this.#tmp_outputs = Object.keys(this.#current.outputs).map(k => this.#current.outputs[k])
+            }
+            this.unlockRender()
+          }).catch(err => {
+            alert(err)
+            this.unlockRender()
+          })
       }
     }
   }
-  
-  deleteMethod(){
-    if(this.#locked) return;
-    if(this.#current != null){
+
+  deleteMethod() {
+    if (this.#locked) return;
+    if (this.#current != null) {
       const text = `Please confirm deletion of ${this.#current.title} version ${this.#current.version}`
-      if(window.confirm(text)){
+      if (window.confirm(text)) {
         this.lockRender()
         const url = this.#serviceurl + "/methods/" + this.#current.id
-        const args = { 
-          method : "DELETE"
+        const args = {
+          method: "DELETE"
         }
         this.#boot.secureFetch(url, args).then(
-          (resp)=>{
-            if(resp.status === 404 || resp.status === 204){
+          (resp) => {
+            if (resp.status === 404 || resp.status === 204) {
               return null
-            }else throw "Error deleting method: " + resp.status
-        }).then(data=>{
-          this.#isupdate = false
-          this.initMethod()
-          this.unlockRender()
-        }).catch(err=>{
-          alert(err)
-          this.unlockRender()
-        })
+            } else throw "Error deleting method: " + resp.status
+          }).then(data => {
+            this.#isupdate = false
+            this.initMethod()
+            this.unlockRender()
+          }).catch(err => {
+            alert(err)
+            this.unlockRender()
+          })
       }
     }
   }
-  
-  initMethod(){
+
+  initMethod() {
     this.#current = JSON.parse(JSON.stringify(this.#method_template))
-    this.#current.id = Math.abs((Math.random() * 10e11)|0)
+    this.#current.id = Math.abs((Math.random() * 10e11) | 0)
     this.#current.metadata = []
     this.#tmp_inputs = [
       {
-        id : "ccpimage",
-        title : "Runtime",
-        description : "The image of the runtime to use for method execution. This depends on the infrastructure specific protocol for interacting with registries.",
-        minOccurs : 1,
-        maxOccurs : 1,
-        schema : {
-          type : "string",
-          format : "url",
-          contentMediaType : "text/plain",
-          default : "",
-          readonly : true,
+        id: "ccpimage",
+        title: "Runtime",
+        description: "The image of the runtime to use for method execution. This depends on the infrastructure specific protocol for interacting with registries.",
+        minOccurs: 1,
+        maxOccurs: 1,
+        schema: {
+          type: "string",
+          format: "url",
+          contentMediaType: "text/plain",
+          default: "",
+          readonly: true,
         }
       }
     ]
     this.#tmp_outputs = []
   }
-  
-  resetMethod(){
+
+  resetMethod() {
     this.initMethod()
     this.render()
   }
-  
-  cloneOrEditMethod(method){
+
+  cloneOrEditMethod(method) {
     const subject = this.#boot.subject
-    const matchingauthors = method.metadata ? method.metadata.filter(md=>md.role === "author" && md.href.endsWith("/" + subject)).length : 0
-    if(matchingauthors === 0) this.cloneMethod(method.id, true);
-    else{
+    const matchingauthors = method.metadata ? method.metadata.filter(md => md.role === "author" && md.href.endsWith("/" + subject)).length : 0
+    if (matchingauthors === 0) this.cloneMethod(method.id, true);
+    else {
       this.#dragging_method = method.id
       this.#cloneornew_dialog.style.display = "block"
       this.#cloneornew_dialog.classList.add("show")
     }
   }
-  
-  cloneMethod(method, derivation){
-    if(this.#locked) return;
+
+  cloneMethod(method, derivation) {
+    if (this.#locked) return;
     this.lockRender()
     const derive = derivation ? "?derive=true" : ""
     this.#boot.secureFetch(this.#serviceurl + "/methods/" + method + "/clone" + derive).then(
-      (resp)=>{
-        if(resp.status === 200){
+      (resp) => {
+        if (resp.status === 200) {
           return resp.json()
-        }else throw "Error retrieving process: " + resp.status
+        } else throw "Error retrieving process: " + resp.status
       }
-    ).then(data=>{
+    ).then(data => {
       this.#current = data
       this.#isupdate = false
-      this.#tmp_inputs = Object.keys(this.#current.inputs).map(k=>this.#current.inputs[k])
-      this.#tmp_outputs = Object.keys(this.#current.outputs).map(k=>this.#current.outputs[k])
+      this.#tmp_inputs = Object.keys(this.#current.inputs).map(k => this.#current.inputs[k])
+      this.#tmp_outputs = Object.keys(this.#current.outputs).map(k => this.#current.outputs[k])
       this.unlockRender()
-    }).catch(err=>{
+    }).catch(err => {
       this.unlockRender()
     })
   }
-  
-  editMethod(method){
-    if(this.#locked) return;
+
+  editMethod(method) {
+    if (this.#locked) return;
     this.lockRender()
     this.#boot.secureFetch(this.#serviceurl + "/methods/" + method + "/updatable").then(
-      (resp)=>{
-        if(resp.status === 200){
+      (resp) => {
+        if (resp.status === 200) {
           return resp.json()
-        }else throw "Error retrieving process: " + resp.status
+        } else throw "Error retrieving process: " + resp.status
       }
-    ).then(data=>{
+    ).then(data => {
       this.#current = data
       this.#isupdate = true
-      this.#tmp_inputs = Object.keys(this.#current.inputs).map(k=>this.#current.inputs[k])
-      this.#tmp_outputs = Object.keys(this.#current.outputs).map(k=>this.#current.outputs[k])
+      this.#tmp_inputs = Object.keys(this.#current.inputs).map(k => this.#current.inputs[k])
+      this.#tmp_outputs = Object.keys(this.#current.outputs).map(k => this.#current.outputs[k])
       this.unlockRender()
-    }).catch(err=>{
+    }).catch(err => {
       this.unlockRender()
     })
   }
-  
-  adoptTemporaries(){
+
+  adoptTemporaries() {
     this.#current.inputs = {}
-    this.#tmp_inputs.forEach(t=>{
+    this.#tmp_inputs.forEach(t => {
       this.#current.inputs[t.id] = t
     })
     this.#current.outputs = {}
-    this.#tmp_outputs.forEach(t=>{
+    this.#tmp_outputs.forEach(t => {
       this.#current.outputs[t.id] = t
     })
   }
 
-  getInputAt(i){
+  getInputAt(i) {
     return this.#tmp_inputs[i]
   }
-  
-  deleteTmpInputAt(i){
-    this.#tmp_inputs.splice(i,1)
+
+  deleteTmpInputAt(i) {
+    this.#tmp_inputs.splice(i, 1)
   }
-  
-  deleteTmpOutputAt(i){
-    this.#tmp_outputs.splice(i,1)
+
+  deleteTmpOutputAt(i) {
+    this.#tmp_outputs.splice(i, 1)
   }
- 
-  lockRender(){
+
+  lockRender() {
     this.#locked = true
     this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
   }
-  
-  unlockRender(){
+
+  unlockRender() {
     this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
     this.render()
     this.#locked = false
-    if(this.parentElement) this.parentElement.scrollIntoViewIfNeeded();
+    if (this.parentElement) this.parentElement.scrollIntoViewIfNeeded();
   }
- 
-  render(){
+
+  render() {
     this.#rootdoc.innerHTML = `
       <!-- Modal -->
       <div class="modal fade" style="background-color:rgba(0,0,0,0.3)" id="cloneornew" tabindex="-1" role="dialog">
@@ -395,7 +395,7 @@ class CCPMethodEditorController extends HTMLElement{
                 <div class="ccp-toolbar-right">
                   ${this.renderSaveButton()}
                   ${this.renderResetButton()}
-                  ${ this.#isupdate ?  this.renderDeleteButton() : "" }
+                  ${this.#isupdate ? this.renderDeleteButton() : ""}
                 </div>
               </div>
             </div>
@@ -487,12 +487,12 @@ class CCPMethodEditorController extends HTMLElement{
                   <select name="script-selector" style="border:none; padding:.3rem">
                     <option value="deploy-script">Deploy</option>
                     <option value="execute-script">Execute</option>
-                    <option value="undeploy-script">Undeploy</option>
+                    <!--option value="undeploy-script">Undeploy</option-->
                   </select>
                 </div>
               </div>
             </summary>
-            <div class="card-body" name="input_container">
+            <div class="card-body" name="scripts_container">
               ${this.renderScripts()}
             </div>
           </div>
@@ -501,45 +501,45 @@ class CCPMethodEditorController extends HTMLElement{
     `
     this.renderInputs()
     this.renderOutputs()
-    
+
     this.#cloneornew_dialog = this.#rootdoc.querySelector("#cloneornew")
-    
-    this.#rootdoc.querySelector("#cloneornew button[name=clone]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("#cloneornew button[name=clone]").addEventListener("click", ev => {
       this.#cloneornew_dialog.classList.remove("show")
       this.#cloneornew_dialog.style.display = "none"
       this.cloneMethod(this.#dragging_method)
       this.#dragging_method = null
     })
-    
-    this.#rootdoc.querySelector("#cloneornew button[name=derive]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("#cloneornew button[name=derive]").addEventListener("click", ev => {
       this.#cloneornew_dialog.classList.remove("show")
       this.#cloneornew_dialog.style.display = "none"
       this.cloneMethod(this.#dragging_method, true)
       this.#dragging_method = null
     })
-    
-    this.#rootdoc.querySelector("#cloneornew button[name=edit]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("#cloneornew button[name=edit]").addEventListener("click", ev => {
       this.#cloneornew_dialog.classList.remove("show")
       this.#cloneornew_dialog.style.display = "none"
       this.editMethod(this.#dragging_method)
       this.#dragging_method = null
     })
-    
-    this.#rootdoc.querySelector("input[name=title]").addEventListener("input", ev=>{
+
+    this.#rootdoc.querySelector("input[name=title]").addEventListener("input", ev => {
       this.#current.title = ev.currentTarget.value
       this.#rootdoc.querySelector("span[name=header]").innerText = this.#current.title
     })
-    
-    this.#rootdoc.querySelector("input[name=version]").addEventListener("input", ev=>{
+
+    this.#rootdoc.querySelector("input[name=version]").addEventListener("input", ev => {
       this.#current.version = ev.currentTarget.value
     })
-    
-    this.#rootdoc.querySelector("input[name=description]").addEventListener("input", ev=>{
+
+    this.#rootdoc.querySelector("input[name=description]").addEventListener("input", ev => {
       this.#current.description = ev.currentTarget.value
     })
-    
-    this.#rootdoc.addEventListener("drop", ev=>{
-      if(ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')){
+
+    this.#rootdoc.addEventListener("drop", ev => {
+      if (ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')) {
         const method = JSON.parse(ev.dataTransfer.getData('application/json+ccpmethod'))
         ev.stopImmediatePropagation()
         ev.preventDefault()
@@ -547,349 +547,366 @@ class CCPMethodEditorController extends HTMLElement{
         this.cloneOrEditMethod(method)
       }
     })
-    
-    this.#rootdoc.addEventListener("dragover", ev=>{
+
+    this.#rootdoc.addEventListener("dragover", ev => {
       ev.preventDefault()
     })
-    
-    this.#rootdoc.querySelector("button[name=reset]").addEventListener("click", ev=>{
-      if(window.confirm("All unsaved data will be lost. Proceed?")){
-        this.resetMethod() 
+
+    this.#rootdoc.querySelector("button[name=reset]").addEventListener("click", ev => {
+      if (window.confirm("All unsaved data will be lost. Proceed?")) {
+        this.resetMethod()
       }
       ev.preventDefault()
       ev.stopPropagation()
     })
-   
-    this.#rootdoc.querySelector("button[name=save]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("button[name=save]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
-      this.saveMethod()     
+      this.saveMethod()
     })
-    
-    if(this.#isupdate){
-      this.#rootdoc.querySelector("button[name=delete]").addEventListener("click", ev=>{
+
+    if (this.#isupdate) {
+      this.#rootdoc.querySelector("button[name=delete]").addEventListener("click", ev => {
         ev.preventDefault()
         ev.stopPropagation()
         this.deleteMethod()
-      })  
+      })
     }
-       
-    this.#rootdoc.querySelector("input[name=keyword-input]").addEventListener("keypress", ev=>{
-      if(ev.key === "Enter" || ev.which === 13){
+
+    this.#rootdoc.querySelector("input[name=keyword-input]").addEventListener("keypress", ev => {
+      if (ev.key === "Enter" || ev.which === 13) {
         ev.preventDefault()
         ev.stopPropagation()
         const val = ev.target.value
         ev.target.value = null
-        if(!this.#current.keywords){
+        if (!this.#current.keywords) {
           this.#current.keywords = [val]
-        }else{
+        } else {
           this.#current.keywords.push(val)
         }
         this.reRenderKeywords()
       }
     })
-    
-    this.#rootdoc.querySelector("div[name=keyword-list]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("div[name=keyword-list]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
-      if(ev.target.getAttribute('name') === "delete-keyword"){
+      if (ev.target.getAttribute('name') === "delete-keyword") {
         const index = ev.target.getAttribute("data-index")
         this.#current.keywords.splice(index, 1)
         this.reRenderKeywords()
         this.#rootdoc.querySelector("input[name=keyword-input]").focus()
       }
     })
-    
-    this.#rootdoc.querySelector("input[name=category-input]").addEventListener("keypress", ev=>{
-      if(ev.key === "Enter" || ev.which === 13){
+
+    this.#rootdoc.querySelector("input[name=category-input]").addEventListener("keypress", ev => {
+      if (ev.key === "Enter" || ev.which === 13) {
         ev.preventDefault()
         ev.stopPropagation()
         const val = ev.target.value
         ev.target.value = null
-        if(this.#current.metadata.filter(md=>md.role === "category" && md.title === val).length === 0){
-          this.#current.metadata.push({ role : "category", title : val})
+        if (this.#current.metadata.filter(md => md.role === "category" && md.title === val).length === 0) {
+          this.#current.metadata.push({ role: "category", title: val })
           this.reRenderCategories()
         }
       }
     })
-    
-    this.#rootdoc.querySelector("div[name=category-list]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("div[name=category-list]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
-      if(ev.target.getAttribute('name') === "delete-category"){
+      if (ev.target.getAttribute('name') === "delete-category") {
         const val = ev.target.parentElement.title
-        this.#current.metadata = this.#current.metadata.filter(md=>md.role !== "category" || md.title !== val)
+        this.#current.metadata = this.#current.metadata.filter(md => md.role !== "category" || md.title !== val)
         this.reRenderCategories()
         this.#rootdoc.querySelector("input[name=category-input]").focus()
       }
     })
-    
-    this.#rootdoc.querySelector("div[name=infrastructures]").addEventListener("change", ev=>{
-      if(ev.target.getAttribute("name") === "infrastructure-input" && ev.target.value){
+
+    this.#rootdoc.querySelector("div[name=infrastructures]").addEventListener("change", ev => {
+      if (ev.target.getAttribute("name") === "infrastructure-input" && ev.target.value) {
         ev.preventDefault()
         ev.stopPropagation()
         const id = ev.target.value
         const display = ev.target.options[ev.target.selectedIndex].text
         let link = {
-          rel : "compatibleWith", title : display, href : "infrastructures/" + id
+          rel: "compatibleWith", title: display, href: "infrastructures/" + id
         }
-        if(!this.#current.links){
+        if (!this.#current.links) {
           this.#current.links = [link]
-        }else{
+        } else {
           this.#current.links.push(link)
         }
         this.reRenderInfrastructures(ev.currentTarget)
       }
     })
-    
-    this.#rootdoc.querySelector("div[name=infrastructure-list]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("div[name=infrastructure-list]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
-      if(ev.target.getAttribute('name') === "delete-infrastructure"){
+      if (ev.target.getAttribute('name') === "delete-infrastructure") {
         const index = ev.target.getAttribute("data-index")
         this.#current.links.splice(index, 1)
         this.reRenderInfrastructures()
       }
     })
-    
-    this.#rootdoc.querySelector("button[name=add-input]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("button[name=add-input]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
       this.#tmp_inputs.push(
         {
-          id : "new_input",
-          title : "New input",
-          description : "A new input field",
-          minOccurs : 1,
-          maxOccurs : 1,
-          schema : {
-            type : "string",
-            format : null,
-            contentMediaType : "text/plain",
-            default : ""
+          id: "new_input",
+          title: "New input",
+          description: "A new input field",
+          minOccurs: 1,
+          maxOccurs: 1,
+          schema: {
+            type: "string",
+            format: null,
+            contentMediaType: "text/plain",
+            default: ""
           }
         }
       )
       this.renderInputs()
+      this.reRenderScripts()
     })
-    
-    this.#rootdoc.querySelector("button[name=add-ccpannotation]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("button[name=add-ccpannotation]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
       this.#tmp_inputs.push(
         {
-          id : "ccpnote",
-          title : "Annotations for execution",
-          description : "The value of this parameter will be associated as annotation to the execution",
-          minOccurs : 1,
-          maxOccurs : 1,
-          schema : {
-            type : "string",
-            format : null,
-            contentMediaType : "text/plain",
-            default : ""
+          id: "ccpnote",
+          title: "Annotations for execution",
+          description: "The value of this parameter will be associated as annotation to the execution",
+          minOccurs: 1,
+          maxOccurs: 1,
+          schema: {
+            type: "string",
+            format: null,
+            contentMediaType: "text/plain",
+            default: ""
           }
         }
       )
       this.renderInputs()
+      this.reRenderScripts()
     })
-    
-    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
       const evname = ev.target.getAttribute('name')
-      if(evname === "delete-input"){
+      if (evname === "delete-input") {
         ev.preventDefault()
         ev.stopPropagation()
         const index = Number(ev.target.getAttribute("data-index"))
         console.log("deleting input at index", index)
         this.deleteTmpInputAt(index)
         this.renderInputs()
-      } 
+        this.reRenderScripts()
+      }
     })
-    
-    this.#rootdoc.querySelector("button[name=add-output]").addEventListener("click", ev=>{
+
+    //when any input changes update scripts so that possibly variable get re-expanded
+    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("input", ev => {
+      this.reRenderScripts()
+    })
+
+    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("change", ev => {
+      this.reRenderScripts()
+    })
+
+    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
+      const src = ev.target.getAttribute("name")
+      if (src === "plus" || src === "minus" || src === "maxOccurs" || src === "minOccurs") {
+        this.reRenderScripts()
+      }
+    })
+
+    this.#rootdoc.querySelector("button[name=add-output]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
       this.#tmp_outputs.push(
         {
-          id : "new_output",
-          title : "New ouput",
-          description : "A new output field",
-          minOccurs : 1,
-          maxOccurs : 1,
-          metadata : [
+          id: "new_output",
+          title: "New ouput",
+          description: "A new output field",
+          minOccurs: 1,
+          maxOccurs: 1,
+          metadata: [
             {
-              "role" : "file",
-              "title" : "newoutput.txt",
-              "href" : "newoutput.txt"
+              "role": "file",
+              "title": "newoutput.txt",
+              "href": "newoutput.txt"
             }
           ],
-          schema : {
-            type : "string",
-            contentMediaType : "text/plain"
+          schema: {
+            type: "string",
+            contentMediaType: "text/plain"
           }
         }
       )
       this.renderOutputs()
     })
-    
-    this.#rootdoc.querySelector("button[name=add-stdout]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("button[name=add-stdout]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
       this.#tmp_outputs.push(
         {
-          id : "stdout",
-          title : "Standard output",
-          description : "Standard output channel",
-          minOccurs : 1,
-          maxOccurs : 1,
-          metadata : [
+          id: "stdout",
+          title: "Standard output",
+          description: "Standard output channel",
+          minOccurs: 1,
+          maxOccurs: 1,
+          metadata: [
             {
-              "role" : "file",
-              "title" : "stdout",
-              "href" : "stdout"
+              "role": "file",
+              "title": "stdout",
+              "href": "stdout"
             }
           ],
-          schema : {
-            type : "string",
-            contentMediaType : "text/plain"
+          schema: {
+            type: "string",
+            contentMediaType: "text/plain"
           }
         }
       )
       this.renderOutputs()
     })
-    
-    this.#rootdoc.querySelector("button[name=add-stderr]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("button[name=add-stderr]").addEventListener("click", ev => {
       ev.preventDefault()
       ev.stopPropagation()
       this.#tmp_outputs.push(
         {
-          id : "stderr",
-          title : "Standard error",
-          description : "Standard error channel",
-          minOccurs : 1,
-          maxOccurs : 1,
-          metadata : [
+          id: "stderr",
+          title: "Standard error",
+          description: "Standard error channel",
+          minOccurs: 1,
+          maxOccurs: 1,
+          metadata: [
             {
-              "role" : "file",
-              "title" : "stderr",
-              "href" : "stderr"
+              "role": "file",
+              "title": "stderr",
+              "href": "stderr"
             }
           ],
-          schema : {
-            type : "string",
-            contentMediaType : "text/plain"
+          schema: {
+            type: "string",
+            contentMediaType: "text/plain"
           }
         }
       )
       this.renderOutputs()
     })
-    
-    this.#rootdoc.querySelector("div[name=output-list]").addEventListener("click", ev=>{
+
+    this.#rootdoc.querySelector("div[name=output-list]").addEventListener("click", ev => {
       const evname = ev.target.getAttribute('name')
-      if(evname === "delete-output"){
+      if (evname === "delete-output") {
         ev.preventDefault()
         ev.stopPropagation()
         const index = Number(ev.target.getAttribute("data-index"))
         console.log("deleting output at index", index)
         this.deleteTmpOutputAt(index)
         this.renderOutputs()
-      } 
+      }
     })
-    
-    this.#rootdoc.querySelector("select[name=script-selector]").addEventListener("change", ev=>{
+
+    this.#rootdoc.querySelector("select[name=script-selector]").addEventListener("change", ev => {
       ev.preventDefault()
       ev.stopPropagation()
       const scriptname = ev.target.value
-      const areas = Array.prototype.slice.call(this.#rootdoc.querySelectorAll("textarea.script-area"))
-      areas.forEach(a=>{ 
-        if(a.getAttribute("name") === scriptname) a.classList.remove("d-none");
-        else a.classList.add("d-none")
-      })       
+      this.reRenderScripts(scriptname)
     })
-    
-    this.#rootdoc.querySelector("details[name=script-list]").addEventListener("input", ev=>{
+
+    this.#rootdoc.querySelector("div[name=scripts_container]").addEventListener("input", ev => {
       ev.preventDefault()
       ev.stopPropagation()
-      const scriptname = ev.target.getAttribute("name")
-      const script = this.#current.additionalParameters.parameters.filter(p=>p.name === scriptname)[0]
-      if(script) script.value = ev.target.value.split(/\r?\n/);
+      const scriptname = this.getCurrentScriptName()
+      const script = this.#current.additionalParameters.parameters.find(p => p.name === scriptname)
+      if (script) script.value = ev.target.value.split(/\r?\n/);
+      const preview = ev.currentTarget.querySelector("textarea[name=preview]")
+      preview.value = this.codeToPreview(ev.target.value)
     })
   }
-  
-  renderAuthors(){
+
+  renderAuthors() {
     return `
       <ul class="author_list">
-      ${ this.#current.metadata.
-          filter(md=>md.role === "author").
-          map(a=>`<li class="badge bg-warning text-dark" title="Author: ${a.title}">${a.title}</li>`).join() }
+      ${this.#current.metadata.
+        filter(md => md.role === "author").
+        map(a => `<li class="badge bg-warning text-dark" title="Author: ${a.title}">${a.title}</li>`).join()}
       </ul>
     `
   }
-  
-  renderCategoryHints(){
+
+  renderCategoryHints() {
     const ml = document.querySelector("d4s-ccp-methodlist")
     const cats = ml.getCategoryHints()
-    if(cats.indexOf("Uncategorised") === -1) cats.push("Uncategorised")
+    if (cats.indexOf("Uncategorised") === -1) cats.push("Uncategorised")
     return `
       <datalist id="categoryhints">
-        ${cats.map(c=>`<option value="${c}">${c}</option>`)}
+        ${cats.map(c => `<option value="${c}">${c}</option>`)}
       </datalist>
     `
   }
-  
-  renderContexts(){
+
+  renderContexts() {
     return `
       <ul class="context_list">
-      ${ this.#current.metadata.
-          filter(md=>md.role === "context").
-          map(c=>`<li class="context_list_item" title="${c.title}">${c.title}</li>`).join("") }
+      ${this.#current.metadata.
+        filter(md => md.role === "context").
+        map(c => `<li class="context_list_item" title="${c.title}">${c.title}</li>`).join("")}
       </ul>
     `
   }
-  
-  renderSaveButton(){
+
+  renderSaveButton() {
     return `
       <button title="Save" name="save" class="btn btn-primary ccp-toolbar-button">
         ${this.#disc_icon}  
       </button>
     `
   }
-  
-  renderDeleteButton(){
+
+  renderDeleteButton() {
     return `
       <button title="Delete" name="delete" class="btn btn-danger ccp-toolbar-button">
         ${this.#delete_icon}  
       </button>
     `
   }
-  
-  renderResetButton(){
+
+  renderResetButton() {
     return `
       <button name="reset" title="Reset" class="btn btn-primary ccp-toolbar-button">
         <svg viewBox="0 0 24 24">
           ${this.#erase_icon} 
         </svg>
       </button>
-    `    
+    `
   }
-  
-  renderPlusButton(name){
+
+  renderPlusButton(name) {
     return `
       <button name="${name}" title="Add" name="reset" class="btn btn-primary ccp-toolbar-button">
         ${this.#plus_icon}   
       </button>
     `
   }
-  
-  renderStandardInputButtons(){
+
+  renderStandardInputButtons() {
     return `
       <button name="add-ccpannotation" title="Add annotation input" name="reset" class="btn btn-info ccp-toolbar-button">
         ${this.#annotation_input_icon}  
       </button>
     `
   }
-  
-  renderStandardOutputButtons(){
+
+  renderStandardOutputButtons() {
     return `
       <button name="add-stdout" title="Add stdout" class="btn btn-success ccp-toolbar-button">
         ${this.#output_icon}  
@@ -899,14 +916,14 @@ class CCPMethodEditorController extends HTMLElement{
       </button>
     `
   }
-  
-  reRenderKeywords(){
+
+  reRenderKeywords() {
     this.#rootdoc.querySelector("div[name=keyword-list]").innerHTML = this.renderKeywords()
   }
-  
-  renderKeywords(){
-    if(this.#current.keywords){
-      return this.#current.keywords.map((k,i) => {
+
+  renderKeywords() {
+    if (this.#current.keywords) {
+      return this.#current.keywords.map((k, i) => {
         return `
           <div class="ccp-option badge ccp-keyword" title="${k}" alt="${k}">
             <span>${k}</span>
@@ -914,18 +931,18 @@ class CCPMethodEditorController extends HTMLElement{
           </div>
         `
       }).join("\n")
-    }else{
+    } else {
       return ""
     }
   }
-  
-  reRenderCategories(){
+
+  reRenderCategories() {
     this.#rootdoc.querySelector("div[name=category-list]").innerHTML = this.renderCategories()
   }
-  
-  renderCategories(){
-    if(this.#current.metadata){
-      return this.#current.metadata.filter(md=>md.role === "category").map((k,i) => {
+
+  renderCategories() {
+    if (this.#current.metadata) {
+      return this.#current.metadata.filter(md => md.role === "category").map((k, i) => {
         return `
           <div class="ccp-option badge ccp-category" title="${k.title}" alt="${k.title}">
             <span>${k.title}</span>
@@ -933,33 +950,32 @@ class CCPMethodEditorController extends HTMLElement{
           </div>
         `
       }).join("\n")
-    }else{
+    } else {
       return ""
     }
-  } 
- 
-  reRenderInfrastructures(){
+  }
+
+  reRenderInfrastructures() {
     this.#rootdoc.querySelector("select[name=infrastructure-input]").innerHTML = this.renderInfrastructureOptions()
     this.#rootdoc.querySelector("div[name=infrastructure-list]").innerHTML = this.renderInfrastructures()
   }
- 
-  renderInfrastructureOptions(){
-    const selectedinfras = this.#current.links.filter(l=>l.rel === "compatibleWith").map(i=>i.href.split("/")[1])
-    const available = this.#infrastructures.filter(i=>{ return selectedinfras.indexOf(i.id) === -1 }) 
+
+  renderInfrastructureOptions() {
+    const selectedinfras = this.#current.links.filter(l => l.rel === "compatibleWith").map(i => i.href.split("/")[1])
+    const available = this.#infrastructures.filter(i => { return selectedinfras.indexOf(i.id) === -1 })
     return `
       <option></option>
-      ${
-        available.map(infra=>{
-          return `
+      ${available.map(infra => {
+      return `
             <option value="${infra.id}" title="${infra.description}">${infra.name}</option>
           `
-        }).join("\n")
+    }).join("\n")
       } 
     `
   }
-  
-  renderInfrastructures(){
-    return this.#current.links.filter(l=>l.rel === "compatibleWith").map((l, i)=>{
+
+  renderInfrastructures() {
+    return this.#current.links.filter(l => l.rel === "compatibleWith").map((l, i) => {
       return `
         <div class="ccp-option badge ccp-keyword" title="${l.title}" alt="${l.title}">
           <span>${l.title}</span>
@@ -968,37 +984,65 @@ class CCPMethodEditorController extends HTMLElement{
       `
     }).join("\n")
   }
-   
-  renderInputs(){
+
+  renderInputs() {
     const parent = this.#rootdoc.querySelector("div[name=input-list]")
-    parent.innerHTML = "" 
-    return this.#tmp_inputs.map((inp, i)=>{
+    parent.innerHTML = ""
+    return this.#tmp_inputs.map((inp, i) => {
       const c = document.createElement("d4s-ccp-input-editor");
       parent.appendChild(c)
-      c.render(inp, i)    
+      c.render(inp, i)
     })
   }
-  
-  renderOutputs(){
+
+  renderOutputs() {
     const parent = this.#rootdoc.querySelector("div[name=output-list]")
-    parent.innerHTML = "" 
-    return this.#tmp_outputs.map((outp, i)=>{
+    parent.innerHTML = ""
+    return this.#tmp_outputs.map((outp, i) => {
       const c = document.createElement("d4s-ccp-output-editor");
       parent.appendChild(c)
-      c.render(outp, i)    
+      c.render(outp, i)
     })
   }
-  
-  renderScripts(){
-    const val = 'deploy-script'
-    return this.#current.additionalParameters.parameters.map(
-       (script, i) => {
-         let code = script.value && script.value.length ? script.value.join("\r\n") : ""
-         return `
-           <textarea rows="5" class="script-area form-control ${script.name === val ? '' : 'd-none'}" name="${script.name}">${code}</textarea>
-         `
-       }
-    ).join("\n")
+
+  codeToPreview(code) {
+    return this.#tmp_inputs.reduce((acc, i) => {
+      const r = new RegExp(`{{\\s*${i.id}\\s*}}`, 'g');
+      var def = i.schema.default
+      if(i.schema.format === "secret"){
+        def = Array.isArray(def) ? def : [def] 
+        def = def.map(v=>"***")
+      }
+      if(i.schema.format === "file"){
+        def = Array.isArray(def) ? def : [def] 
+        def = def.map(v=>v.substring(0,5) + "......" + v.substring(v.length-5))
+      }
+      return acc.replaceAll(r, def)
+    }, code)
+  }
+
+  getCurrentScriptName() {
+    return this.#rootdoc.querySelector("div[name=scripts_container] div.script-area").getAttribute("name")
+  }
+
+  renderScripts(scriptname) {
+    const val = scriptname ? scriptname : 'deploy-script'
+    const script = this.#current.additionalParameters.parameters.find(s => s.name === val)
+    if (!script) return '';
+    const code = script.value && script.value.length ? script.value.join("\r\n") : ""
+    return `
+      <div class="script-area" ${script.name === val ? 'd-block' : 'd-none'}" name="${script.name}">
+        <textarea rows="5" class="form-control">${code}</textarea>
+        <span name="preview" class="d-inline-block fst-italic text-muted position-absolute m-0 end-0 px-4 py-2 pe-none">Preview</span> 
+        <textarea rows="5" name="preview" class="script-area form-control my-1 text-muted border-0" readonly>${this.codeToPreview(code)}</textarea>
+      </div>
+    `
+  }
+
+  reRenderScripts(scriptname) {
+    const container = this.#rootdoc.querySelector("div[name=scripts_container]")
+    const sn = scriptname ? scriptname : this.getCurrentScriptName()
+    container.innerHTML = this.renderScripts(sn)
   }
 }
 
diff --git a/ccp/js/methodlistcontroller.js b/ccp/js/methodlistcontroller.js
index e4bb1be..67d450f 100644
--- a/ccp/js/methodlistcontroller.js
+++ b/ccp/js/methodlistcontroller.js
@@ -220,9 +220,9 @@ class CCPMethodList extends HTMLElement{
         const f = filter.toLowerCase()
         this.#filtered = this.#data.filter(d=>{
           return false || 
-            (d.title.toLowerCase().indexOf(f) !== -1)|| 
-            (d.description.indexOf(f) !== -1) ||
-            (d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
+            (d.title && d.title.toLowerCase().indexOf(f) !== -1)|| 
+            (d.description && d.description.indexOf(f) !== -1) ||
+            (Array.isArray(d.keywords) && d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
         })
       }
       this.groupBy()