diff --git a/ayanova/src/api/form-custom-template.js b/ayanova/src/api/form-custom-template.js
index 3c75c600..84ace6e9 100644
--- a/ayanova/src/api/form-custom-template.js
+++ b/ayanova/src/api/form-custom-template.js
@@ -40,5 +40,25 @@ export default {
         resolve();
       }
     });
+  },
+  getFieldTemplateValue(formKey, fieldKey) {
+    if (fieldKey === undefined) {
+      throw "ERROR form-custom-template::getFieldTemplateValue -> fieldKey not specified for template for form [" +
+        formKey +
+        "]";
+    }
+
+    var template = window.$gz.store.state.formCustomTemplate[formKey];
+    if (template === undefined) {
+      throw "ERROR form-custom-template::getFieldTemplateValue -> Store is missing form template for [" +
+        formKey +
+        "]";
+    }
+
+    //_https://lodash.com/docs#find
+    //Note that not every field being requested will exist so it's valid to return undefined
+    var templateItem = window.$gz._.find(template, ["fld", fieldKey]);
+
+    return templateItem;
   }
 };
diff --git a/ayanova/src/views/customize.vue b/ayanova/src/views/customize.vue
index 1c3481b1..64f41210 100644
--- a/ayanova/src/views/customize.vue
+++ b/ayanova/src/views/customize.vue
@@ -12,7 +12,9 @@
       READONLY: {{ formState.readOnly }}
       <br />
     </div> -->
-
+    <div>
+      {{ this.$store.state.formCustomTemplate[formCustomTemplateKey] }}
+    </div>
     <v-row v-if="this.formState.ready">
       <v-col>
         <v-form ref="form">
@@ -31,15 +33,22 @@
               >
             </v-col>
 
-            <template
-              v-for="item in this.$store.state.formCustomTemplate[
-                formCustomTemplateKey
-              ]"
-            >
+            <template v-for="item in formAvailableFields">
               <v-col :key="item.fld" cols="12" sm="6" lg="4" xl="3" px-2>
-                <div>
-                  {{ item }}
-                </div>
+                <v-card>
+                  <v-card-title>
+                    {{ lt(item.key) }}
+                  </v-card-title>
+                  <v-card-subtitle>
+                    {{ item.key }}
+                  </v-card-subtitle>
+                  <v-checkbox
+                    v-model="item.hideable"
+                    :label="lt('FormFieldVisible')"
+                    :ref="item.key"
+                    :disabled="!canHide(item)"
+                  ></v-checkbox>
+                </v-card>
               </v-col>
             </template>
           </v-row>
@@ -49,6 +58,7 @@
   </v-container>
 </template>
 <script>
+//LTDisplay [FieldKey] , Visible, Required, DataType (if custom)
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /*  Xeslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -86,6 +96,10 @@ export default {
   created() {
     // Fetch as needed
     // this.getDataFromApi();
+
+    //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
+    //modify the menu as necessary
+    generateMenu(this, false); //default is never read only and passing in this vm
   },
   data() {
     return {
@@ -151,54 +165,34 @@ export default {
     lt: function(ltkey) {
       return window.$gz.locale.get(ltkey);
     },
-    getDataFromApi() {
-      this.formState.loading = true;
-      if (!this.formCustomTemplateKey) {
-        throw FORM_KEY + "::getDataFromApi -> Missing recordID!";
-      }
-      //http://localhost:7575/api/v8/FormCustom/AvailableFields/widget
-      var url = API_BASE_URL + "AvailableFields/" + this.formCustomTemplateKey;
-      var vm = this;
-      window.$gz.form.deleteAllErrorBoxErrors(this);
+    canHide: function(availableFieldItem) {
+      //Two things can prevent allowing hide, if the template says it's required and / or if the aviailable fields record
+      //hideable value is false
+      var templateSaysRequired = false;
+      var availableFieldsSayHideable = true;
 
-      window.$gz.api
-        .get(url)
-        .then(res => {
-          if (res.error != undefined) {
-            //Not found?
-            if (res.error.code == "2010") {
-              //notify not found error then navigate backwards
-              window.$gz.dialog
-                .displayLTErrorMessage("ErrorAPI2010")
-                .then(() => {
-                  // navigate backwards
-                  vm.$router.go(-1);
-                });
-            }
-            vm.formState.serverError = res.error;
-            window.$gz.form.setErrorBoxErrors(vm);
-          } else {
-            vm.obj = res.data;
-            //Update the form status
-            window.$gz.form.setFormState({
-              vm: vm,
-              dirty: false,
-              valid: true,
-              loading: false,
-              readOnly: res.readOnly ? true : false
-            });
-            //modify the menu as necessary
-            generateMenu(vm, res.readOnly);
-          }
-        })
-        .catch(function handleGetDataFromAPIError(error) {
-          //Update the form status
-          window.$gz.form.setFormState({
-            vm: vm,
-            loading: false
-          });
-          window.$gz.errorHandler.handleFormError(error, vm);
-        });
+      //first check template
+      var templateItem = window.$gz.formCustomTemplate.getFieldTemplateValue(
+        this.formCustomTemplateKey,
+        availableFieldItem.key
+      );
+
+      if (
+        templateItem &&
+        templateItem.required !== undefined &&
+        templateItem.required === "true" //it's text
+      ) {
+        templateSaysRequired = true;
+      }
+
+      //Now check availableFields collection
+      if (availableFieldItem.hideable != true) {
+        availableFieldsSayHideable = false;
+      }
+
+      return (
+        templateSaysRequired === false && availableFieldsSayHideable === true
+      );
     }
   }
 };
@@ -245,20 +239,12 @@ function generateMenu(vm) {
 // }
 
 function initForm(vm) {
-  //for now just stub this out, may need to hit another route or something in init later so keep for now
-
-  //this is a ten second delay return just to confirm it's really acting like it should
-  // return new Promise(function(resolve) {
-  //   setTimeout(resolve, 10000);
-  // });
-
-  //for now just return the resolved promise
-  // return Promise.resolve(null);
-  return getAvailableFields(vm);
+  return ensureTemplateIsInStore(vm).then(getAvailableFields(vm));
+  //return getAvailableFields(vm).then(ensureTemplateIsInStore(vm));
 }
 
 ////////////////////
-
+//
 function getAvailableFields(vm) {
   //http://localhost:7575/api/v8/FormCustom/AvailableFields/widget
 
@@ -272,6 +258,14 @@ function getAvailableFields(vm) {
   });
 }
 
+////////////////////
+//
+function ensureTemplateIsInStore(vm) {
+  return window.$gz.formCustomTemplate.get(
+    vm.$route.params.formCustomTemplateKey
+  );
+}
+
 /*
     OLD (not used, drop)
 "ObjectCustomFieldCustomGrid": "Custom Fields",
@@ -311,50 +305,42 @@ LTDisplay [FieldKey] , Visible, Required, DataType (if custom)
   Iterate and display in series of boxes (small factor UI)
   OnSave sends to server and roundtrips back to refresh local cached copy
 
+Example form available fields
+{"data":[
+{"key":"WidgetName","propertyName":"Name","hideable":false,"sharedLTKey":false,"custom":false},
+{"key":"WidgetSerial","propertyName":"Serial","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetDollarAmount","propertyName":"DollarAmount","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetCount","propertyName":"Count","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetRoles","propertyName":"Roles","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetStartDate","propertyName":"StartDate","hideable":false,"sharedLTKey":false,"custom":false},
+{"key":"WidgetEndDate","propertyName":"EndDate","hideable":false,"sharedLTKey":false,"custom":false},
+{"key":"WidgetNotes","propertyName":"Notes","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"Active","propertyName":"Active","hideable":true,"sharedLTKey":true,"custom":false},
+{"key":"Tags","propertyName":"Tags","hideable":true,"sharedLTKey":true,"custom":false},
+{"key":"WidgetCustom1","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom2","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom3","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom4","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom5","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom6","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom7","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom8","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom9","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom10","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom11","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom12","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom13","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom14","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom15","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom16","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true}],"readOnly":true}
 
-
-<template>
-  <div v-if="this.$store.state.formCustomTemplate[formCustomTemplateKey]">
-    <span class="v-label v-label--active theme--light">
-      {{ lt("ObjectCustomFieldCustomGrid") }}
-    </span>
-    <!-- <div>
-      <h5>FORMKEY: {{ formKey }}</h5>
-      <h5>TEMPLATE: {{ this.$store.state.formCustomTemplate[formKey] }}</h5>
-      <h5>CUSTOM FIELD DATA:</h5>
-      <span class="caption">
-        {{ value }}
-      </span>
-    </div>
-    <hr /> -->
-
-    <div>
-      <v-row align-center justify-left row wrap>
-   
-        <template
-          v-for="item in this.$store.state.formCustomTemplate[
-            formCustomTemplateKey
-          ]"
-        >
-          <v-col :key="item.fld" cols="12" sm="6" lg="4" xl="3" px-2>
-            <div>
-              {{ item }}
-            </div>
-          </v-col>
-        </template>
-      </v-row>
-    </div>
-  </div>
-</template>
-
-
-     <!-- Here is what a template object looks like 
+Example form custom template
     "template":"[
     {\"fld\":\"WidgetNotes\",\"required\":\"true\"},{\"fld\":\"WidgetCustom1\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"datetime\"},
     {\"fld\":\"WidgetCustom2\",\"hide\":\"false\",\"required\":\"true\",\"type\":\"text\"},{\"fld\":\"WidgetCustom3\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"number\"},
     {\"fld\":\"WidgetCustom4\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"bool\"},{\"fld\":\"WidgetCustom5\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"currency\"},
     {\"fld\":\"WidgetCustom6\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"date\"},{\"fld\":\"WidgetCustom7\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"time\"}]"
     Note that it mixes in regular stock form fields that the end user has set to required as well as the custom ones, we identify custom by the presence of the "type" property
-       -->
+   
 */
 </script>