diff --git a/ayanova/src/api/gzapi.js b/ayanova/src/api/gzapi.js
index d6869cd8..a4018d74 100644
--- a/ayanova/src/api/gzapi.js
+++ b/ayanova/src/api/gzapi.js
@@ -27,6 +27,7 @@ function devShowUnknownError(error) {
     console.log("gzapi::devShowUnknownError, error is:");
     // eslint-disable-next-line
     console.log(error);
+    debugger;
 
     window.$gz.eventBus.$emit(
       "notify-warning",
diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index 2e030f07..ac501e18 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -284,14 +284,12 @@ export default {
   props: {
     apiBaseUrl: {
       type: String,
-      default: "DataList/List"
+      default: "DataList"
     },
     formKey: String,
     dataListKey: String,
-    dataFilterId: {
-      type: Number,
-      default: 0
-    },
+    dataListSort: String,
+    dataListFilter: String,
     showSelect: {
       type: Boolean,
       default: false
@@ -377,34 +375,52 @@ export default {
 
       that.loading = true;
 
-      var listUrl =
-        that.apiBaseUrl + "?" + window.$gz.api.buildQuery(listOptions);
-      window.$gz.api.get(listUrl).then(res => {
-        //NOTE: This is how to call an async function and await it from sync code
-        (async function() {
-          //Save a copy of the server columns data for handling button clicks etc later
-          that.serverColumns = res.columns;
-          //Make sure the locale keys are fetched
-          await fetchLocalizedHeaderNames(res.columns); //Note can use await here because it's wrapped inside an async function call, it will wait then resume next stuff below
-          await fetchEnums(res.columns);
-          //build that.headers here
-          that.headers = buildHeaders(res.columns);
-          //Post process data here and then set that.records
-          that.records = buildRecords(res.data, res.columns);
-          that.loading = false;
-          that.totalRecords = res.totalRecordCount;
+      // var listUrl =
+      //   that.apiBaseUrl + "?" + window.$gz.api.buildQuery(listOptions);
 
-          //persist the paging options so user sees same page and list on refresh or leave and return scenario
+      // {
+      //   "offset": 0,
+      //   "limit": 0,
+      //   "mini": true,
+      //   "dataListKey": "string",
+      //   "filterJson": "string",
+      //   "sortJson": "string"
+      // }
 
-          window.$gz.form.setFormSettings(that.formKey, {
-            temp: { page: that.dataTablePagingOptions.page },
-            saved: {
-              itemsPerPage: that.dataTablePagingOptions.itemsPerPage
-            }
-          });
-          //////////
-        })();
-      });
+      window.$gz.api
+        .upsert(that.apiBaseUrl, {
+          offset: listOptions.Offset,
+          limit: listOptions.Limit,
+          dataListKey: that.dataListKey,
+          filterJson: that.dataListFilter,
+          sortJson: that.dataListSort
+        })
+        .then(res => {
+          //NOTE: This is how to call an async function and await it from sync code
+          (async function() {
+            //Save a copy of the server columns data for handling button clicks etc later
+            that.serverColumns = res.columns;
+            //Make sure the locale keys are fetched
+            await fetchLocalizedHeaderNames(res.columns); //Note can use await here because it's wrapped inside an async function call, it will wait then resume next stuff below
+            await fetchEnums(res.columns);
+            //build that.headers here
+            that.headers = buildHeaders(res.columns);
+            //Post process data here and then set that.records
+            that.records = buildRecords(res.data, res.columns);
+            that.loading = false;
+            that.totalRecords = res.totalRecordCount;
+
+            //persist the paging options so user sees same page and list on refresh or leave and return scenario
+
+            window.$gz.form.setFormSettings(that.formKey, {
+              temp: { page: that.dataTablePagingOptions.page },
+              saved: {
+                itemsPerPage: that.dataTablePagingOptions.itemsPerPage
+              }
+            });
+            //////////
+          })();
+        });
     }
   },
   created() {
diff --git a/ayanova/src/router.js b/ayanova/src/router.js
index 9a58a786..ebcfc24e 100644
--- a/ayanova/src/router.js
+++ b/ayanova/src/router.js
@@ -400,6 +400,12 @@ export default new Router({
       component: () =>
         import(/* webpackChunkName: "ay" */ "./views/ay-customize.vue")
     },
+    {
+      path: "/ay-sort-filter/:recordid/:dataListKey",
+      name: "ay-sort-filter",
+      component: () =>
+        import(/* webpackChunkName: "ay" */ "./views/ay-sort-filter.vue")
+    },
     {
       path: "/ay-attachments/:ayatype/:recordid",
       name: "ay-attachments",
diff --git a/ayanova/src/views/ay-sort-filter.vue b/ayanova/src/views/ay-sort-filter.vue
new file mode 100644
index 00000000..fea562c4
--- /dev/null
+++ b/ayanova/src/views/ay-sort-filter.vue
@@ -0,0 +1,383 @@
+<template>
+  <v-container>
+    <!-- <div>
+      READY: {{ formState.ready }}
+      <br />
+      LOADING: {{ formState.loading }}
+      <br />
+      DIRTY: {{ formState.dirty }}
+      <br />
+      VALID: {{ formState.valid }}
+      <br />
+      READONLY: {{ formState.readOnly }}
+      <br />
+    </div> -->
+    <!-- <div>
+      FAF
+      {{ obj }}
+    </div>
+    <v-divider></v-divider>
+    <div>
+      CUSTOM TEMPLATE
+      {{ tempTemplate }}
+    </div>
+    <v-divider></v-divider> -->
+    <v-row v-if="this.formState.ready">
+      <v-col>
+        <v-form ref="form">
+          <v-row>
+            <v-col cols="12" mt-1 mb-2>
+              <v-alert
+                ref="errorbox"
+                v-show="formState.errorBoxMessage"
+                color="error"
+                icon="fa-exclamation-circle "
+                transition="scale-transition"
+                class="multi-line"
+                outlined
+                >{{ formState.errorBoxMessage }}</v-alert
+              >
+            </v-col>
+
+        
+          </v-row>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+//NOTE: This is a simple form with no need for business rules or validation so stripped out any extraneous code related to all that
+//
+const FORM_KEY = "sortfilter";
+const API_BASE_URL = "DataListSortFilter/";
+export default {
+  beforeRouteEnter(to, from, next) {
+    var ltKeysRequired = [
+      "DataListSortFilter",
+      "FormFieldVisible",
+      "UiFieldDataType",
+      "UiFieldDataTypesCurrency",
+      "UiFieldDataTypesDateOnly",
+      "UiFieldDataTypesDateTime",
+      "UiFieldDataTypesNumber",
+      "UiFieldDataTypesText",
+      "UiFieldDataTypesTimeOnly",
+      "UiFieldDataTypesTrueFalse"
+    ];
+
+    window.$gz.locale.fetch(ltKeysRequired).then(next);
+  },
+  beforeCreate() {
+    var vm = this;
+
+    var vv = initForm(this);
+
+    vv.then(() => {
+      vm.formState.ready = true;
+    }).catch(err => {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err);
+    });
+  },
+  beforeRouteLeave(to, from, next) {
+    //var vm = this;
+    if (this.formState.dirty) {
+      window.$gz.dialog.confirmLeaveUnsaved().then(dialogResult => {
+        if (dialogResult == true) {
+          next();
+        } else {
+          next(false);
+        }
+      });
+    } else {
+      next();
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  created() {
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    //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
+    //init disable save button so it can be enabled only on edit to show dirty form
+    window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+  },
+  data() {
+    return {
+      obj: [],
+      concurrencyToken: undefined,
+      formCustomTemplateKey: this.$route.params.formCustomTemplateKey,
+      pickLists: {
+        uiFieldDataTypes: [
+          { name: this.lt("UiFieldDataTypesDateTime"), id: "1" },
+          { name: this.lt("UiFieldDataTypesDateOnly"), id: "2" },
+          { name: this.lt("UiFieldDataTypesTimeOnly"), id: "3" },
+          { name: this.lt("UiFieldDataTypesText"), id: "4" },
+          { name: this.lt("UiFieldDataTypesTrueFalse"), id: "6" },
+          { name: this.lt("UiFieldDataTypesInteger"), id: "5" },
+          { name: this.lt("UiFieldDataTypesDecimal"), id: "7" },
+          { name: this.lt("UiFieldDataTypesCurrency"), id: "8" }
+        ]
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.getRights(window.$gz.type.FormCustom)
+      //,tempTemplate: window.$gz.store.state.formCustomTemplate["widget"]
+    };
+  },
+
+  methods: {
+    lt: function(ltkey) {
+      return window.$gz.locale.get(ltkey);
+    },
+    visibleChanged: function(item) {
+      //Note: stock items can't be changed so no need to take that into account
+      if (item.required && item.visible == false) {
+        item.required = false;
+      }
+      this.formState.dirty = true;
+      enableSaveButton();
+    },
+    requiredChanged: function(item) {
+      //Note: stock items can't be changed so no need to take that into account
+      if (item.required && item.visible == false) {
+        item.visible = true;
+      }
+      this.formState.dirty = true;
+      enableSaveButton();
+    },
+    dataTypeChanged: function(item) {
+      //nothing to scan here just set form dirty
+      this.formState.dirty = true;
+      enableSaveButton();
+    },
+    submit() {
+      var vm = this;
+      var url = API_BASE_URL + this.formCustomTemplateKey;
+
+      //clear any errors vm might be around from previous submit
+      window.$gz.form.deleteAllErrorBoxErrors(this);
+
+      //Create template data object here....
+      //Note that server expects to see a string array of json template, not actual json
+      var newObj = {
+        formKey: this.formCustomTemplateKey,
+        concurrencyToken: this.concurrencyToken,
+        template: "[]"
+      };
+      //temporary array to hold template for later stringification
+      var temp = [];
+      //Rules:
+      for (var i = 0; i < this.obj.length; i++) {
+        var fldItem = this.obj[i];
+        if (fldItem.custom == false) {
+          //Process regular stock field
+          //If it's *not* set to stockRequired (i.e. built in field with biz rules that can't be hidden or changed)
+          // and it's also set to hidden or required then it's template-worthy
+          if (
+            !fldItem.stockRequired &&
+            (fldItem.visible == false || fldItem.required == true)
+          ) {
+            temp.push({
+              fld: fldItem.key,
+              required: fldItem.required,
+              hide: !fldItem.visible
+            });
+          }
+        } else {
+          //Process custom field
+          //If it's not visible then don't add it at all
+          if (fldItem.visible == true) {
+            temp.push({
+              fld: fldItem.key,
+              required: fldItem.required,
+              type: fldItem.type
+            });
+          }
+        }
+      }
+
+      //now set the template as a json string
+      newObj.template = JSON.stringify(temp);
+
+      window.$gz.api
+        .upsert(url, newObj)
+        .then(res => {
+          vm.formState.loading = false;
+          if (res.error != undefined) {
+            vm.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(vm);
+          } else {
+            //Handle "put" of an existing record (UPDATE) (there is no POST of a new record for this particular object)
+
+            //Set store values for template and token
+            window.$gz.formCustomTemplate.set(
+              vm.formCustomTemplateKey,
+              res.data.concurrencyToken,
+              newObj.template
+            );
+            //set our local concurrency token value
+            vm.concurrencyToken = res.data.concurrencyToken;
+
+            //form is now clean
+            window.$gz.form.setFormState({
+              vm: vm,
+              dirty: false
+            });
+          }
+        })
+        .catch(function handleSubmitError(error) {
+          vm.formState.loading = false;
+          window.$gz.errorHandler.handleFormError(error, vm);
+        });
+    }
+  }
+};
+
+function enableSaveButton() {
+  window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+}
+
+/////////////////////////////
+//
+//
+function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  var m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "save":
+        m.vm.submit();
+        break;
+
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  var menuOptions = {
+    isMain: false,
+    icon: "fa-sliders-h",
+    title: window.$gz.locale.get("DataListSortFilter"),
+    helpUrl: "form-ay-sort-filter",
+    formData: {
+      formKey: FORM_KEY,
+      ayaType: window.$gz.type.FormCustom,
+      formCustomTemplateKey: undefined
+    },
+    menuItems: []
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: window.$gz.locale.get("Save"),
+      icon: "save",
+      surface: true,
+      key: FORM_KEY + ":save",
+      vm: vm
+    });
+  }
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+function initForm(vm) {
+  return ensureTemplateIsInStore(vm).then(() => {
+    //Must use return here
+    return initDataObject(vm);
+  });
+}
+
+////////////////////
+//
+function ensureTemplateIsInStore(vm) {
+  return window.$gz.formCustomTemplate.get(
+    vm.$route.params.formCustomTemplateKey
+  );
+}
+
+////////////////////
+//
+function initDataObject(vm) {
+  //http://localhost:7575/api/v8/ObjectFields/ObjectFields/widget
+
+  var url =
+    "ObjectFields/ObjectFields/" + vm.$route.params.formCustomTemplateKey;
+  return window.$gz.api.get(url).then(res => {
+    if (res.error) {
+      throw res.error;
+    }
+
+    //set vm.obj to the combined synthesized snapshot array of template and availble fields for working data for this form
+    //	- {key, ltdisplay, hideable, custom, required, hide, type}
+    //Iterate ObjectFields
+    //create a new object based on the f.a.f. item and any existing template values for that item
+
+    for (var i = 0; i < res.data.length; i++) {
+      //get the formAvailableField record into an object to save typing
+      var faf = res.data[i];
+      //get the customTemplate record for this field if it exists
+
+      var templateItem = (templateItem = window.$gz.formCustomTemplate.getFieldTemplateValue(
+        vm.formCustomTemplateKey,
+        faf.key
+      ));
+
+      //handle non-existent template item (expected)
+      if (templateItem === undefined || templateItem === null) {
+        templateItem = {
+          required: false,
+          hide: faf.custom ? true : false, //hide if custom because it's not set to display if it's not present, all others are stock fields
+          type: "text"
+        };
+      }
+
+      // var canHide=faf.hideable && templateItem.required!==true;
+
+      var objItem = {
+        key: faf.key,
+        title: window.$gz.locale.get(faf.key),
+        stockRequired: !faf.hideable,
+        custom: faf.custom,
+        required: faf.hideable === false || templateItem.required === true,
+        visible: templateItem.hide !== true,
+        type: templateItem.type
+      };
+
+      vm.obj.push(objItem);
+      vm.concurrencyToken = window.$gz.formCustomTemplate.getTemplateConcurrencyToken(
+        vm.formCustomTemplateKey
+      );
+    }
+  });
+}
+
+/*
+  
+*/
+</script>