Modifications to picklist as it was not working with a delayed set when I tested with actual Widget form. Definitely better though with these changes.

ayanova/devdocs/todo.txt

@@ -50,16 +50,11 @@ CURRENT TODOs
 @@@@@@@@@@@ ROADMAP STAGE 2:
 
 
-todo: TEST Picklist on iPad, and shitty lenovo tablet
+
 todo: modify Widget form to use picklist to select user, test with huge tracts o'data
 todo: check picklist current default templates are adequate for now
 todo: picklist template editor UI at client end	
 todo: document how to use picklist in user docs
-todo: login form on mobile (and desktop) 
-	- is scrunched to the top, logo with almost no headroom, would like to see it all centered
-	- version banner is not visible on ipad without scrolling down (dragging form upwards)
-		- Maybe the banner is not a good idea, it never looks right exactly, put the version and copyright elsewhere?
-		- Or play with it and see if it can be made to look nicer, centered, cleaner etc
 
 todo: now that we have case insensitive should I port that shit over to the datagrid filter as well?
 todo: Utilize new picklist in Widget form to select something that exists and can then test out DataListView etc

ayanova/src/components/pick-list.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    {{ value }}
     <v-autocomplete
       v-bind:value="value"
       v-on:input="selectionMade($event)"
@@ -41,16 +42,7 @@ import _ from "../libs/lodash.min.js";
 
 export default {
   created() {
-    var vm = this;
-    //need to add no selection object always, if it's not valid then that's a rule for the form, not the control
-    window.$gz.form.addNoSelectionItem(vm.searchResults);
-
-    //set initial value in control if selected
-    if (vm.value != null && vm.value != 0) {
-      //It has a prior non empty selection that needs to be fetched
-      var urlParams = "?ayaType=" + vm.ayaType + "&preId=" + vm.value;
-      vm.getList(urlParams);
-    }
+    this.fetchValueIfNotPresent();
   },
   data() {
     return {
@@ -77,13 +69,36 @@ export default {
       type: Boolean,
       default: false
     },
-    allowEdit: {
+    showEditIcon: {
       type: Boolean,
       default: false
     },
     label: { type: String, default: "" }
   },
   watch: {
+    value(val) {
+      this.fetchValueIfNotPresent();
+      // //is there a value that might require fetching?
+      // if (val == null || val == 0) {
+      //   return;
+      // }
+      // var vm = this;
+      // //check if it's in the list of items we have here
+      // for (var i = 0; i < vm.searchResults.length; i++) {
+      //   if (vm.searchResults[i].id == val) {
+      //     return;
+      //   }
+      // }
+
+      // //Not here, better get it
+      // var urlParams = "?ayaType=" + vm.ayaType + "&preId=" + vm.value;
+      // console.log("WATCH:Value not present, calling getlist with ", urlParams);
+      // vm.getList(urlParams);
+
+      //todo: here is where we need to trigger the INIT single fetch because it's not being set otherwise as there is a delay on form fetching
+      // console.log("WATCH:Value changed and it's not in the list FETCH?:", val);
+      // setValue(this.$refs.textField.$refs.input, value);
+    },
     searchEntry(val, oldVal) {
       var vm = this;
       //clear any local errors
@@ -130,7 +145,7 @@ export default {
       });
     },
     editIcon: function() {
-      if (!this.allowEdit) {
+      if (!this.showEditIcon) {
         return null;
       }
       if (this.value != 0) {
@@ -159,6 +174,29 @@ export default {
       }
       this.lastSelection = e;
     },
+    fetchValueIfNotPresent() {
+      //is there a value that might require fetching?
+
+      var vm = this;
+      var val = vm.value;
+      if (val == null) {
+        return;
+      }
+      //check if it's in the list of items we have here
+      for (var i = 0; i < vm.searchResults.length; i++) {
+        if (vm.searchResults[i].id == val) {
+          return;
+        }
+      }
+      //is it the no selection item?
+      if (val == 0) {
+        window.$gz.form.addNoSelectionItem(vm.searchResults);
+      } else {
+        //Not here, better get it
+        var urlParams = "?ayaType=" + vm.ayaType + "&preId=" + vm.value;
+        vm.getList(urlParams);
+      }
+    },
     replaceLastSelection() {
       var vm = this;
       //check if searchResults has last selection, if not then add it back in again

ayanova/src/views/home-dashboard.vue

@@ -4,7 +4,7 @@
       v-model="selectedWidget"
       :ayaType="ayaType().Widget"
       :label="lt('Widget')"
-      :allowEdit="true"
+      :showEditIcon="true"
     >
     </gz-pick-list>
     <v-divider></v-divider>

ayanova/src/views/widget.vue

@@ -134,6 +134,27 @@
                 @change="onChange('active')"
               ></v-checkbox>
             </v-col>
+
+            <v-col
+              v-if="form().showMe(this, 'UserId')"
+              cols="12"
+              sm="6"
+              lg="4"
+              xl="3"
+            >
+              <gz-pick-list
+                :ayaType="ayaType().User"
+                :showEditIcon="true"
+                v-model="obj.userId"
+                :readonly="formState.readOnly"
+                :label="lt('User')"
+                ref="userid"
+                :error-messages="form().serverErrors(this, 'userid')"
+                @change="onChange('userid')"
+              ></gz-pick-list>
+              {{ obj.userId }}
+            </v-col>
+
             <v-col
               v-if="form().showMe(this, 'UserType')"
               cols="12"
@@ -289,7 +310,7 @@ export default {
         count: null,
         customFields: "{}",
         tags: [],
-        userId: 0
+        userId: null
       },
       formState: {
         ready: false,
@@ -353,6 +374,9 @@ export default {
     translation() {
       return window.$gz.translation;
     },
+    ayaType: function() {
+      return window.$gz.type;
+    },
     form() {
       return window.$gz.form;
     },