From 2d75c58be8c1a750f783d5bc111d1585917ce724 Mon Sep 17 00:00:00 2001
From: newmann <huxinsheng88@hotmail.com>
Date: Sun, 19 Nov 2023 15:07:06 +0800
Subject: [PATCH] added support for hot-key function

---
 .../screen/includes/WebrootVue.qvt.ftl        |   2 +-
 .../screen/includes/WebrootVue.vuet.ftl       |   4 +-
 .../webroot/screen/includes/navbar.html.ftl   |   2 +-
 .../webroot/screen/webroot/js/MoquiLib.js     | 121 ++++++++
 .../webroot/screen/webroot/js/WebrootVue.js   |  63 +++-
 .../screen/webroot/js/WebrootVue.qvt.js       |  96 +++++-
 .../screen-macro/DefaultScreenMacros.html.ftl | 273 ++++++++++++++----
 .../screen-macro/DefaultScreenMacros.qvt.ftl  | 253 ++++++++++++----
 .../screen-macro/DefaultScreenMacros.vuet.ftl | 223 +++++++++++---
 9 files changed, 849 insertions(+), 188 deletions(-)

diff --git a/base-component/webroot/screen/includes/WebrootVue.qvt.ftl b/base-component/webroot/screen/includes/WebrootVue.qvt.ftl
index 647eb0513..39a55d118 100644
--- a/base-component/webroot/screen/includes/WebrootVue.qvt.ftl
+++ b/base-component/webroot/screen/includes/WebrootVue.qvt.ftl
@@ -34,7 +34,7 @@ along with this software (see the LICENSE.md file). If not, see
     <#-- to build a layout use the handy Quasar tool: https://quasar.dev/layout-builder -->
     <q-layout view="hHh LpR fFf">
         <q-header reveal bordered class="${headerClass}" id="top"><q-toolbar style="font-size:15px;">
-            <q-btn dense flat icon="menu" @click="toggleLeftOpen()"></q-btn>
+            <q-btn dense flat icon="menu" @click="toggleLeftOpen()" moqui-key="`"></q-btn>
 
             <#assign headerLogoList = sri.getThemeValues("STRT_HEADER_LOGO")>
             <#if headerLogoList?has_content>
diff --git a/base-component/webroot/screen/includes/WebrootVue.vuet.ftl b/base-component/webroot/screen/includes/WebrootVue.vuet.ftl
index 6c9448b33..e61dcdbff 100644
--- a/base-component/webroot/screen/includes/WebrootVue.vuet.ftl
+++ b/base-component/webroot/screen/includes/WebrootVue.vuet.ftl
@@ -26,14 +26,14 @@ along with this software (see the LICENSE.md file). If not, see
     <div id="top"><nav class="navbar navbar-inverse navbar-fixed-top"><#--  navbar-fixed-top navbar-static-top --><div class="container-fluid">
         <#-- Brand and toggle get grouped for better mobile display -->
         <header class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" >
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
         <#assign headerLogoList = sri.getThemeValues("STRT_HEADER_LOGO")>
-        <#if headerLogoList?has_content><m-link href="/apps" class="navbar-brand"><img src="${sri.buildUrl(headerLogoList?first).getUrl()}" alt="Home"></m-link></#if>
+        <#if headerLogoList?has_content><m-link href="/apps" class="navbar-brand" moqui-key="`"><img src="${sri.buildUrl(headerLogoList?first).getUrl()}" alt="Home"></m-link></#if>
         <#assign headerTitleList = sri.getThemeValues("STRT_HEADER_TITLE")>
         <#if headerTitleList?has_content><div class="navbar-brand">${ec.resource.expand(headerTitleList?first, "")}</div></#if>
         </header>
diff --git a/base-component/webroot/screen/includes/navbar.html.ftl b/base-component/webroot/screen/includes/navbar.html.ftl
index 442f6ca27..37a70ff50 100644
--- a/base-component/webroot/screen/includes/navbar.html.ftl
+++ b/base-component/webroot/screen/includes/navbar.html.ftl
@@ -10,7 +10,7 @@
             <span class="icon-bar"></span>
         </button>
         <#assign headerLogoList = sri.getThemeValues("STRT_HEADER_LOGO")>
-        <#if headerLogoList?has_content><a href="${sri.buildUrl("/apps").getUrl()}" class="navbar-brand"><img src="${sri.buildUrl(headerLogoList?first).getUrl()}" alt="Home"></a></#if>
+        <#if headerLogoList?has_content><a href="${sri.buildUrl("/apps").getUrl()}" class="navbar-brand" moqui-key="`" ><img src="${sri.buildUrl(headerLogoList?first).getUrl()}" alt="Home"  ></a></#if>
         <#assign headerTitleList = sri.getThemeValues("STRT_HEADER_TITLE")>
         <#if headerTitleList?has_content><div class="navbar-brand">${ec.resource.expand(headerTitleList?first, "")}</div></#if>
     </header>
diff --git a/base-component/webroot/screen/webroot/js/MoquiLib.js b/base-component/webroot/screen/webroot/js/MoquiLib.js
index 9ea697027..ee30a7d36 100644
--- a/base-component/webroot/screen/webroot/js/MoquiLib.js
+++ b/base-component/webroot/screen/webroot/js/MoquiLib.js
@@ -598,3 +598,124 @@ if (window.Chart) {
     };
 }
 */
+window.addEventListener('keydown', function(event) {
+    let e = event || window.event;
+    if (e == null) return
+    let keyUpper
+    if (e.key !== undefined) {
+        keyUpper = e.key.toUpperCase();
+    } else if (e.which !== undefined) {
+        keyUpper = String.fromCharCode(e.which).toUpperCase();
+    }
+
+    let altDown = e.altKey;
+    let ctrlDown = e.ctrlKey;
+    let processed = false;
+
+   //alt key
+    if(altDown){
+        if((keyUpper>="A" && keyUpper <="Z") || (keyUpper>="0" && keyUpper<="9") ){
+            let focusList = $(`input[moqui-key="${keyUpper}"], textarea[moqui-key="${keyUpper}"], div[moqui-key="${keyUpper}"], select[moqui-key="${keyUpper}"]`)
+            if(focusList && focusList.length == 0) return
+
+            let totalCount = focusList.length
+            let focusIndex = 0
+            if(moqui.moquiTraceFocusInputElement){
+                if(totalCount > 1){
+                    for(i=0;i<totalCount;i++){
+                        if(focusList[i] == moqui.moquiTraceFocusInputElement){
+                            break
+                        }
+                    }
+                    if(i <= totalCount-2) {
+                        focusIndex = i+1
+                    }
+                }
+
+            }
+            moqui.moquiTraceFocusInputElement = focusList[focusIndex]
+            focusList[focusIndex].focus();
+
+            processed = true;
+
+        }
+    }
+    //ctrl key
+    if(ctrlDown){
+        //char "`" stand for open left menu
+        if((keyUpper>="A" && keyUpper <="Z") || (keyUpper>="0" && keyUpper<="9") || (keyUpper == "`") ){
+
+            let curEl = $(`button[moqui-key="${keyUpper}"], a[moqui-key="${keyUpper}"]`)
+            if(curEl && curEl.length == 0){
+                curEl = $(`span[moqui-key="${keyUpper}"]`) //m-container-dialog
+            }
+            if(curEl && curEl.length == 0 ) return;
+            //maybe many EL, but what is it for?
+            curEl[0].click();
+            processed = true;
+        }
+
+    }
+
+    //Enter key
+    if(keyUpper === "ENTER"){
+
+
+        let curInput = e.target;
+        if(curInput == null) return
+
+        if(e.target.tagName != "INPUT") {
+            console.log(`Current target tagName is ${e.target.tagName}, not INPUT `)
+            return
+        }
+
+        if(curInput.form == null) return
+        let inputList = curInput.form.querySelectorAll("input,textarea");
+
+        let availableInputList = [];
+        inputList.forEach(function(item){
+            let available = true;
+            if (item.readOnly) available = false;
+            if (item.disabled) available = false;
+            if (available){
+                //quasar's checkbox and radio are special
+                if ((item.className.indexOf("q-checkbox__native")!== -1) || (item.className.indexOf("q-radio__native") !== -1)){
+                    availableInputList.push(item.parentElement.parentElement)
+                }else{
+                     availableInputList.push(item);
+                }
+
+            }
+
+        })
+
+        //if only one INPUT, don't process
+        if (availableInputList.length<=1) return;
+
+
+        //Loop in the same form
+        let curIndex = 0;
+        for(let i =0; i< availableInputList.length; i++){
+            if(availableInputList[i] === curInput){
+                curIndex = i;
+                break;
+            }
+        }
+        if (curIndex == availableInputList.length - 1){
+            curIndex = -1;
+        }
+
+        availableInputList[curIndex+1].focus();
+        processed = true;
+
+    }
+
+    //prevent default
+    if(processed){
+        if (e.preventDefault){
+            e.preventDefault()
+        }else {
+            window.event.returnValue = false;
+        }
+    }
+  });
diff --git a/base-component/webroot/screen/webroot/js/WebrootVue.js b/base-component/webroot/screen/webroot/js/WebrootVue.js
index 42710614a..8de61cdfe 100644
--- a/base-component/webroot/screen/webroot/js/WebrootVue.js
+++ b/base-component/webroot/screen/webroot/js/WebrootVue.js
@@ -336,16 +336,30 @@ Vue.component('box-body', {
     data: function() { return this.height ? { dialogStyle:{'max-height':this.height+'px', 'overflow-y':'auto'}} : {dialogStyle:{}}},
     template: '<div class="panel-body" :style="dialogStyle"><slot></slot></div>'
 });
+
+//todo maybe no need moquiKey in container-dialog because moquiKey is processed in DefaultScreenMacros.vuet.FTL
 Vue.component('container-dialog', {
-    props: { id:{type:String,required:true}, title:String, width:{type:String,'default':'760'}, openDialog:{type:Boolean,'default':false} },
+    props: { id:{type:String,required:true}, title:String, width:{type:String,'default':'760'}, openDialog:{type:Boolean,'default':false}, moquiKey:String },
     data: function() {
         var viewportWidth = $(window).width();
         return { isHidden:true, dialogStyle:{width:(this.width < viewportWidth ? this.width : viewportWidth) + 'px'}}},
+    computed: {
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
+    },
     template:
     '<div :id="id" class="modal dynamic-dialog" aria-hidden="true" style="display:none;" tabindex="-1">' +
         '<div class="modal-dialog" :style="dialogStyle"><div class="modal-content">' +
-            '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-                '<h4 class="modal-title">{{title}}</h4></div>' +
+            '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" :moqui-key="upperCaseMoquiKey">&times;</button>' +
+                '<h4 class="modal-title">' +
+                '{{title}}' +
+                '<span v-if ="moquiKey"> ( <span style="text-decoration:underline">{{upperCaseMoquiKey}}</span> )</span> '+
+                '</h4></div>' +
             '<div class="modal-body"><slot></slot></div>' +
         '</div></div>' +
     '</div>',
@@ -845,14 +859,14 @@ Vue.component('form-list', {
 /* ========== form field widget components ========== */
 Vue.component('date-time', {
     props: { id:String, name:{type:String,required:true}, value:String, type:{type:String,'default':'date-time'},
-        size:String, format:String, tooltip:String, form:String, required:String, autoYear:String, minuteStep:{type:Number,'default':5} },
+        size:String, format:String, tooltip:String, form:String, required:String, autoYear:String, minuteStep:{type:Number,'default':5}, moquiKey:String },
     template:
     '<div v-if="type==\'time\'" class="input-group time" :id="id">' +
-        '<input type="text" class="form-control" :pattern="timePattern" :id="id?(id+\'_itime\'):\'\'" :name="name" :value="value" :size="sizeVal" :form="form">' +
+        '<input type="text" class="form-control" :pattern="timePattern" :id="id?(id+\'_itime\'):\'\'" :name="name" :value="value" :size="sizeVal" :form="form" :moqui-key="upperCaseMoquiKey">' +
         '<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>' +
     '</div>' +
     '<div v-else class="input-group date" :id="id">' +
-        '<input ref="dateInput" @focus="focusDate" @blur="blurDate" type="text" class="form-control" :id="id?(id+\'_idate\'):\'\'" :name="name" :value="value" :size="sizeVal" :form="form" :required="required == \'required\' ? true : false">' +
+        '<input ref="dateInput" @focus="focusDate" @blur="blurDate" type="text" class="form-control" :id="id?(id+\'_idate\'):\'\'" :name="name" :value="value" :size="sizeVal" :form="form" :required="required == \'required\' ? true : false" :moqui-key="upperCaseMoquiKey">' +
         '<span class="input-group-addon"><span class="fa fa-calendar"></span></span>' +
     '</div>',
     methods: {
@@ -883,7 +897,14 @@ Vue.component('date-time', {
             (this.type === 'date' ? ['l', 'L', 'YYYY-MM-DD'] : ['YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'MM/DD/YYYY HH:mm']); },
         sizeVal: function() { var size = this.size; if (size && size.length > 0) { return size; }
             return this.type === 'time' ? '9' : (this.type === 'date' ? '10' : '16'); },
-        timePattern: function() { return '^(?:(?:([01]?\\d|2[0-3]):)?([0-5]?\\d):)?([0-5]?\\d)$'; }
+        timePattern: function() { return '^(?:(?:([01]?\\d|2[0-3]):)?([0-5]?\\d):)?([0-5]?\\d)$'; },
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
     },
     mounted: function() {
         var vm = this;
@@ -950,9 +971,9 @@ Vue.component('drop-down', {
     props: { options:Array, value:[Array,String], combo:Boolean, allowEmpty:Boolean, multiple:String, submitOnSelect:Boolean, optionsUrl:String,
         serverSearch:{type:Boolean,'default':false}, serverDelay:{type:Number,'default':300}, serverMinLength:{type:Number,'default':1},
         optionsParameters:Object, labelField:String, valueField:String, dependsOn:Object, dependsOptional:Boolean,
-        optionsLoadInit:Boolean, form:String, tooltip:String },
+        optionsLoadInit:Boolean, form:String, tooltip:String, moquiKey:String },
     data: function() { return { curData:null, s2Opts:null, lastVal:null } },
-    template: '<select :form="form" :data-title="tooltip"><slot></slot></select>',
+    template: '<select :form="form" :data-title="tooltip" :moqui-key="upperCaseMoquiKey" ><slot></slot></select>',
     methods: {
         processOptionList: function(list, page, term) {
             var newData = [];
@@ -1056,7 +1077,16 @@ Vue.component('drop-down', {
         }
     },
     computed: { curVal: { get: function() { return $(this.$el).select2().val(); },
-        set: function(value) { $(this.$el).val(value).trigger('change'); /* console.log('set ' + $(this.$el).attr('name') + ' to ' + this.curVal); */ } } },
+        set: function(value) { $(this.$el).val(value).trigger('change'); /* console.log('set ' + $(this.$el).attr('name') + ' to ' + this.curVal); */ } },
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
+
+        },
     watch: {
         value: function(value) { this.curVal = value; },
         options: function(options) { this.curData = options; },
@@ -1090,18 +1120,25 @@ Vue.component('text-autocomplete', {
         type:String, size:String, maxlength:String, disabled:Boolean, validationClasses:String, dataVvValidation:String,
         required:Boolean, pattern:String, tooltip:String, form:String, delay:{type:Number,'default':300},
         url:{type:String,required:true}, dependsOn:Object, acParameters:Object, minLength:{type:Number,'default':1},
-        showValue:Boolean, useActual:Boolean, skipInitial:Boolean },
+        showValue:Boolean, useActual:Boolean, skipInitial:Boolean, moquiKey:String },
     data: function () { return { delayTimeout:null } },
     template:
     '<span><input ref="acinput" :id="acId" :name="acName" :type="type" :value="valueText" :size="size" :maxlength="maxlength" :disabled="disabled"' +
         ' :class="allClasses" :data-vv-validation="validationClasses" :required="required" :pattern="pattern"' +
-        ' :data-toggle="tooltipToggle" :title="tooltip" autocomplete="off" :form="form">' +
+        ' :data-toggle="tooltipToggle" :title="tooltip" autocomplete="off" :form="form" :moqui-key="upperCaseMoquiKey" >' +
         '<input ref="hidden" :id="id" type="hidden" :name="name" :value="value" :form="form">' +
         '<span ref="show" v-if="showValue" :id="showId" class="form-autocomplete-value">{{valueText}}</span>' +
     '</span>',
     computed: { acId: function() { return this.id + '_ac'; }, acName: function() { return this.name + '_ac'; },
         allClasses: function() { return 'form-control typeahead' + (this.validationClasses ? ' ' + this.validationClasses : ''); },
-        showId: function() { return this.id + '_show'; }, tooltipToggle: function() { return this.tooltip && this.tooltip.length > 0 ? 'tooltip' : null; }
+        showId: function() { return this.id + '_show'; }, tooltipToggle: function() { return this.tooltip && this.tooltip.length > 0 ? 'tooltip' : null; },
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
     },
     methods: { fetchResults: function(query, syncResults, asyncResults) {
         if (this.delayTimeout) { clearTimeout(this.delayTimeout); }
diff --git a/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js b/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js
index 1cac885e1..480343aa1 100644
--- a/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js
+++ b/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js
@@ -445,11 +445,25 @@ Vue.component('m-dialog', {
 Vue.component('m-container-dialog', {
     name: "mContainerDialog",
     props: { id:String, color:String, buttonText:String, buttonClass:String, title:String, width:{type:String},
-        openDialog:{type:Boolean,'default':false}, buttonIcon:{type:String,'default':'open_in_new'} },
+        openDialog:{type:Boolean,'default':false}, buttonIcon:{type:String,'default':'open_in_new'}, moquiKey:String },
     data: function() { return { isShown:false }},
+    computed: {
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
+    },
     template:
     '<span>' +
-        '<span @click="show()"><slot name="button"><q-btn dense outline no-caps :icon="buttonIcon" :label="buttonText" :color="color" :class="buttonClass"></q-btn></slot></span>' +
+        '<span @click="show()"  :moqui-key="upperCaseMoquiKey"><slot name="button"> '+
+            '<q-btn dense outline no-caps :icon="buttonIcon"  :color="color" :class="buttonClass"> '+
+                '{{buttonText}} '+
+                '<span v-if ="moquiKey"> ( <span style="text-decoration:underline">{{upperCaseMoquiKey}}</span> )</span> '+
+            '</q-btn>' +
+        '</slot></span>' +
         '<m-dialog v-model="isShown" :id="id" :title="title" :color="color" :width="width"><slot></slot></m-dialog>' +
     '</span>',
     methods: { show: function() { this.isShown = true; }, hide: function() { this.isShown = false; } },
@@ -471,11 +485,23 @@ Vue.component('m-dynamic-container', {
 Vue.component('m-dynamic-dialog', {
     name: "mDynamicDialog",
     props: { id:{type:String}, url:{type:String,required:true}, color:String, buttonText:String, buttonClass:String, title:String, width:{type:String},
-        openDialog:{type:Boolean,'default':false}, dynamicParams:{type:Object,'default':null} },
+        openDialog:{type:Boolean,'default':false}, dynamicParams:{type:Object,'default':null}, moquiKey:String },
     data: function() { return { curComponent:moqui.EmptyComponent, curUrl:"", isShown:false} },
+    computed: {
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
+    },
     template:
     '<span>' +
-        '<q-btn dense outline no-caps icon="open_in_new" :label="buttonText" :color="color" :class="buttonClass" @click="isShown = true"></q-btn>' +
+        '<q-btn dense outline no-caps icon="open_in_new" :color="color" :class="buttonClass" @click="isShown = true" :moqui-key="upperCaseMoquiKey" > '+
+                '{{buttonText}} '+
+                '<span v-if ="moquiKey"> ( <span style="text-decoration:underline">{{upperCaseMoquiKey}}</span> )</span> '+
+        '</q-btn>' +
         '<m-dialog ref="dialog" v-model="isShown" :id="id" :title="title" :color="color" :width="width"><component :is="curComponent"></component></m-dialog>' +
     '</span>',
     methods: {
@@ -1241,12 +1267,18 @@ Vue.component('m-date-time', {
     name: "mDateTime",
     props: { id:String, name:{type:String,required:true}, value:String, type:{type:String,'default':'date-time'}, label:String,
         size:String, format:String, tooltip:String, form:String, required:String, rules:Array, disable:Boolean, autoYear:String,
-        minuteStep:{type:Number,'default':5} },
+        minuteStep:{type:Number,'default':5}, moquiKey:String  },
     template:
     // NOTE: tried :fill-mask="formatVal" but results in all Y, only supports single character for mask placeholder... how to show more helpful date mask?
     // TODO: add back @focus="focusDate" @blur="blurDate" IFF needed given different mask/etc behavior
-    '<q-input dense outlined stack-label :label="label" v-bind:value="value" v-on:input="$emit(\'input\', $event)" :rules="rules"' +
-            ' :mask="inputMask" fill-mask :id="id" :name="name" :form="form" :disable="disable" :size="sizeVal" style="max-width:max-content;">' +
+    '<q-input dense outlined stack-label label-slot v-bind:value="value" v-on:input="$emit(\'input\', $event)" :rules="rules"' +
+            ' :mask="inputMask" fill-mask :id="id" :name="name" :form="form" :disable="disable" :size="sizeVal" style="max-width:max-content;" :moqui-key="upperCaseMoquiKey">' +
+        '<template v-slot:label> '+
+            '<div > {{label}} '+
+            '<span v-if ="moquiKey"> ( <span style="text-decoration:underline">{{upperCaseMoquiKey}}</span> )</span> '+
+            '<em class="text-red" v-if ="required"> * </em>' +
+            '</div> ' +
+        '</template>' +
         '<template v-slot:prepend v-if="type==\'date\' || type==\'date-time\' || !type">' +
             '<q-icon name="event" class="cursor-pointer">' +
                 '<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">' +
@@ -1294,7 +1326,14 @@ Vue.component('m-date-time', {
             (this.type === 'date' ? ['l', 'L', 'YYYY-MM-DD'] : ['YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'MM/DD/YYYY HH:mm']); },
         sizeVal: function() { var size = this.size; if (size && size.length) { return size; }
             return this.type === 'time' ? '9' : (this.type === 'date' ? '10' : '16'); },
-        timePattern: function() { return '^(?:(?:([01]?\\d|2[0-3]):)?([0-5]?\\d):)?([0-5]?\\d)$'; }
+        timePattern: function() { return '^(?:(?:([01]?\\d|2[0-3]):)?([0-5]?\\d):)?([0-5]?\\d)$'; },
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
     },
     mounted: function() {
         var vm = this;
@@ -1499,8 +1538,17 @@ Vue.component('m-drop-down', {
         serverSearch:Boolean, serverDelay:{type:Number,'default':300}, serverMinLength:{type:Number,'default':1},
         labelField:{type:String,'default':'label'}, valueField:{type:String,'default':'value'},
         dependsOn:Object, dependsOptional:Boolean, form:String, fields:{type:Object},
-        tooltip:String, label:String, name:String, id:String, disable:Boolean, onSelectGoTo:String },
+        tooltip:String, label:String, name:String, id:String, disable:Boolean, onSelectGoTo:String, required:Boolean, moquiKey:String },
     data: function() { return { curOptions:this.options, allOptions:this.options, lastVal:null, lastSearch:null, loading:false } },
+    computed: {
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
+    },
     template:
         // was: ':fill-input="!multiple" hide-selected' changed to ':hide-selected="multiple"' to show selected to the left of input,
         //     fixes issues with fill-input where set values would sometimes not be displayed
@@ -1509,7 +1557,7 @@ Vue.component('m-drop-down', {
                 ' input-debounce="500" @filter="filterFn" :clearable="allowEmpty||multiple" :disable="disable"' +
                 ' :multiple="multiple" :emit-value="!onSelectGoTo" map-options behavior="menu"' +
                 ' :rules="[val => allowEmpty||multiple||val===\'\'||(val&&val.length)||\'Please select an option\']"' +
-                ' stack-label :label="label" :loading="loading" :options="curOptions">' +
+                ' stack-label label-slot :loading="loading" :options="curOptions" :moqui-key="upperCaseMoquiKey" >' +
             '<q-tooltip v-if="tooltip">{{tooltip}}</q-tooltip>' +
             '<template v-slot:no-option><q-item><q-item-section class="text-grey">No results</q-item-section></q-item></template>' +
             '<template v-if="multiple" v-slot:prepend><div>' +
@@ -1519,6 +1567,12 @@ Vue.component('m-drop-down', {
             '<template v-slot:after>' +
                 '<slot name="after"></slot>' +
             '</template>' +
+            '<template v-slot:label> '+
+                '<div> {{label}} '+
+                    '<span v-if ="moquiKey"> ( <span style="text-decoration:underline">{{upperCaseMoquiKey}}</span> )</span> '+
+                    '<em class="text-red" v-if ="required"> * </em>' +
+                '</div> ' +
+            '</template>' +
         '</q-select>',
         // TODO: how to add before slot pass through without the small left margin when nothing in the slot? <template v-slot:before><slot name="before"></slot></template>
     methods: {
@@ -1783,13 +1837,29 @@ Vue.component('m-text-line', {
     name: "mTextLine",
     props: { value:String, type:{type:String,'default':'text'}, id:String, name:String, size:String, fields:{type:Object},
         label:String, tooltip:String, prefix:String, disable:Boolean, mask:String, fillMask:String, reverseFillMask:Boolean, rules:Array,
-        defaultUrl:String, defaultParameters:Object, dependsOn:Object, dependsOptional:Boolean, defaultLoadInit:Boolean },
+        defaultUrl:String, defaultParameters:Object, dependsOn:Object, dependsOptional:Boolean, defaultLoadInit:Boolean,
+         required:Boolean, moquiKey:String },
     data: function() { return { loading:false } },
+    computed: {
+        upperCaseMoquiKey: function(){
+            if(this.moquiKey){
+                return this.moquiKey.toUpperCase();
+            }else{
+                return null;
+            }
+        }
+    },
     template:
-        '<q-input dense outlined stack-label :label="label" :prefix="prefix" v-bind:value="value" v-on:input="$emit(\'input\', $event)" :type="type"' +
+        '<q-input dense outlined stack-label label-slot :prefix="prefix" v-bind:value="value" v-on:input="$emit(\'input\', $event)" :type="type"' +
                 ' :id="id" :name="name" :size="size" :loading="loading" :rules="rules" :disable="disable"' +
                 ' :mask="mask" :fill-mask="fillMask" :reverse-fill-mask="reverseFillMask"' +
-                ' autocapitalize="off" autocomplete="off">' +
+                ' autocapitalize="off" autocomplete="off" :moqui-key="upperCaseMoquiKey" >' +
+                '<template v-slot:label> '+
+                '<div > {{label}} '+
+                '<span v-if ="moquiKey"> ( <span style="text-decoration:underline">{{upperCaseMoquiKey}}</span> )</span> '+
+                '<em class="text-red" v-if ="required"> * </em>' +
+                '</div> ' +
+                '</template>' +
             '<q-tooltip v-if="tooltip">{{tooltip}}</q-tooltip>' +
         '</q-input>',
     methods: {
diff --git a/template/screen-macro/DefaultScreenMacros.html.ftl b/template/screen-macro/DefaultScreenMacros.html.ftl
index 37c86281e..b21123366 100644
--- a/template/screen-macro/DefaultScreenMacros.html.ftl
+++ b/template/screen-macro/DefaultScreenMacros.html.ftl
@@ -28,7 +28,10 @@ along with this software (see the LICENSE.md file). If not, see
     <#recurse>
     <#if sri.doBoundaryComments()><!-- END   screen[@location=${sri.getActiveScreenDef().location}].fail-widgets --></#if>
 </#macro>
-
+<#macro getMoquiKey curNode>
+    <#assign moquiKey = curNode["@moqui-key"]! >
+    <#if moquiKey?has_content> <#assign moquiKey=moquiKey?substring(0,1)?upper_case > </#if>
+</#macro>
 <#-- ================ Subscreens ================ -->
 <#macro "subscreens-menu"><#if hideNav! != "true">
     <#assign displayMenu = sri.activeInCurrentMenu!>
@@ -271,7 +274,15 @@ ${sri.renderSectionInclude(.node)}
     <#if conditionResult>
         <#assign buttonText = ec.getResource().expand(.node["@button-text"], "")>
         <#assign cdDivId><@nodeId .node/></#assign>
-        <button id="${cdDivId}-button" type="button" data-toggle="modal" data-target="#${cdDivId}" data-original-title="${buttonText}" data-placement="bottom" class="btn btn-${ec.getResource().expandNoL10n(.node["@type"]!"primary", "")} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"><i class="${iconClass}"></i> ${buttonText}</button>
+        <@getMoquiKey .node/>
+        <button id="${cdDivId}-button" type="button" data-toggle="modal" data-target="#${cdDivId}" data-original-title="${buttonText}" data-placement="bottom"
+            <#t> class="btn btn-${ec.getResource().expandNoL10n(.node["@type"]!"primary", "")} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"
+            <#t><#if moquiKey?has_content> moqui-key = ${moquiKey} </#if>
+        >
+            <#t><i class="${iconClass}"></i>
+            <#t>${buttonText}
+            <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+        </button>
         <#if _openDialog! == cdDivId><#assign afterScreenScript>$('#${cdDivId}').modal('show'); </#assign><#t>${sri.appendToScriptWriter(afterScreenScript)}</#if>
         <div id="${cdDivId}" class="modal container-dialog" aria-hidden="true" style="display: none;" tabindex="-1">
             <div class="modal-dialog" style="width: ${.node["@width"]!"760"}px;">
@@ -309,12 +320,19 @@ ${sri.renderSectionInclude(.node)}
     <#assign iconClass = "fa fa-share">
     <#if .node["@icon"]?has_content><#assign iconClass = .node["@icon"]></#if>
     <#if .node["@condition"]?has_content><#assign conditionResult = ec.getResource().condition(.node["@condition"], "")><#else><#assign conditionResult = true></#if>
+    <#assign ddDivId><@nodeId .node/></#assign>
+    <@getMoquiKey .node/>
     <#if conditionResult>
         <#assign buttonText = ec.getResource().expand(.node["@button-text"], "")>
         <#assign urlInstance = sri.makeUrlByType(.node["@transition"], "transition", .node, "true")>
         <#assign ddDivId><@nodeId .node/></#assign>
 
-        <button id="${ddDivId}-button" type="button" data-toggle="modal" data-target="#${ddDivId}" data-original-title="${buttonText}" data-placement="bottom" class="btn btn-${.node["@type"]!"primary"} btn-sm"><i class="${iconClass}"></i> ${buttonText}</button>
+        <button id="${ddDivId}-button" type="button" data-toggle="modal" data-target="#${ddDivId}" data-original-title="${buttonText}" data-placement="bottom" class="btn btn-${.node["@type"]!"primary"} btn-sm"
+            <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+        >
+            <i class="${iconClass}"></i> ${buttonText}
+            <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+        </button>
         <#assign afterFormText>
         <div id="${ddDivId}" class="modal dynamic-dialog" aria-hidden="true" style="display: none;" tabindex="-1">
             <div class="modal-dialog" style="width: ${.node["@width"]!"760"}px;">
@@ -414,6 +432,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#if !iconClass?has_content && linkNode["@text"]?has_content><#assign iconClass = sri.getThemeIconClass(linkNode["@text"])!></#if>
     <#assign iconClass = ec.getResource().expandNoL10n(iconClass!, "")/>
     <#assign badgeMessage = ec.getResource().expand(linkNode["@badge"]!, "")/>
+    <@getMoquiKey linkNode/>
     <#if urlInstance.disableLink>
         <a href="#"<#if linkFormId?has_content> id="${linkFormId}"</#if> class="disabled text-muted <#if linkNode["@link-type"]! != "anchor" && linkNode["@link-type"]! != "hidden-form-link">btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>"><#if iconClass?has_content><i class="${iconClass}"></i></#if><#if linkNode["image"]?has_content><#visit linkNode["image"][0]><#else>${linkText}</#if></a>
     <#else>
@@ -428,21 +447,38 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                 <#if linkNode["@url-noparam"]! == "true"><#assign urlText = urlInstance.url/>
                     <#else><#assign urlText = urlInstance.urlWithParams/></#if>
             </#if>
-            <#rt><a href="${urlText}"<#if linkFormId?has_content> id="${linkFormId}"</#if><#if linkNode["@target-window"]?has_content> target="${linkNode["@target-window"]}"</#if><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if> class="<#if linkNode["@link-type"]! != "anchor">btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if><#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"<#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
-            <#t><#if linkNode["image"]?has_content><#visit linkNode["image"][0]><#else>${linkText}</#if>
-            <#t><#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
+            <#rt><a href="${urlText}"<#if linkFormId?has_content> id="${linkFormId}"</#if>
+                <#t><#if linkNode["@target-window"]?has_content> target="${linkNode["@target-window"]}"</#if>
+                <#t> <#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
+                <#t> class="<#if linkNode["@link-type"]! != "anchor">btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if><#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
+                <#t> <#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>
+                <#t> <#if moquiKey?has_content> moqui-key="${moquiKey}" </#if>
+            <#t>>
+                <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
+                <#t><#if linkNode["image"]?has_content>
+                    <#t><#visit linkNode["image"][0]>
+                <#t><#else>
+                    <#t>${linkText}
+                    <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                <#t></#if>
+                <#t><#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
             <#t></a>
         <#else>
             <#if linkFormId?has_content>
+
+
             <#rt><button type="submit" form="${linkFormId}" id="${linkFormId}_button" class="btn btn-${linkNode["@btn-type"]!"primary"} btn-sm<#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
                     <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
-                    <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>>
-                <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
-                <#if linkNode["image"]?has_content>
-                    <#t><img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"<#if imageNode["@alt"]?has_content> alt="${imageNode["@alt"]}"</#if>/>
-                <#else>
-                    <#t>${linkText}
-                </#if>
+                    <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>
+                    <#t><#if moquiKey?has_content> moqui-key = ${moquiKey} </#if>
+                >
+                    <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
+                    <#if linkNode["image"]?has_content>
+                        <#t><img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"<#if imageNode["@alt"]?has_content> alt="${imageNode["@alt"]}"</#if>/>
+                    <#else>
+                        <#t>${linkText}
+                        <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                    </#if>
             <#t><#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
             <#t></button>
             </#if>
@@ -473,10 +509,19 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                         <#assign iconClass = linkNode["@icon"]!>
                         <#if !iconClass?has_content && linkNode["@text"]?has_content><#assign iconClass = sri.getThemeIconClass(linkNode["@text"])!></#if>
                         <#assign badgeMessage = ec.getResource().expand(linkNode["@badge"]!, "")/>
+                        <@getMoquiKey linkNode?parent/>
+
+
                         <#rt><button type="submit" class="<#if linkNode["@link-type"]! == "hidden-form-link">button-plain<#else>btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>"
-                            <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
-                            <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>>
-                            <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>${linkText}<#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if></button>
+                                    <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
+                                    <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>
+                                    <#t><#if moquiKey?has_content> moqui-key = ${moquiKey} </#if>
+                            >
+                                <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
+                                <#t>${linkText}
+                                <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                                <#t><#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
+                            </button>
                     </#if>
                 </#if>
             </form>
@@ -546,6 +591,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
         <#else><#assign linkText = ec.getResource().expand(.node["@text"]!"", "")></#if>
 
     <#if linkText == "null"><#assign linkText = ""></#if>
+    <@getMoquiKey .node/>
     <#if linkText?has_content || .node["image"]?has_content || .node["@icon"]?has_content>
         <#if .node["@encode"]! != "false"><#assign linkText = linkText?html></#if>
         <#assign iconClass = .node["@icon"]!>
@@ -554,9 +600,17 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
 
         <#-- TODO: tooltip, doesn't work when using data-toggle for dropdown! <#if .node["@tooltip"]?has_content>${ec.getResource().expand(.node["@tooltip"], "")}</#if> -->
         <div class="btn-group">
-            <button type="button" class="btn btn-${.node["@btn-type"]!"primary"} dropdown-toggle<#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="btn btn-${.node["@btn-type"]!"primary"} dropdown-toggle<#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>"
+                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+            >
                 <#if iconClass?has_content><i class="${iconClass}"></i></#if>
-                <#if .node["image"]?has_content><#visit .node["image"][0]><#else>${linkText}</#if>
+                <#if .node["image"]?has_content>
+                    <#visit .node["image"][0]>
+                <#else>
+                    ${linkText}
+                    <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                </#if>
                 <#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
                 <span class="caret"></span>
             </button>
@@ -758,11 +812,20 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#if fieldSubNode["hidden"]?has_content><#recurse fieldSubNode/><#return></#if>
     <#assign containerStyle = ec.getResource().expandNoL10n(fieldSubNode["@container-style"]!, "")>
     <#assign curFieldTitle><@fieldTitle fieldSubNode/></#assign>
+
+    <#assign validationClasses = formInstance.getFieldValidationClasses(fieldSubNode)>
+    <@getMoquiKey fieldSubNode />
+
     <#if bigRow>
         <div class="big-row-item">
             <div class="form-group">
                 <#if curFieldTitle?has_content && !fieldSubNode["submit"]?has_content>
-                    <label class="control-label" for="${formId}_${fieldSubParent["@name"]}">${curFieldTitle}</label><#-- was form-title -->
+                    <label class="control-label" for="${formId}_${fieldSubParent["@name"]}">
+                        ${curFieldTitle}
+                        <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                        <#t><#if validationClasses?contains("required")> <em style="color:red"> * </em></#if>
+
+                    </label><#-- was form-title -->
                 </#if>
     <#else>
         <#if labelCols?has_content>
@@ -778,7 +841,11 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
             <div class="${widgetClass}<#if containerStyle?has_content> ${containerStyle}</#if>">
         <#elseif curFieldTitle?has_content>
         <div class="form-group">
-            <label class="control-label ${labelClass}" for="${formId}_${fieldSubParent["@name"]}">${curFieldTitle}</label><#-- was form-title -->
+            <label class="control-label ${labelClass}" for="${formId}_${fieldSubParent["@name"]}">
+                ${curFieldTitle}
+                <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                <#t><#if validationClasses?contains("required")> <em style="color:red"> * </em></#if>
+            </label><#-- was form-title -->
             <div class="${widgetClass}<#if containerStyle?has_content> ${containerStyle}</#if>">
         </#if>
     </#if>
@@ -1762,11 +1829,21 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#assign id><@fieldId .node/></#assign>
     <#assign curName><@fieldName .node/></#assign>
     <#assign containerStyle = ec.getResource().expandNoL10n(.node["@container-style"]!, "")>
+    <@getMoquiKey .node?parent/>
+
     <#list (options.keySet())! as key>
         <#assign allChecked = ec.getResource().expandNoL10n(.node["@all-checked"]!, "")>
         <#assign fullId = id>
         <#if (key_index > 0)><#assign fullId = id + "_" + key_index></#if>
-        <span id="${fullId}"<#if containerStyle?has_content> class="${containerStyle}"</#if>><input type="checkbox" name="${curName}" value="${key?html}"<#if allChecked! == "true"> checked="checked"<#elseif currentValue?has_content && (currentValue==key || currentValue.contains(key))> checked="checked"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>><#if options.get(key)! != ""><span class="checkbox-label" onclick="$('#${fullId}').children('input[type=checkbox]').click()" style="cursor: default">${options.get(key)}</span></#if></span>
+        <span id="${fullId}"<#if containerStyle?has_content> class="${containerStyle}"</#if>>
+            <input type="checkbox" name="${curName}" value="${key?html}"
+                <#t><#if allChecked! == "true"> checked="checked"<#elseif currentValue?has_content && (currentValue==key || currentValue.contains(key))> checked="checked"</#if>
+                <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+                <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+                <#t><#if moquiKey?has_content> moqui-key = "${moquiKey}"</#if>
+            >
+            <#if options.get(key)! != ""><span class="checkbox-label" onclick="$('#${fullId}').children('input[type=checkbox]').click()" style="cursor: default">${options.get(key)}</span></#if>
+        </span>
     </#list>
 </#macro>
 
@@ -1906,10 +1983,15 @@ a => A, d => D, y => Y
         <#else><#assign size=16><#assign maxlength=23><#assign extraFormatsVal = "['YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'MM/DD/YYYY HH:mm']"></#if>
     <#assign size = .node["@size"]!size>
     <#assign maxlength = .node["@max-length"]!maxlength>
+    <@getMoquiKey dtSubFieldNode/>
 
     <#if .node["@type"]! != "time">
         <div class="input-group date" id="${id}">
-            <input type="text" class="form-control<#if validationClasses?contains("required")> required</#if>"<#if validationClasses?contains("required")> required="required"</#if> name="<@fieldName .node/>" value="${fieldValue?html}" size="${size}" maxlength="${maxlength}"<#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>
+            <input type="text" class="form-control<#if validationClasses?contains("required")> required</#if>"<#if validationClasses?contains("required")> required="required"</#if> name="<@fieldName .node/>" value="${fieldValue?html}" size="${size}" maxlength="${maxlength}"
+                <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+                <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+                <#t><#if moquiKey?has_content> moqui-key = "${moquiKey}"</#if>
+            >
             <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
         </div>
         <script>
@@ -1921,7 +2003,11 @@ a => A, d => D, y => Y
         </script>
     <#else>
         <#-- datetimepicker does not support time only, even with plain HH:mm format; use a regex to validate time format -->
-        <input type="text" class="form-control" pattern="^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$" name="<@fieldName .node/>" value="${fieldValue?html}" size="${size}" maxlength="${maxlength}"<#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>
+        <input type="text" class="form-control" pattern="^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$" name="<@fieldName .node/>" value="${fieldValue?html}" size="${size}" maxlength="${maxlength}"
+            <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+            <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+            <#t><#if moquiKey?has_content> moqui-key = "${moquiKey}"</#if>
+        >
     </#if>
 </#macro>
 
@@ -2033,30 +2119,41 @@ a => A, d => D, y => Y
     <#assign validationClasses = formInstance.getFieldValidationClasses(ddSubFieldNode)>
     <#assign optionsHasCurrent = currentDescription?has_content>
     <#if !optionsHasCurrent && .node["@current-description"]?has_content>
-        <#assign currentDescription = ec.getResource().expand(.node["@current-description"], "")></#if>
-    <select name="${name}" class="<#if isDynamicOptions> dynamic-options</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if><#if validationClasses?has_content> ${validationClasses}</#if><#if isServerSearch || allowMultiple> noResetSelect2</#if>"<#if isServerSearch> style="min-width:200px;"</#if> id="${id}"<#if allowMultiple> multiple="multiple"</#if><#if .node["@size"]?has_content> size="${.node["@size"]}"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>
-    <#if !allowMultiple>
-        <#-- don't add first-in-list or empty option if allowMultiple (can deselect all to be empty, including empty option allows selection of empty which isn't the point) -->
-        <#if currentValue?has_content>
-            <#if .node["@current"]! == "first-in-list">
-                <option selected="selected" value="${currentValue}"><#if currentDescription?has_content>${currentDescription}<#else>${currentValue}</#if></option><#rt/>
-                <option value="${currentValue}">---</option><#rt/>
-            <#elseif !optionsHasCurrent>
-                <option selected="selected" value="${currentValue}"><#if currentDescription?has_content>${currentDescription}<#else>${currentValue}</#if></option><#rt/>
+        <#assign currentDescription = ec.getResource().expand(.node["@current-description"], "")>
+    </#if>
+    <@getMoquiKey ddSubFieldNode/>
+
+    <select name="${name}" class="<#if isDynamicOptions> dynamic-options</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>
+        <#t><#if validationClasses?has_content> ${validationClasses}</#if>
+        <#t><#if isServerSearch || allowMultiple> noResetSelect2</#if>"<#if isServerSearch> style="min-width:200px;"</#if> id="${id}"
+        <#t><#if allowMultiple> multiple="multiple"</#if>
+        <#t><#if .node["@size"]?has_content> size="${.node["@size"]}"</#if>
+        <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+        <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+        <#t><#if moquiKey?has_content> moqui-key = "${moquiKey}"</#if>
+    >
+        <#if !allowMultiple>
+            <#-- don't add first-in-list or empty option if allowMultiple (can deselect all to be empty, including empty option allows selection of empty which isn't the point) -->
+            <#if currentValue?has_content>
+                <#if .node["@current"]! == "first-in-list">
+                    <option selected="selected" value="${currentValue}"><#if currentDescription?has_content>${currentDescription}<#else>${currentValue}</#if></option><#rt/>
+                    <option value="${currentValue}">---</option><#rt/>
+                <#elseif !optionsHasCurrent>
+                    <option selected="selected" value="${currentValue}"><#if currentDescription?has_content>${currentDescription}<#else>${currentValue}</#if></option><#rt/>
+                </#if>
+            </#if>
+            <#assign allowEmpty = ec.getResource().expandNoL10n(.node["@allow-empty"]!, "")/>
+            <#if (allowEmpty! == "true") || !(options?has_content)>
+                <option value="">&nbsp;</option>
             </#if>
         </#if>
-        <#assign allowEmpty = ec.getResource().expandNoL10n(.node["@allow-empty"]!, "")/>
-        <#if (allowEmpty! == "true") || !(options?has_content)>
-            <option value="">&nbsp;</option>
+        <#if options?has_content>
+            <#list (options.keySet())! as key>
+                <#if allowMultiple && currentValueList?has_content><#assign isSelected = currentValueList?seq_contains(key)>
+                    <#else><#assign isSelected = currentValue?has_content && currentValue == key></#if>
+                <option<#if isSelected> selected="selected"</#if> value="${key}">${options.get(key)}</option>
+            </#list>
         </#if>
-    </#if>
-    <#if options?has_content>
-        <#list (options.keySet())! as key>
-            <#if allowMultiple && currentValueList?has_content><#assign isSelected = currentValueList?seq_contains(key)>
-                <#else><#assign isSelected = currentValue?has_content && currentValue == key></#if>
-            <option<#if isSelected> selected="selected"</#if> value="${key}">${options.get(key)}</option>
-        </#list>
-    </#if>
     </select>
     <#if ec.getResource().expandNoL10n(.node["@show-not"]!, "") == "true"><span><input type="checkbox" class="form-control" name="${name}_not" value="Y"<#if ec.getWeb().parameters.get(name + "_not")! == "Y"> checked="checked"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>&nbsp;${ec.getL10n().localize("Not")}</span></#if>
     <#-- <span>[${currentValue}]; <#list currentValueList as curValue>[${curValue!''}], </#list></span> -->
@@ -2184,13 +2281,24 @@ a => A, d => D, y => Y
 </#macro>
 
 <#macro radio>
+    <#assign rdSubFieldNode = .node?parent>
     <#assign options = sri.getFieldOptions(.node)/>
     <#assign currentValue = sri.getFieldValueString(.node)/>
     <#if !currentValue?has_content><#assign currentValue = ec.getResource().expandNoL10n(.node["@no-current-selected-key"]!, "")/></#if>
     <#assign id><@fieldId .node/></#assign>
     <#assign curName><@fieldName .node/></#assign>
+    <@getMoquiKey rdSubFieldNode/>
+
     <#list (options.keySet())! as key>
-        <span id="${id}<#if (key_index > 0)>_${key_index}</#if>"><input type="radio" name="${curName}" value="${key?html}"<#if currentValue?has_content && currentValue==key> checked="checked"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>&nbsp;${options.get(key)!""}</span>
+        <span id="${id}<#if (key_index > 0)>_${key_index}</#if>">
+            <input type="radio" name="${curName}" value="${key?html}"
+                <#t><#if currentValue?has_content && currentValue==key> checked="checked"</#if>
+                <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+                <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+                <#t><#if moquiKey?has_content>moqui-key = "${moquiKey}"</#if>
+            >
+            &nbsp;${options.get(key)!""}
+        </span>
     </#list>
 </#macro>
 
@@ -2205,19 +2313,42 @@ a => A, d => D, y => Y
 </span>
 </#macro>
 
-<#macro reset><input type="reset" name="<@fieldName .node/>" value="<@fieldTitle .node?parent/>" id="<@fieldId .node/>"<#if .node["@icon"]?has_content> iconcls="ui-icon-${.node["@icon"]}"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>></#macro>
+<#macro reset>
+    <#assign buttonText><#if .node["@text"]?has_content>${ec.getResource().expand(.node["@text"], "")}<#else><@fieldTitle .node?parent/></#if></#assign>
+    <@getMoquiKey .node?parent/>
+
+    <button type="reset" name="<@fieldName .node/>" value="<@fieldName .node/>" id="<@fieldId .node/>"
+        <#if .node["@icon"]?has_content> iconcls="ui-icon-${.node["@icon"]}"</#if>
+        <#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+        <#if ownerForm?has_content> form="${ownerForm}"</#if>
+        <#t><#if moquiKey?has_content> moquiKey="${moquiKey}"</#if>
+    >
+        <#t>${buttonText}
+        <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+    </button>
+</#macro>
 
 <#macro submit>
     <#assign confirmationMessage = ec.getResource().expand(.node["@confirmation"]!, "")/>
     <#assign buttonText><#if .node["@text"]?has_content>${ec.getResource().expand(.node["@text"], "")}<#else><@fieldTitle .node?parent/></#if></#assign>
     <#assign iconClass = .node["@icon"]!>
     <#if !iconClass?has_content><#assign iconClass = sri.getThemeIconClass(buttonText)!></#if>
-    <button type="submit" name="<@fieldName .node/>" value="<@fieldName .node/>" id="<@fieldId .node/>"<#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}');"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if> class="btn btn-primary btn-sm"<#if ownerForm?has_content> form="${ownerForm}"</#if>><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
-    <#if .node["image"]?has_content><#assign imageNode = .node["image"][0]>
-        <img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}" alt="<#if imageNode["@alt"]?has_content>${imageNode["@alt"]}<#else><@fieldTitle .node?parent/></#if>"<#if imageNode["@width"]?has_content> width="${imageNode["@width"]}"</#if><#if imageNode["@height"]?has_content> height="${imageNode["@height"]}"</#if>>
-    <#else>
-        <#t>${buttonText}
-    </#if>
+    <@getMoquiKey .node?parent/>
+
+    <button type="submit" name="<@fieldName .node/>" value="<@fieldName .node/>" id="<@fieldId .node/>"
+        <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}');"</#if>
+        <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+        <#t> class="btn btn-primary btn-sm"
+        <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+        <#t><#if moquiKey?has_content> moqui-key="${moquiKey}"</#if>
+    >
+        <#if iconClass?has_content><i class="${iconClass}"></i> </#if>
+        <#if .node["image"]?has_content><#assign imageNode = .node["image"][0]>
+            <img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}" alt="<#if imageNode["@alt"]?has_content>${imageNode["@alt"]}<#else><@fieldTitle .node?parent/></#if>"<#if imageNode["@width"]?has_content> width="${imageNode["@width"]}"</#if><#if imageNode["@height"]?has_content> height="${imageNode["@height"]}"</#if>>
+        <#else>
+            <#t>${buttonText}
+            <#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+        </#if>
     </button>
 </#macro>
 
@@ -2225,7 +2356,17 @@ a => A, d => D, y => Y
     <#assign textAreaId><@fieldId .node/></#assign>
     <#assign editorType = ec.getResource().expand(.node["@editor-type"]!"", "")>
     <#assign editorScreenThemeId = ec.getResource().expand(.node["@editor-theme"]!"", "")>
-<textarea class="form-control" name="<@fieldName .node/>" id="${textAreaId}" <#if .node["@cols"]?has_content>cols="${.node["@cols"]}"<#else>style="width:100%;"</#if> rows="${.node["@rows"]!"3"}"<#if (.node["@read-only"]!"false") == "true"> readonly="readonly"</#if><#if .node["@maxlength"]?has_content> maxlength="${.node["@maxlength"]}"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>${sri.getFieldValueString(.node)?html}</textarea>
+    <@getMoquiKey .node?parent/>
+
+    <textarea class="form-control" name="<@fieldName .node/>" id="${textAreaId}" <#if .node["@cols"]?has_content>cols="${.node["@cols"]}"<#else>style="width:100%;"</#if> rows="${.node["@rows"]!"3"}"
+        <#t><#if (.node["@read-only"]!"false") == "true"> readonly="readonly"</#if>
+        <#t><#if .node["@maxlength"]?has_content> maxlength="${.node["@maxlength"]}"</#if>
+        <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+        <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+        <#t><#if moquiKey?has_content>moqui-key = "${moquiKey}"</#if>
+    >
+        ${sri.getFieldValueString(.node)?html}
+    </textarea>
     <#if editorType == "html">
         <#assign editorThemeCssList = sri.getThemeValues("STRT_STYLESHEET", editorScreenThemeId)>
         <script src="https://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js" type="text/javascript"></script>
@@ -2254,6 +2395,8 @@ a => A, d => D, y => Y
     <#assign regexpInfo = formInstance.getFieldValidationRegexpInfo(tlSubFieldNode)!>
     <#assign inputType><#if .node["@input-type"]?has_content>${.node["@input-type"]}<#else><#rt>
         <#lt><#if validationClasses?contains("email")>email<#elseif validationClasses?contains("url")>url<#else>text</#if></#if></#assign>
+    <@getMoquiKey  tlSubFieldNode/>
+
     <#-- NOTE: removed number type (<#elseif validationClasses?contains("number")>number) because on Safari, maybe others, ignores size and behaves funny for decimal values -->
     <#if .node["@ac-transition"]?has_content>
         <#assign acUrlInfo = sri.makeUrlByType(.node["@ac-transition"], "transition", .node, "false")>
@@ -2263,11 +2406,13 @@ a => A, d => D, y => Y
         <#if .node["@ac-initial-text"]?has_content><#assign valueText = ec.getResource().expand(.node["@ac-initial-text"]!, "")>
             <#else><#assign valueText = fieldValue></#if>
         <#t><input id="${id}_ac" type="${inputType}"
-            <#t> name="${name}_ac" value="${valueText?html}" size="${.node.@size!"30"}"<#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
-            <#t><#if ec.getResource().condition(.node.@disabled!"false", "")> disabled="disabled"</#if>
-            <#t> class="form-control typeahead<#if validationClasses?has_content> ${validationClasses}</#if>"<#if validationClasses?contains("required")> required</#if>
-            <#t><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
-            <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if> autocomplete="off"<#if ownerForm?has_content> form="${ownerForm}"</#if>>
+                <#t> name="${name}_ac" value="${valueText?html}" size="${.node.@size!"30"}"<#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
+                <#t><#if ec.getResource().condition(.node.@disabled!"false", "")> disabled="disabled"</#if>
+                <#t> class="form-control typeahead<#if validationClasses?has_content> ${validationClasses}</#if>"<#if validationClasses?contains("required")> required</#if>
+                <#t><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
+                <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if> autocomplete="off"<#if ownerForm?has_content> form="${ownerForm}"</#if>
+                <#t><#if moquiKey?has_content> moqui-key = "${moquiKey}"</#if>
+            >
         <input id="${id}" type="hidden" name="${name}" value="${fieldValue?html}"<#if ownerForm?has_content> form="${ownerForm}"</#if>>
         <#if acShowValue><span id="${id}_value" class="form-autocomplete-value"><#if valueText?has_content>${valueText?html}<#else>&nbsp;</#if></span></#if>
         <#assign depNodeList = .node["depends-on"]>
@@ -2306,11 +2451,13 @@ a => A, d => D, y => Y
     <#else>
         <#assign tlAlign = tlFieldNode["@align"]!"left">
         <#t><input id="${id}" type="${inputType}"
-        <#t> name="${name}" value="${fieldValue?html}" <#if .node.@size?has_content>size="${.node.@size}"<#else>style="width:100%;"</#if><#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
-        <#t><#if ec.getResource().condition(.node.@disabled!"false", "")> disabled="disabled"</#if>
-        <#t> class="form-control<#if validationClasses?has_content> ${validationClasses}</#if><#if tlAlign == "center"> text-center<#elseif tlAlign == "right"> text-right</#if>"
-        <#t><#if validationClasses?contains("required")> required</#if><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
-        <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>
+            <#t> name="${name}" value="${fieldValue?html}" <#if .node.@size?has_content>size="${.node.@size}"<#else>style="width:100%;"</#if><#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
+            <#t><#if ec.getResource().condition(.node.@disabled!"false", "")> disabled="disabled"</#if>
+            <#t> class="form-control<#if validationClasses?has_content> ${validationClasses}</#if><#if tlAlign == "center"> text-center<#elseif tlAlign == "right"> text-right</#if>"
+            <#t><#if validationClasses?contains("required")> required</#if><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
+            <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>
+            <#t><#if moquiKey?has_content>moqui-key = "${moquiKey}"</#if>
+        >
         <#assign expandedMask = ec.getResource().expandNoL10n(.node["@mask"], "")!>
         <#if expandedMask?has_content><script>$('#${id}').inputmask("${expandedMask}");</script></#if>
         <#if .node["@default-transition"]?has_content>
diff --git a/template/screen-macro/DefaultScreenMacros.qvt.ftl b/template/screen-macro/DefaultScreenMacros.qvt.ftl
index 42d0fc061..146343fda 100644
--- a/template/screen-macro/DefaultScreenMacros.qvt.ftl
+++ b/template/screen-macro/DefaultScreenMacros.qvt.ftl
@@ -27,7 +27,10 @@ along with this software (see the LICENSE.md file). If not, see
     <#recurse>
     <#if sri.doBoundaryComments()><!-- END   screen[@location=${sri.getActiveScreenDef().location}].fail-widgets --></#if>
 </#macro>
-
+<#macro getMoquiKey curNode>
+    <#assign moquiKey = curNode["@moqui-key"]! >
+    <#if moquiKey?has_content> <#assign moquiKey=moquiKey?substring(0,1)?upper_case > </#if>
+</#macro>
 <#-- ================ Subscreens ================ -->
 <#macro "subscreens-menu"><#if hideNav! != "true">
     <#if .node["@type"]! == "popup"><#-- NOTE: popup menus no longer handled here, how handled dynamically in navbar.html.ftl -->
@@ -157,8 +160,11 @@ ${sri.renderSectionInclude(.node)}
         <#assign title = ec.getResource().expand(.node["@title"], "")>
         <#if !title?has_content><#assign title = buttonText></#if>
         <#assign cdDivId><@nodeId .node/></#assign>
+        <@getMoquiKey .node/>
         <m-container-dialog id="${cdDivId}" color="<@getQuasarColor ec.getResource().expandNoL10n(.node["@type"]!"primary", "")/>" width="${.node["@width"]!""}"
-                button-text="${buttonText}" button-class="${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}" title="${title}"<#if _openDialog! == cdDivId> :openDialog="true"</#if>>
+                button-text="${buttonText}" button-class="${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}" title="${title}"<#if _openDialog! == cdDivId> :openDialog="true"</#if>
+                <#lt><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
+                >
             <#recurse>
         </m-container-dialog>
     </#if>
@@ -172,6 +178,8 @@ ${sri.renderSectionInclude(.node)}
     <#assign iconClass = "fa fa-share">
     <#if .node["@icon"]?has_content><#assign iconClass = .node["@icon"]></#if>
     <#if .node["@condition"]?has_content><#assign conditionResult = ec.getResource().condition(.node["@condition"], "")><#else><#assign conditionResult = true></#if>
+    <#assign ddDivId><@nodeId .node/></#assign>
+    <@getMoquiKey .node/>
     <#if conditionResult>
         <#assign buttonText = ec.getResource().expand(.node["@button-text"], "")>
         <#assign title = ec.getResource().expand(.node["@title"], "")>
@@ -179,10 +187,18 @@ ${sri.renderSectionInclude(.node)}
         <#assign urlInstance = sri.makeUrlByType(.node["@transition"], "transition", .node, "true")>
         <#assign ddDivId><@nodeId .node/></#assign>
         <#if urlInstance.disableLink>
-            <q-btn disabled dense outline no-caps icon="open_in_new" label="${buttonText}" color="<@getQuasarColor ec.getResource().expandNoL10n(.node["@type"]!"primary", "")/>" class="${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"></q-btn>
+            <q-btn disabled dense outline no-caps icon="open_in_new" color="<@getQuasarColor ec.getResource().expandNoL10n(.node["@type"]!"primary", "")/>" class="${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"
+                <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+            >
+                ${buttonText}
+                <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+            </q-btn>
         <#else>
             <m-dynamic-dialog id="${ddDivId}" url="${urlInstance.urlWithParams}" color="<@getQuasarColor ec.getResource().expandNoL10n(.node["@type"]!"primary", "")/>" width="${.node["@width"]!""}"
-                    button-text="${buttonText}" button-class="${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}" title="${title}"<#if _openDialog! == ddDivId> :openDialog="true"</#if>></m-dynamic-dialog>
+                    button-text="${buttonText}" button-class="${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}" title="${title}"<#if _openDialog! == ddDivId> :openDialog="true"</#if>
+                    <#lt><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
+            >
+            </m-dynamic-dialog>
         </#if>
         <#-- used to use afterFormText for m-dynamic-dialog inside another form, needed now?
         <#assign afterFormText>
@@ -236,6 +252,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
             <#if linkNode["@pass-through-parameters"]! == "true">
                 <#assign urlInstance = urlInstance.addPassThroughParameters(sri.getScreenUrlInstance())></#if>
             <#assign linkDivId><@nodeId .node/></#assign>
+
             <@linkFormForm linkNode linkDivId linkText urlInstance/>
             <@linkFormLink linkNode linkDivId linkText urlInstance/>
         </#if>
@@ -253,6 +270,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
         <q-field dense outlined readonly<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if>><template v-slot:control>
     </#if>
 
+    <@getMoquiKey linkNode/>
     <#if urlInstance.disableLink>
         <span>
             <q-btn dense no-caps disabled <#if linkNode["@link-type"]! != "anchor" && linkNode["@link-type"]! != "hidden-form-link">outline<#else>flat</#if><#rt>
@@ -279,31 +297,44 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                 <#-- TODO non q-btn approach might simulate styles like old stuff, initial attempt failed though: <#if linkNode["@link-type"]! != "anchor">btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if> -->
                 <#if linkNode["@link-type"]! != "anchor">
                     <#t>>
-                    <q-btn dense outline no-caps color="<@getQuasarColor linkNode["@btn-type"]!"primary"/>"<#rt>
-                        <#t> class="m-link<#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>">
+                    <#t><q-btn dense outline no-caps color="<@getQuasarColor linkNode["@btn-type"]!"primary"/>"<#rt>
+                    <#t>    <#t> class="m-link<#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
+                    <#t>    <#if moquiKey?has_content> moqui-key="${moquiKey}" </#if>
+                    <#t>>
                 <#else>
-                    <#t> class="<#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>">
+                    <#t> class="<#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
+                    <#t> <#if moquiKey?has_content> moqui-key="${moquiKey}" </#if>
+                    <#t>>
                 </#if>
                 <#t><#if linkNode["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(linkNode["@tooltip"], "")}</q-tooltip></#if>
                 <#t><#if iconClass?has_content><i class="${iconClass} q-icon<#if linkText?? && linkText?trim?has_content> on-left</#if>"></i> </#if><#rt>
-                <#t><#if linkNode["image"]?has_content><#visit linkNode["image"][0]><#else><span v-pre>${linkText}</span></#if>
+                <#t><#if linkNode["image"]?has_content>
+                    <#t><#visit linkNode["image"][0]>
+                <#t><#else>
+                    <#t><span v-pre>${linkText}</span>
+                    <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                <#t></#if>
                 <#t><#if badgeMessage?has_content> <q-badge class="on-right" transparent>${badgeMessage}</q-badge></#if>
                 <#if linkNode["@link-type"]! != "anchor"></q-btn></#if>
             <#t></${linkElement}>
         <#else>
             <#if linkFormId?has_content>
-            <#rt><q-btn dense outline no-caps type="submit" form="${linkFormId}" id="${linkFormId}_button" color="<@getQuasarColor linkNode["@btn-type"]!"primary"/>"
-                    <#t> class="<#if linkNode["@style"]?has_content>${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
-                    <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>>
-                    <#t><#if linkNode["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(linkNode["@tooltip"], "")}</q-tooltip></#if>
-                <#t><#if iconClass?has_content><i class="${iconClass} q-icon<#if linkText?? && linkText?trim?has_content> on-left</#if>"></i> </#if>
-                <#if linkNode["image"]?has_content>
-                    <#t><img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"<#if imageNode["@alt"]?has_content> alt="${imageNode["@alt"]}"</#if>/>
-                <#else>
-                    <#t>${linkText}
-                </#if>
-                <#t><#if badgeMessage?has_content> <q-badge class="on-right" transparent>${badgeMessage}</q-badge></#if>
-            <#t></q-btn>
+
+                <#rt><q-btn dense outline no-caps type="submit" form="${linkFormId}" id="${linkFormId}_button" color="<@getQuasarColor linkNode["@btn-type"]!"primary"/>"
+                        <#t> class="<#if linkNode["@style"]?has_content>${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
+                        <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
+                        <#t><#if moquiKey?has_content> moqui-key = ${moquiKey} </#if>
+                    >
+                        <#t><#if linkNode["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(linkNode["@tooltip"], "")}</q-tooltip></#if>
+                        <#t><#if iconClass?has_content><i class="${iconClass} q-icon<#if linkText?? && linkText?trim?has_content> on-left</#if>"></i> </#if>
+                        <#if linkNode["image"]?has_content>
+                            <#t><img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"<#if imageNode["@alt"]?has_content> alt="${imageNode["@alt"]}"</#if>/>
+                        <#else>
+                            <#t>${linkText}
+                            <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                        </#if>
+                        <#t><#if badgeMessage?has_content> <q-badge class="on-right" transparent>${badgeMessage}</q-badge></#if>
+                <#t></q-btn>
             </#if>
         </#if>
     </#if>
@@ -329,12 +360,18 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                     <#assign iconClass = linkNode["@icon"]!>
                     <#if !iconClass?has_content && linkNode["@text"]?has_content><#assign iconClass = sri.getThemeIconClass(linkNode["@text"])!></#if>
                     <#assign badgeMessage = ec.getResource().expand(linkNode["@badge"]!, "")/>
+                    <@getMoquiKey linkNode?parent/>
+
                     <#rt><q-btn dense no-caps type="submit" <#if linkNode["@link-type"]! == "hidden-form-link">flat<#else>outline</#if>
                             <#t> color="<@getQuasarColor linkNode["@btn-type"]!"primary"/>" class="m-link<#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>"
-                            <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>>
-                        <#t><#if linkNode["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(linkNode["@tooltip"], "")}</q-tooltip></#if>
-                        <#t><#if iconClass?has_content><i class="${iconClass} q-icon<#if linkText?? && linkText?trim?has_content> on-left</#if>"></i> </#if>${linkText}
-                        <#t><#if badgeMessage?has_content> <q-badge class="on-right" transparent>${badgeMessage}</q-badge></#if>
+                            <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
+                            <#t><#if moquiKey?has_content> moqui-key = ${moquiKey} </#if>
+                        >
+                            <#t><#if linkNode["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(linkNode["@tooltip"], "")}</q-tooltip></#if>
+                            <#t><#if iconClass?has_content><i class="${iconClass} q-icon<#if linkText?? && linkText?trim?has_content> on-left</#if>"></i> </#if>
+                            ${linkText}
+                            <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                            <#t><#if badgeMessage?has_content> <q-badge class="on-right" transparent>${badgeMessage}</q-badge></#if>
                     <#t></q-btn>
                 </#if>
             </#if>
@@ -400,6 +437,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
         <#else><#assign linkText = ec.getResource().expand(.node["@text"]!"", "")></#if>
 
     <#if linkText == "null"><#assign linkText = ""></#if>
+    <@getMoquiKey .node/>
     <#if linkText?has_content || .node["image"]?has_content || .node["@icon"]?has_content>
         <#if .node["@encode"]! != "false"><#assign linkText = linkText?html></#if>
         <#assign iconClass = .node["@icon"]!>
@@ -408,11 +446,18 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
 
         <#-- NOTE: do not use auto-close or v-close-popup because it closes dialogs as well as the menu! -->
         <q-btn-dropdown dense outline no-caps color="<@getQuasarColor .node["@btn-type"]!"primary"/>"<#rt>
-                <#lt><#if .node["@style"]?has_content> class="${ec.getResource().expandNoL10n(.node["@style"], "")}"</#if>>
+                <#lt><#if .node["@style"]?has_content> class="${ec.getResource().expandNoL10n(.node["@style"], "")}"</#if>
+                <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+        >
             <template v-slot:label>
                 <#if .node["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(.node["@tooltip"], "")}</q-tooltip></#if>
                 <#if iconClass?has_content><i class="${iconClass} q-icon<#if linkText?? && linkText?trim?has_content> on-left</#if>"></i></#if>
-                <#if .node["image"]?has_content><#visit .node["image"][0]><#else>${linkText}</#if>
+                <#if .node["image"]?has_content>
+                    <#visit .node["image"][0]>
+                <#else>
+                    ${linkText}
+                    <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                </#if>
                 <#if badgeMessage?has_content><q-badge class="on-right" transparent>${badgeMessage}</q-badge></#if>
             </template>
 
@@ -837,7 +882,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                         <div><strong>${ec.getL10n().localize("Active Saved Find:")}</strong> ${activeFormListFind.description?html}
                             <#if userDefaultFormListFindId == activeFormListFind.formListFindId><span class="text-info">(${ec.getL10n().localize("My Default")})</span></#if></div>
                         <#if screenScheduled?has_content>
-                            <p>(Scheduled for <#if screenScheduled.renderMode! == 'xsl-fo'>PDF<#else>${screenScheduled.renderMode!?upper_case}</#if><#rt>
+                            <p>(Scheduled for <#if screenScheduled.renderMode! == 'xsl-fo'>PDF<#else>${screenScheduled.renderMode!}</#if><#rt>
                                 <#t> ${Static["org.moqui.impl.service.ScheduledJobRunner"].getCronDescription(screenScheduled.cronExpression, ec.user.getLocale(), true)!})</p>
                         <#else>
                             <m-form class="form-inline" id="${formId}_SCHED" action="${formSaveFindUrl}" v-slot:default="formProps"
@@ -1623,6 +1668,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
 <#macro set><#-- shouldn't be called directly, but just in case --><#recurse/></#macro>
 
 <#macro check>
+    <#assign ckSubFieldNode = .node?parent>
     <#assign options = sri.getFieldOptions(.node)>
     <#assign currentValue = sri.getFieldValueString(.node)>
     <#if !currentValue?has_content><#assign currentValue = ec.getResource().expandNoL10n(.node["@no-current-selected-key"]!, "")/></#if>
@@ -1631,14 +1677,27 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#assign containerStyle = ec.getResource().expandNoL10n(.node["@container-style"]!, "")>
     <#assign fieldLabel><@fieldTitle .node?parent/></#assign>
     <#assign useWrapper = (.node["@no-wrapper"]!"false") != "true">
+    <#assign validationClasses = formInstance.getFieldValidationClasses(ckSubFieldNode)>
+    <@getMoquiKey ckSubFieldNode/>
+
     <#if useWrapper>
-    <q-field dense outlined<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if><#if containerStyle?has_content> class="${containerStyle}"</#if><#if formDisabled!false> disable</#if>>
+    <q-field dense outlined <#if fieldLabel?has_content> stack-label label-slot </#if><#if containerStyle?has_content> class="${containerStyle}"</#if><#if formDisabled!false> disable</#if>
+
+    >
         <#if .node?parent["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(.node?parent["@tooltip"], "")}</q-tooltip></#if>
+        <template v-slot:label>
+            <div> ${fieldLabel}
+            <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+            <#t><#if validationClasses?contains("required")> <em class="text-red"> * </em></#if>
+            </div>
+        </template>
         <template v-slot:control>
     </#if>
             <#list (options.keySet())! as key>
                 <q-checkbox size="xs" val="${key?html}" label="${(options.get(key)!"")?html}" name="${curName}" id="${tlId}<#if (key_index > 0)>_${key_index}</#if>"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
-                    <#lt><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curName}"<#else> value="${key?html}"<#if allChecked! == "true"> checked="checked"<#elseif currentValue?has_content && (currentValue==key || currentValue.contains(key))> checked="checked"</#if></#if>></q-checkbox>
+                    <#lt><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curName}"<#else> value="${key?html}"<#if allChecked! == "true"> checked="checked"<#elseif currentValue?has_content && (currentValue==key || currentValue.contains(key))> checked="checked"</#if></#if>
+                    <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+                ></q-checkbox>
             </#list>
     <#if useWrapper>
         </template>
@@ -1731,11 +1790,14 @@ a => A, d => D, y => Y
     </#if>
     <#assign curName><@fieldName .node/></#assign>
     <#assign validationClasses = formInstance.getFieldValidationClasses(dtSubFieldNode)>
+    <@getMoquiKey dtSubFieldNode/>
+
     <m-date-time id="<@fieldId .node/>" name="${curName}" type="${.node["@type"]!""}" size="${.node["@size"]!""}" label="<@fieldTitle dtSubFieldNode/>"<#if formDisabled!> disable</#if><#rt>
         <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curName}"<#else> value="${sri.getFieldValueString(dtFieldNode, .node["@default-value"]!"", javaFormat)?html}"</#if>
         <#t><#if .node?parent["@tooltip"]?has_content> tooltip="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
         <#t><#if ownerForm?has_content> form="${ownerForm}"</#if><#if javaFormat?has_content> format="<@getMomentDateFormat javaFormat/>"</#if>
         <#t><#if validationClasses?contains("required")> required="required"</#if><#if .node.@rules?has_content> :rules="[${.node.@rules}]"</#if>
+        <#lt><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
         <#t> auto-year="${.node["@auto-year"]!"true"}" :minuteStep="${.node["@minute-stepping"]!"5"}"></m-date-time>
 </#macro>
 
@@ -1879,6 +1941,8 @@ a => A, d => D, y => Y
         <#if currentValue?has_content && !currentDescription?has_content><#assign currentDescription><@widgetTextValue .node true/></#assign></#if>
     </#if>
     <#assign fieldLabel><@fieldTitle ddSubFieldNode/></#assign>
+    <@getMoquiKey ddSubFieldNode/>
+
     <m-drop-down name="${name}" id="${tlId}"<#if fieldLabel?has_content> label="${fieldLabel}"</#if><#if formDisabled!> disable</#if><#rt>
             <#t> class="<#if isDynamicOptions>dynamic-options</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if><#if validationClasses?has_content> ${validationClasses}</#if>"<#rt>
             <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${name}" :fields="${fieldsJsName}"<#else><#if allowMultiple> :value="[<#list currentValueList as curVal><#if curVal?has_content>'${curVal}',</#if></#list>]"<#else> value="${currentValue!}"</#if></#if>
@@ -1896,7 +1960,10 @@ a => A, d => D, y => Y
             </#if>
                 :options="[<#if currentValue?has_content && !allowMultiple && !optionsHasCurrent>{value:'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(currentValue)}',label:'<#if currentDescription?has_content>${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(currentDescription!)}<#else>${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(currentValue)}</#if>'},</#if><#rt>
                     <#t><#list (options.keySet())! as key>{value:'<#if key?has_content>${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(key)}</#if>',label:'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(options.get(key)!)}'}<#sep>,</#list>]"
-            <#lt>>
+            <#lt>
+            <#t><#if validationClasses?contains("required")> required</#if>
+            <#t><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
+            >
             <#-- support <#if .node["@current"]! == "first-in-list"> again? -->
             <#if ec.getResource().expandNoL10n(.node["@show-not"]!, "") == "true">
             <template v-slot:after>
@@ -1941,18 +2008,33 @@ a => A, d => D, y => Y
 </#macro>
 
 <#macro radio>
+    <#assign rdSubFieldNode = .node?parent>
     <#assign options = sri.getFieldOptions(.node)/>
     <#assign currentValue = sri.getFieldValueString(.node)/>
     <#if !currentValue?has_content><#assign currentValue = ec.getResource().expandNoL10n(.node["@no-current-selected-key"]!, "")/></#if>
     <#assign tlId><@fieldId .node/></#assign>
     <#assign curName><@fieldName .node/></#assign>
     <#assign fieldLabel><@fieldTitle .node?parent/></#assign>
-    <q-field dense outlined<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if><#if formDisabled!> disable</#if>>
+    <#assign validationClasses = formInstance.getFieldValidationClasses(rdSubFieldNode)>
+    <@getMoquiKey rdSubFieldNode/>
+
+    <q-field dense outlined <#if fieldLabel?has_content> stack-label label-slot </#if><#if formDisabled!> disable</#if>
+
+    >
         <#if .node?parent["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(.node?parent["@tooltip"], "")}</q-tooltip></#if>
+        <template v-slot:label>
+            <div> <#if fieldLabel?has_content> ${fieldLabel} </#if>
+                <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                <#t><#if validationClasses?contains("required")> <em class="text-red"> * </em></#if>
+            </div>
+        </template>
         <template v-slot:control>
         <#list (options.keySet())! as key>
             <q-radio size="xs" val="${key?html}" label="${(options.get(key)!"")?html}" name="${curName}" id="${tlId}<#if (key_index > 0)>_${key_index}</#if>"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
-                <#lt><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curName}"<#else> value="${key?html}"<#if currentValue?has_content && currentValue==key> checked="checked"</#if></#if>></q-radio>
+                <#lt><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curName}"<#else> value="${key?html}"<#if currentValue?has_content && currentValue==key> checked="checked"</#if></#if>
+                <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+            >
+            </q-radio>
         </#list>
         </template>
     </q-field>
@@ -1977,29 +2059,83 @@ a => A, d => D, y => Y
 </div>
 </#macro>
 
-<#macro reset><q-btn dense outline type="reset" name="<@fieldName .node/>" value="<@fieldTitle .node?parent/>" id="<@fieldId .node/>"<#if .node["@icon"]?has_content> iconcls="ui-icon-${.node["@icon"]}"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>></#macro>
+<#macro reset>
+    <#assign buttonText><#if .node["@text"]?has_content>${ec.getResource().expand(.node["@text"], "")}<#else><@fieldTitle .node?parent/></#if></#assign>
+    <#assign iconClass = .node["@icon"]!>
+    <#if !iconClass?has_content><#assign iconClass = sri.getThemeIconClass(buttonText)!></#if>
+    <@getMoquiKey  .node?parent/>
+
+    <q-btn dense outline type="reset" name="<@fieldName .node/>" value="<@fieldTitle .node?parent/>" id="<@fieldId .node/>"
+            <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+            <#t><#if formDisabled!> disabled</#if>
+            <#t><#if moquiKey?has_content> moqui-key="${moquiKey}"</#if>
+    >
+        <#if !.node["image"]?has_content>
+            <div>
+                ${buttonText}
+                <#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+            </div>
+        </#if>
+
+        <#t><#if iconClass?has_content><i class="${iconClass}"></i></#if>
+        <#t><#if .node?parent["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(.node?parent["@tooltip"], "")}</q-tooltip></#if>
+        <#t><#if .node["image"]?has_content><#assign imageNode = .node["image"][0]>
+                <img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"
+                    alt="<#if imageNode["@alt"]?has_content>${imageNode["@alt"]}<#else><@fieldTitle .node?parent/></#if>"
+                    <#if imageNode["@width"]?has_content> width="${imageNode["@width"]}"</#if>
+                    <#if imageNode["@height"]?has_content> height="${imageNode["@height"]}"</#if>
+                />
+            </#if>
+    </q-btn>
+</#macro>
 
 <#macro submit>
-    <#assign confirmationMessage = ec.getResource().expand(.node["@confirmation"]!, "")/>
+    <#assign confirmationMessage = ec.getResource().expand(.node["@confirmation"]!, "") >
     <#assign buttonText><#if .node["@text"]?has_content>${ec.getResource().expand(.node["@text"], "")}<#else><@fieldTitle .node?parent/></#if></#assign>
     <#assign iconClass = .node["@icon"]!>
     <#if !iconClass?has_content><#assign iconClass = sri.getThemeIconClass(buttonText)!></#if>
+    <@getMoquiKey .node?parent/>
+
     <q-btn dense outline no-caps type="submit" name="<@fieldName .node/>" value="<@fieldName .node/>" id="<@fieldId .node/>"<#rt>
-            <#t> color="<@getQuasarColor .node["@type"]!"primary"/>"<#if formDisabled!> disabled</#if>
+            <#t> color="<@getQuasarColor .node["@type"]!"primary"/>"
+            <#t><#if formDisabled!> disabled</#if>
             <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}');"</#if>
-            <#t><#if ownerForm?has_content> form="${ownerForm}"</#if><#if !.node["image"]?has_content> label="${buttonText}"</#if>>
-        <#if iconClass?has_content><i class="${iconClass}"></i></#if>
-        <#if .node?parent["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(.node?parent["@tooltip"], "")}</q-tooltip></#if>
-    <#if .node["image"]?has_content><#assign imageNode = .node["image"][0]>
-        <img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}" alt="<#if imageNode["@alt"]?has_content>${imageNode["@alt"]}<#else><@fieldTitle .node?parent/></#if>"<#if imageNode["@width"]?has_content> width="${imageNode["@width"]}"</#if><#if imageNode["@height"]?has_content> height="${imageNode["@height"]}"</#if>>
-    </#if>
+            <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+            <#t><#if moquiKey?has_content> moqui-key="${moquiKey}"</#if>
+    >
+        <#if !.node["image"]?has_content>
+            <div>
+                ${buttonText}
+                <#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+            </div>
+        </#if>
+
+        <#t><#if iconClass?has_content><i class="${iconClass}"></i></#if>
+        <#t><#if .node?parent["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(.node?parent["@tooltip"], "")}</q-tooltip></#if>
+        <#t><#if .node["image"]?has_content><#assign imageNode = .node["image"][0]>
+                <img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"
+                    alt="<#if imageNode["@alt"]?has_content>${imageNode["@alt"]}<#else><@fieldTitle .node?parent/></#if>"
+                    <#if imageNode["@width"]?has_content> width="${imageNode["@width"]}"</#if>
+                    <#if imageNode["@height"]?has_content> height="${imageNode["@height"]}"</#if>
+                />
+            </#if>
     </q-btn>
 </#macro>
 
 <#macro "text-area">
+    <#assign taSubFieldNode = .node?parent>
+    <#assign taFieldNode = taSubFieldNode?parent>
+    <#assign taId><@fieldId .node/></#assign>
+
     <#assign name><@fieldName .node/></#assign>
     <#assign fieldLabel><@fieldTitle .node?parent/></#assign>
     <#assign editorType = ec.getResource().expand(.node["@editor-type"]!"", "")>
+
+    <#assign fieldValue = sri.getFieldValueString(.node)>
+    <#assign validationClasses = formInstance.getFieldValidationClasses(taSubFieldNode)>
+    <#assign validationRules = formInstance.getFieldValidationJsRules(taSubFieldNode)!>
+    <@getMoquiKey taSubFieldNode/>
+
     <#if editorType == "html">
         <#-- support CSS from editorScreenThemeId with resourceTypeEnumId=STRT_STYLESHEET, like: contentsCss:['/css/mysitestyles.css','/css/anotherfile.css']; -->
         <#-- see: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss -->
@@ -2014,15 +2150,29 @@ a => A, d => D, y => Y
         <m-simple-mde<#if fieldsJsName?has_content> v-model="${fieldsJsName}.${name}"</#if>
                 :config="{ indentWithTabs:false, autoDownloadFontAwesome:false, autofocus:true, spellChecker:false }"></m-simple-mde>
     <#else>
-        <q-input type="textarea" dense outlined<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if> name="${name}" for="<@fieldId .node/>"
-                <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${name}"</#if><#if formDisabled!> disable</#if>
-                <#t><#if .node["@cols"]?has_content> cols="${.node["@cols"]}"<#else> style="width:100%;"</#if>
-                <#t> rows="${.node["@rows"]!"3"}"<#if .node["@read-only"]! == "true"> readonly="readonly"</#if>
+        <#assign taAlign = taFieldNode["@align"]!"left">
+        <m-text-line dense <#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if> id="${taId}" type="textarea"<#rt>
+                <#t> name="${name}"<#if .node.@prefix?has_content> prefix="${ec.resource.expand(.node.@prefix, "")}"</#if>
+                <#t> <#if fieldsJsName?has_content>v-model="${fieldsJsName}.${name}" :fields="${fieldsJsName}"<#else><#if fieldValue?html == fieldValue>value="${fieldValue}"<#else>:value="'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(fieldValue)}'"</#if></#if>
+                <#t><#if .node.@size?has_content> size="${.node.@size}"<#else> style="width:100%;"</#if><#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
+
+                <#t><#if .node["@cols"]?has_content> cols="${.node["@cols"]}"</#if>
+                <#t> rows="${.node["@rows"]!"3"}"
                 <#t><#if .node["@autogrow"]! == "true"> autogrow</#if>
-                <#t><#if .node["@maxlength"]?has_content> maxlength="${.node["@maxlength"]}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>
-            <#if .node?parent["@tooltip"]?has_content><q-tooltip>${ec.getResource().expand(.node?parent["@tooltip"], "")}</q-tooltip></#if>
-            <#if !fieldsJsName?has_content>${sri.getFieldValueString(.node)?html}</#if>
-        </q-input>
+                <#t><#if .node["@read-only"]! == "true"> readonly="readonly"</#if>
+
+                <#t><#if formDisabled! || ec.getResource().condition(.node.@disabled!"false", "")> disable</#if>
+                <#t> class="<#if validationClasses?has_content>${validationClasses}</#if><#if taAlign == "center"> text-center<#elseif taAlign == "right"> text-right</#if>"
+                <#t><#if validationClasses?contains("required")> required</#if><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
+                <#t><#if expandedMask?has_content> mask="${expandedMask}" fill-mask="_"<#if validationClasses?contains("number")> :reverse-fill-mask="true"</#if></#if>
+
+                <#t><#if validationRules?has_content || .node.@rules?has_content>
+                    <#t> :rules="[<#if .node.@rules?has_content>${.node.@rules},</#if><#list validationRules! as valRule>value => ${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(valRule.expr)}||'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(valRule.message)}'<#sep>,</#list>]"
+                <#t></#if>
+
+                <#lt><#if ownerForm?has_content> form="${ownerForm}"</#if><#if taSubFieldNode["@tooltip"]?has_content> tooltip="${ec.getResource().expand(taSubFieldNode["@tooltip"], "")?html}"</#if>
+                <#lt><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
+        ></m-text-line>
     </#if>
 </#macro>
 
@@ -2034,6 +2184,7 @@ a => A, d => D, y => Y
     <#assign fieldValue = sri.getFieldValueString(.node)>
     <#assign validationClasses = formInstance.getFieldValidationClasses(tlSubFieldNode)>
     <#assign validationRules = formInstance.getFieldValidationJsRules(tlSubFieldNode)!>
+    <@getMoquiKey tlSubFieldNode/>
     <#-- NOTE: removed number type (<#elseif validationClasses?contains("number")>number) because on Safari, maybe others, ignores size and behaves funny for decimal values -->
     <#if .node["@ac-transition"]?has_content>
         <#assign acUrlInfo = sri.makeUrlByType(.node["@ac-transition"], "transition", .node, "false")>
@@ -2088,7 +2239,9 @@ a => A, d => D, y => Y
                 <#t><#if validationRules?has_content || .node.@rules?has_content>
                     <#t> :rules="[<#if .node.@rules?has_content>${.node.@rules},</#if><#list validationRules! as valRule>value => ${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(valRule.expr)}||'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(valRule.message)}'<#sep>,</#list>]"
                 <#t></#if>
-                <#lt><#if ownerForm?has_content> form="${ownerForm}"</#if><#if tlSubFieldNode["@tooltip"]?has_content> tooltip="${ec.getResource().expand(tlSubFieldNode["@tooltip"], "")?html}"</#if>></m-text-line>
+                <#lt><#if ownerForm?has_content> form="${ownerForm}"</#if><#if tlSubFieldNode["@tooltip"]?has_content> tooltip="${ec.getResource().expand(tlSubFieldNode["@tooltip"], "")?html}"</#if>
+                <#lt><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
+        ></m-text-line>
     </#if>
 </#macro>
 
diff --git a/template/screen-macro/DefaultScreenMacros.vuet.ftl b/template/screen-macro/DefaultScreenMacros.vuet.ftl
index 75f0056fd..aca89ecd1 100644
--- a/template/screen-macro/DefaultScreenMacros.vuet.ftl
+++ b/template/screen-macro/DefaultScreenMacros.vuet.ftl
@@ -25,7 +25,10 @@ along with this software (see the LICENSE.md file). If not, see
     <#recurse>
     <#if sri.doBoundaryComments()><!-- END   screen[@location=${sri.getActiveScreenDef().location}].fail-widgets --></#if>
 </#macro>
-
+<#macro getMoquiKey curNode>
+    <#assign moquiKey = curNode["@moqui-key"]! >
+    <#if moquiKey?has_content> <#assign moquiKey=moquiKey?substring(0,1)?upper_case > </#if>
+</#macro>
 <#-- ================ Subscreens ================ -->
 <#macro "subscreens-menu"><#if hideNav! != "true">
     <#if .node["@type"]! == "popup"><#-- NOTE: popup menus no longer handled here, how handled dynamically in navbar.html.ftl -->
@@ -149,7 +152,15 @@ ${sri.renderSectionInclude(.node)}
         <#assign title = ec.getResource().expand(.node["@title"], "")>
         <#if !title?has_content><#assign title = buttonText></#if>
         <#assign cdDivId><@nodeId .node/></#assign>
-        <button id="${cdDivId}-button" type="button" data-toggle="modal" data-target="#${cdDivId}" data-original-title="${buttonText}" data-placement="bottom" class="btn btn-${ec.getResource().expandNoL10n(.node["@type"]!"primary", "")} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"><i class="${iconClass}"></i> ${buttonText}</button>
+        <@getMoquiKey .node/>
+
+        <button id="${cdDivId}-button" type="button" data-toggle="modal" data-target="#${cdDivId}" data-original-title="${buttonText}"
+            data-placement="bottom" class="btn btn-${ec.getResource().expandNoL10n(.node["@type"]!"primary", "")} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"
+            <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+        >
+            <i class="${iconClass}"></i> ${buttonText}
+            <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+        </button>
         <container-dialog id="${cdDivId}" width="${.node["@width"]!"760"}" title="${title}"<#if _openDialog! == cdDivId> :openDialog="true"</#if>>
             <#recurse>
         </container-dialog>
@@ -164,6 +175,7 @@ ${sri.renderSectionInclude(.node)}
     <#assign iconClass = "fa fa-external-link">
     <#if .node["@icon"]?has_content><#assign iconClass = .node["@icon"]></#if>
     <#if .node["@condition"]?has_content><#assign conditionResult = ec.getResource().condition(.node["@condition"], "")><#else><#assign conditionResult = true></#if>
+    <@getMoquiKey .node/>
     <#if conditionResult>
         <#assign buttonText = ec.getResource().expand(.node["@button-text"], "")>
         <#assign title = ec.getResource().expand(.node["@title"], "")>
@@ -171,9 +183,19 @@ ${sri.renderSectionInclude(.node)}
         <#assign urlInstance = sri.makeUrlByType(.node["@transition"], "transition", .node, "true")>
         <#assign ddDivId><@nodeId .node/></#assign>
         <#if urlInstance.disableLink>
-            <button id="${ddDivId}-button" type="button" class="disabled text-muted btn btn-${.node["@type"]!"primary"} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"><i class="${iconClass}"></i> ${buttonText}</button>
+            <button id="${ddDivId}-button" type="button" class="disabled text-muted btn btn-${.node["@type"]!"primary"} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"
+                <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+            >
+                <i class="${iconClass}"></i> ${buttonText}
+                <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+            </button>
         <#else>
-            <button id="${ddDivId}-button" type="button" data-toggle="modal" data-target="#${ddDivId}" data-original-title="${buttonText}" data-placement="bottom" class="btn btn-${.node["@type"]!"primary"} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"><i class="${iconClass}"></i> ${buttonText}</button>
+            <button id="${ddDivId}-button" type="button" data-toggle="modal" data-target="#${ddDivId}" data-original-title="${buttonText}" data-placement="bottom" class="btn btn-${.node["@type"]!"primary"} btn-sm ${ec.getResource().expandNoL10n(.node["@button-style"]!"", "")}"
+                <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+            >
+                <i class="${iconClass}"></i> ${buttonText}
+                <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+            </button>
             <#assign afterFormText>
             <dynamic-dialog id="${ddDivId}" url="${urlInstance.urlWithParams}" width="${.node["@width"]!"760"}" title="${title}"<#if _openDialog! == ddDivId> :openDialog="true"</#if>></dynamic-dialog>
             </#assign>
@@ -235,6 +257,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#if !iconClass?has_content && linkNode["@text"]?has_content><#assign iconClass = sri.getThemeIconClass(linkNode["@text"])!></#if>
     <#assign iconClass = ec.getResource().expandNoL10n(iconClass!, "")/>
     <#assign badgeMessage = ec.getResource().expand(linkNode["@badge"]!, "")/>
+    <@getMoquiKey linkNode/>
     <#if urlInstance.disableLink>
         <a href="#"<#if linkFormId?has_content> id="${linkFormId}"</#if> class="disabled text-muted <#if linkNode["@link-type"]! != "anchor" && linkNode["@link-type"]! != "hidden-form-link">btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>"><#if iconClass?has_content><i class="${iconClass}"></i></#if><#if linkNode["image"]?has_content><#visit linkNode["image"][0]><#else>${linkText}</#if></a>
     <#else>
@@ -251,23 +274,33 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                 <#t><#if linkNode["@dynamic-load-id"]?has_content> load-id="${linkNode["@dynamic-load-id"]}"</#if>
                 <#t><#if confirmationMessage?has_content><#if linkElement == "m-link"> :confirmation="'${confirmationMessage?js_string}'"<#else> onclick="return confirm('${confirmationMessage?js_string}')"</#if></#if>
                 <#t> class="<#if linkNode["@link-type"]! != "anchor">btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if><#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
-                <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>>
+                <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>
+                <#t> <#if moquiKey?has_content> moqui-key="${moquiKey}" </#if>
+            <#t>>
                 <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if><#rt>
-                <#t><#if linkNode["image"]?has_content><#visit linkNode["image"][0]><#else><span v-pre>${linkText}</span></#if>
+                <#t><#if linkNode["image"]?has_content>
+                    <#t><#visit linkNode["image"][0]>
+                <#t><#else>
+                    <#t><span v-pre>${linkText}</span>
+                    <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                <#t></#if>
                 <#t><#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
-                <#t></${linkElement}>
+            <#t></${linkElement}>
         <#else>
             <#if linkFormId?has_content>
             <#rt><button type="submit" form="${linkFormId}" id="${linkFormId}_button" class="btn btn-${linkNode["@btn-type"]!"primary"} btn-sm<#if linkNode["@style"]?has_content> ${ec.getResource().expandNoL10n(linkNode["@style"], "")}</#if>"
                     <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
-                    <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>>
-                <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
-                <#if linkNode["image"]?has_content>
-                    <#t><img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"<#if imageNode["@alt"]?has_content> alt="${imageNode["@alt"]}"</#if>/>
-                <#else>
-                    <#t>${linkText}
-                </#if>
-            <#t><#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
+                    <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>
+                    <#t><#if moquiKey?has_content> moqui-key="${moquiKey}" </#if>
+                >
+                    <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
+                    <#if linkNode["image"]?has_content>
+                        <#t><img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"<#if imageNode["@alt"]?has_content> alt="${imageNode["@alt"]}"</#if>/>
+                    <#else>
+                        <#t>${linkText}
+                        <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                    </#if>
+                    <#t><#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
             <#t></button>
             </#if>
         </#if>
@@ -290,10 +323,18 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                     <#assign iconClass = linkNode["@icon"]!>
                     <#if !iconClass?has_content && linkNode["@text"]?has_content><#assign iconClass = sri.getThemeIconClass(linkNode["@text"])!></#if>
                     <#assign badgeMessage = ec.getResource().expand(linkNode["@badge"]!, "")/>
+                    <@getMoquiKey linkNode?parent/>
+
                     <#rt><button type="submit" class="<#if linkNode["@link-type"]! == "hidden-form-link">button-plain<#else>btn btn-${linkNode["@btn-type"]!"primary"} btn-sm</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>"
-                        <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
-                        <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>>
-                        <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>${linkText}<#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if></button>
+                            <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}')"</#if>
+                            <#t><#if linkNode["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(linkNode["@tooltip"], "")}"</#if>
+                            <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+                        >
+                            <#t><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
+                            ${linkText}
+                            <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                            <#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
+                        </button>
                 </#if>
             </#if>
         </${linkFormType}>
@@ -358,6 +399,8 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
         <#else><#assign linkText = ec.getResource().expand(.node["@text"]!"", "")></#if>
 
     <#if linkText == "null"><#assign linkText = ""></#if>
+
+    <@getMoquiKey .node/>
     <#if linkText?has_content || .node["image"]?has_content || .node["@icon"]?has_content>
         <#if .node["@encode"]! != "false"><#assign linkText = linkText?html></#if>
         <#assign iconClass = .node["@icon"]!>
@@ -366,9 +409,18 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
 
         <#-- TODO: tooltip, doesn't work when using data-toggle for dropdown! <#if .node["@tooltip"]?has_content>${ec.getResource().expand(.node["@tooltip"], "")}</#if> -->
         <div class="btn-group">
-            <button type="button" class="btn btn-${.node["@btn-type"]!"primary"} dropdown-toggle<#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="btn btn-${.node["@btn-type"]!"primary"} dropdown-toggle<#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if>"
+                <#t> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                <#t><#if moquiKey?has_content> moqui-key=${moquiKey} </#if>
+            >
                 <#if iconClass?has_content><i class="${iconClass}"></i></#if>
-                <#if .node["image"]?has_content><#visit .node["image"][0]><#else>${linkText}</#if>
+                <#if .node["image"]?has_content>
+                    <#visit .node["image"][0]>
+                <#else>
+                    ${linkText}
+                    <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                </#if>
+
                 <#if badgeMessage?has_content> <span class="badge">${badgeMessage}</span></#if>
                 <span class="caret"></span>
             </button>
@@ -553,11 +605,19 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#if fieldSubNode["hidden"]?has_content><#recurse fieldSubNode/><#return></#if>
     <#assign containerStyle = ec.getResource().expandNoL10n(fieldSubNode["@container-style"]!, "")>
     <#assign curFieldTitle><@fieldTitle fieldSubNode/></#assign>
+
+    <#assign validationClasses = formInstance.getFieldValidationClasses(fieldSubNode)>
+    <@getMoquiKey fieldSubNode/>
+
     <#if bigRow>
         <div class="big-row-item">
             <div class="form-group">
                 <#if curFieldTitle?has_content && !fieldSubNode["submit"]?has_content>
-                    <label class="control-label" for="${formSingleId}_${fieldSubParent["@name"]}">${curFieldTitle}</label><#-- was form-title -->
+                    <label class="control-label" for="${formSingleId}_${fieldSubParent["@name"]}">
+                        ${curFieldTitle}
+                        <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                        <#t><#if validationClasses?contains("required")> <em style="color:red"> * </em></#if>
+                    </label><#-- was form-title -->
                 </#if>
     <#else>
         <#-- NOTE: this style is only good for 2 fields in a field-row! in field-row cols are double size because are inside a ${colPrefix}-6 element -->
@@ -574,7 +634,11 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
             <div class="${widgetClass}<#if containerStyle?has_content> ${containerStyle}</#if>">
         <#elseif curFieldTitle?has_content>
         <div class="form-group">
-            <label class="control-label ${labelClass}" for="${formSingleId}_${fieldSubParent["@name"]}">${curFieldTitle}</label><#-- was form-title -->
+            <label class="control-label ${labelClass}" for="${formSingleId}_${fieldSubParent["@name"]}">
+                ${curFieldTitle}
+                <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+                <#t><#if validationClasses?contains("required")> <em style="color:red"> * </em></#if>
+            </label><#-- was form-title -->
             <div class="${widgetClass}<#if containerStyle?has_content> ${containerStyle}</#if>">
         </#if>
     </#if>
@@ -653,7 +717,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                     <#assign screenScheduled = formListInfo.getScreenForm().getFormListFindScreenScheduled(activeFormListFind.formListFindId, ec)!>
                     <div><strong>${ec.getL10n().localize("Active Saved Find:")} ${activeFormListFind.description?html}</strong></div>
                     <#if screenScheduled?has_content>
-                        <p>(Scheduled for <#if screenScheduled.renderMode! == 'xsl-fo'>PDF<#else>${screenScheduled.renderMode!?upper_case}</#if><#rt>
+                        <p>(Scheduled for <#if screenScheduled.renderMode! == 'xsl-fo'>PDF<#else>${screenScheduled.renderMode!}</#if><#rt>
                             <#t> ${Static["org.moqui.impl.service.ScheduledJobRunner"].getCronDescription(screenScheduled.cronExpression, ec.user.getLocale(), true)!})</p>
                     <#else>
                         <m-form class="form-inline" id="${formId}_SCHED" action="${formSaveFindUrl}">
@@ -1553,18 +1617,30 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
 <#macro "default-field"><#-- shouldn't be called directly, but just in case --><#recurse/></#macro>
 <#macro set><#-- shouldn't be called directly, but just in case --><#recurse/></#macro>
 
+
 <#macro check>
+    <#assign ckSubFieldNode = .node?parent>
     <#assign options = sri.getFieldOptions(.node)>
     <#assign currentValue = sri.getFieldValueString(.node)>
     <#if !currentValue?has_content><#assign currentValue = ec.getResource().expandNoL10n(.node["@no-current-selected-key"]!, "")/></#if>
     <#assign tlId><@fieldId .node/></#assign>
     <#assign curName><@fieldName .node/></#assign>
     <#assign containerStyle = ec.getResource().expandNoL10n(.node["@container-style"]!, "")>
+    <@getMoquiKey ckSubFieldNode/>
+
     <#list (options.keySet())! as key>
         <#assign allChecked = ec.getResource().expandNoL10n(.node["@all-checked"]!, "")>
         <#assign fullId = tlId>
         <#if (key_index > 0)><#assign fullId = tlId + "_" + key_index></#if>
-        <span id="${fullId}"<#if containerStyle?has_content> class="${containerStyle}"</#if>><input type="checkbox" name="${curName}" value="${key?html}"<#if allChecked! == "true"> checked="checked"<#elseif currentValue?has_content && (currentValue==key || currentValue.contains(key))> checked="checked"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>><#if options.get(key)! != ""><span class="checkbox-label" onclick="$('#${fullId}').children('input[type=checkbox]').click()" style="cursor: default">${options.get(key)}</span></#if></span>
+        <span id="${fullId}"<#if containerStyle?has_content> class="${containerStyle}"</#if>>
+            <input type="checkbox" name="${curName}" value="${key?html}"
+                <#t><#if allChecked! == "true"> checked="checked"<#elseif currentValue?has_content && (currentValue==key || currentValue.contains(key))> checked="checked"</#if>
+                <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+                <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+                <#t><#if moquiKey?has_content> moqui-key = "${moquiKey}"</#if>
+            >
+            <#if options.get(key)! != ""><span class="checkbox-label" onclick="$('#${fullId}').children('input[type=checkbox]').click()" style="cursor: default">${options.get(key)}</span></#if>
+        </span>
     </#list>
 </#macro>
 
@@ -1643,10 +1719,14 @@ a => A, d => D, y => Y
     </#if>
     <#assign fieldValue = sri.getFieldValueString(dtFieldNode, .node["@default-value"]!"", javaFormat)>
     <#assign validationClasses = formInstance.getFieldValidationClasses(dtSubFieldNode)>
+    <@getMoquiKey dtSubFieldNode/>
+
     <date-time id="<@fieldId .node/>" name="<@fieldName .node/>" value="${fieldValue?html}" type="${.node["@type"]!""}" size="${.node["@size"]!""}"<#rt>
         <#t><#if .node?parent["@tooltip"]?has_content> tooltip="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
         <#t><#if ownerForm?has_content> form="${ownerForm}"</#if><#if javaFormat?has_content> format="<@getMomentDateFormat javaFormat/>"</#if>
-        <#t><#if validationClasses?contains("required")> required="required"</#if> auto-year="${.node["@auto-year"]!"true"}" :minuteStep="${.node["@minute-stepping"]!"5"}"/>
+        <#t><#if validationClasses?contains("required")> required="required"</#if>
+        <#lt><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
+        auto-year="${.node["@auto-year"]!"true"}" :minuteStep="${.node["@minute-stepping"]!"5"}"/>
 </#macro>
 
 <#macro display>
@@ -1773,6 +1853,8 @@ a => A, d => D, y => Y
         <#assign doUrlParameterMap = doUrlInfo.getParameterMap()>
         <#if currentValue?has_content && !currentDescription?has_content><#assign currentDescription><@widgetTextValue .node true/></#assign></#if>
     </#if>
+    <@getMoquiKey ddSubFieldNode/>
+
     <drop-down name="${name}" id="${tlId}" class="<#if isDynamicOptions> dynamic-options</#if><#if .node["@style"]?has_content> ${ec.getResource().expandNoL10n(.node["@style"], "")}</#if><#if validationClasses?has_content> ${validationClasses}</#if>"<#rt>
             <#t><#if allowMultiple> multiple="multiple"</#if><#if allowEmpty> :allow-empty="true"</#if><#if .node["@combo-box"]! == "true"> :combo="true"</#if>
             <#t><#if .node?parent["@tooltip"]?has_content> tooltip="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
@@ -1788,7 +1870,9 @@ a => A, d => D, y => Y
             <#t></#if>
                 :options="[<#if currentValue?has_content && !allowMultiple && !optionsHasCurrent>{id:'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(currentValue)}',text:'<#if currentDescription?has_content>${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(currentDescription!)}<#else>${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(currentValue)}</#if>'},</#if><#rt>
                     <#t><#list (options.keySet())! as key>{id:'<#if key?has_content>${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(key)}<#else>\u00a0</#if>',text:'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(options.get(key)!)}'}<#sep>,</#list>]"
-            <#lt>>
+            <#lt>
+            <#t><#if moquiKey?has_content>moquiKey = "${moquiKey}"</#if>
+    >
             <#-- support <#if .node["@current"]! == "first-in-list"> again? -->
     </drop-down>
     <#if ec.getResource().expandNoL10n(.node["@show-not"]!, "") == "true"><span><input type="checkbox" class="form-control" name="${name}_not" value="Y"<#if ec.getWeb().parameters.get(name + "_not")! == "Y"> checked="checked"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>&nbsp;${ec.getL10n().localize("Not")}</span></#if>
@@ -1812,13 +1896,25 @@ a => A, d => D, y => Y
 </#macro>
 
 <#macro radio>
+    <#assign rdSubFieldNode = .node?parent>
     <#assign options = sri.getFieldOptions(.node)/>
     <#assign currentValue = sri.getFieldValueString(.node)/>
     <#if !currentValue?has_content><#assign currentValue = ec.getResource().expandNoL10n(.node["@no-current-selected-key"]!, "")/></#if>
     <#assign tlId><@fieldId .node/></#assign>
     <#assign curName><@fieldName .node/></#assign>
+    <@getMoquiKey rdSubFieldNode/>
+
+
     <#list (options.keySet())! as key>
-        <span id="${tlId}<#if (key_index > 0)>_${key_index}</#if>"><input type="radio" name="${curName}" value="${key?html}"<#if currentValue?has_content && currentValue==key> checked="checked"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>&nbsp;${options.get(key)!""}</span>
+        <span id="${tlId}<#if (key_index > 0)>_${key_index}</#if>">
+            <input type="radio" name="${curName}" value="${key?html}"
+                <#t><#if currentValue?has_content && currentValue==key> checked="checked"</#if>
+                <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+                <#t><#if ownerForm?has_content> form="${ownerForm}" </#if>
+                <#t><#if moquiKey?has_content>moqui-key = "${moquiKey}"</#if>
+            >
+            &nbsp;${options.get(key)!""}
+        </span>
     </#list>
 </#macro>
 
@@ -1833,33 +1929,64 @@ a => A, d => D, y => Y
 </span>
 </#macro>
 
-<#macro reset><input type="reset" name="<@fieldName .node/>" value="<@fieldTitle .node?parent/>" id="<@fieldId .node/>"<#if .node["@icon"]?has_content> iconcls="ui-icon-${.node["@icon"]}"</#if><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>></#macro>
+<#macro reset>
+    <#assign buttonText><#if .node["@text"]?has_content>${ec.getResource().expand(.node["@text"], "")}<#else><@fieldTitle .node?parent/></#if></#assign>
+    <@getMoquiKey .node?parent/>
+
+    <button type="reset" name="<@fieldName .node/>" value="<@fieldName .node/>" id="<@fieldId .node/>"
+        <#if .node["@icon"]?has_content> iconcls="ui-icon-${.node["@icon"]}"</#if>
+        <#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+        <#if ownerForm?has_content> form="${ownerForm}"</#if>
+        <#t><#if moquiKey?has_content> moquiKey="${moquiKey}"</#if>
+    >
+        <#t>${buttonText}
+        <#t><#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+    </button>
+</#macro>
 
 <#macro submit>
     <#assign confirmationMessage = ec.getResource().expand(.node["@confirmation"]!, "")/>
     <#assign buttonText><#if .node["@text"]?has_content>${ec.getResource().expand(.node["@text"], "")}<#else><@fieldTitle .node?parent/></#if></#assign>
     <#assign iconClass = .node["@icon"]!>
     <#if !iconClass?has_content><#assign iconClass = sri.getThemeIconClass(buttonText)!></#if>
+    <@getMoquiKey .node?parent/>
+
     <button type="submit" name="<@fieldName .node/>" value="<@fieldName .node/>" id="<@fieldId .node/>"<#rt>
             <#t><#if confirmationMessage?has_content> onclick="return confirm('${confirmationMessage?js_string}');"</#if>
             <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
             <#t> class="btn btn-${ec.getResource().expandNoL10n(.node["@type"]!"primary", "")} btn-sm"
-            <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>><#if iconClass?has_content><i class="${iconClass}"></i> </#if>
-    <#if .node["image"]?has_content><#assign imageNode = .node["image"][0]>
-        <img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}" alt="<#if imageNode["@alt"]?has_content>${imageNode["@alt"]}<#else><@fieldTitle .node?parent/></#if>"<#if imageNode["@width"]?has_content> width="${imageNode["@width"]}"</#if><#if imageNode["@height"]?has_content> height="${imageNode["@height"]}"</#if>>
-    <#else>
-        <#t>${buttonText}
-    </#if>
+            <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+            <#t><#if moquiKey?has_content> moqui-key="${moquiKey}"</#if>
+    >
+        <#if iconClass?has_content><i class="${iconClass}"></i> </#if>
+        <#if .node["image"]?has_content><#assign imageNode = .node["image"][0]>
+            <img src="${sri.makeUrlByType(imageNode["@url"],imageNode["@url-type"]!"content",null,"true")}"
+                    alt="<#if imageNode["@alt"]?has_content>${imageNode["@alt"]}<#else><@fieldTitle .node?parent/></#if>"
+                    <#if imageNode["@width"]?has_content> width="${imageNode["@width"]}"</#if>
+                    <#if imageNode["@height"]?has_content> height="${imageNode["@height"]}"</#if>
+            >
+        <#else>
+            <#t>${buttonText}
+            <#if moquiKey?has_content><span> ( <span style="text-decoration:underline">${moquiKey}</span> )</span> </#if>
+        </#if>
     </button>
 </#macro>
 
 <#macro "text-area">
+    <#assign taSubFieldNode = .node?parent>
     <#assign textAreaId><@fieldId .node/></#assign>
     <#assign editorType = ec.getResource().expand(.node["@editor-type"]!"", "")>
+    <@getMoquiKey taSubFieldNode/>
+
     <textarea v-pre class="form-control" name="<@fieldName .node/>" id="${textAreaId}" <#if .node["@cols"]?has_content>cols="${.node["@cols"]}"<#else>style="width:100%;"</#if>
-        rows="${.node["@rows"]!"3"}"<#if .node["@read-only"]! == "true"> readonly="readonly"</#if><#if .node["@maxlength"]?has_content> maxlength="${.node["@maxlength"]}"</#if>
-        <#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>><#rt>
-${sri.getFieldValueString(.node)?html}</textarea>
+        <#t> rows="${.node["@rows"]!"3"}"<#if .node["@read-only"]! == "true"> readonly="readonly"</#if><#if .node["@maxlength"]?has_content> maxlength="${.node["@maxlength"]}"</#if>
+        <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+        <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+        <#lt><#if moquiKey?has_content>moqui-key = "${moquiKey}"</#if>
+    ><#rt>
+        ${sri.getFieldValueString(.node)?html}
+    </textarea>
+
     <#if editorType == "html">
         <#-- support CSS from editorScreenThemeId with resourceTypeEnumId=STRT_STYLESHEET, like: contentsCss:['/css/mysitestyles.css','/css/anotherfile.css']; -->
         <#-- see: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss -->
@@ -1891,6 +2018,8 @@ ${sri.getFieldValueString(.node)?html}</textarea>
     <#assign regexpInfo = formInstance.getFieldValidationRegexpInfo(tlSubFieldNode)!>
     <#assign inputType><#if .node["@input-type"]?has_content>${.node["@input-type"]}<#else><#rt>
         <#lt><#if validationClasses?contains("email")>email<#elseif validationClasses?contains("url")>url<#else>text</#if></#if></#assign>
+    <@getMoquiKey  tlSubFieldNode  />
+
     <#-- NOTE: removed number type (<#elseif validationClasses?contains("number")>number) because on Safari, maybe others, ignores size and behaves funny for decimal values -->
     <#if .node["@ac-transition"]?has_content>
         <#assign acUrlInfo = sri.makeUrlByType(.node["@ac-transition"], "transition", .node, "false")>
@@ -1913,17 +2042,21 @@ ${sri.getFieldValueString(.node)?html}</textarea>
                 <#t> :depends-on="{<#list depNodeList as depNode><#local depNodeField = depNode["@field"]>'${depNode["@parameter"]!depNodeField}':'<@fieldIdByName depNodeField/>'<#sep>, </#list>}"
                 <#t> :ac-parameters="{<#list acUrlParameterMap.keySet() as parameterKey><#if acUrlParameterMap.get(parameterKey)?has_content>'${parameterKey}':'${acUrlParameterMap.get(parameterKey)}', </#if></#list>}"
                 <#t><#if .node["@ac-delay"]?has_content> :delay="${.node["@ac-delay"]}"</#if>
-                <#t><#if .node["@ac-initial-text"]?has_content> :skip-initial="true"</#if>/>
+                <#t><#if .node["@ac-initial-text"]?has_content> :skip-initial="true"</#if>
+                <#t><#if moquiKey?has_content> moquiKey = "${moquiKey}"</#if>
+        />
     <#else>
         <#assign tlAlign = tlFieldNode["@align"]!"left">
         <#t><input id="${tlId}" <#--v-model="fields.${name}"--> type="${inputType}" autocapitalize="off" autocomplete="off"
-            <#t> name="${name}" <#if fieldValue?html == fieldValue>value="${fieldValue}"<#else>:value="'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(fieldValue)}'"</#if>
-            <#t> <#if .node.@size?has_content>size="${.node.@size}"<#else>style="width:100%;"</#if><#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
-            <#t><#if ec.getResource().condition(.node.@disabled!"false", "")> disabled="disabled"</#if>
-            <#t> class="form-control<#if validationClasses?has_content> ${validationClasses}</#if><#if tlAlign == "center"> text-center<#elseif tlAlign == "right"> text-right</#if>"
-            <#t><#if validationClasses?contains("required")> required</#if><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
-            <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
-            <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>>
+                <#t> name="${name}" <#if fieldValue?html == fieldValue>value="${fieldValue}"<#else>:value="'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(fieldValue)}'"</#if>
+                <#t> <#if .node.@size?has_content>size="${.node.@size}"<#else>style="width:100%;"</#if><#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
+                <#t><#if ec.getResource().condition(.node.@disabled!"false", "")> disabled="disabled"</#if>
+                <#t> class="form-control<#if validationClasses?has_content> ${validationClasses}</#if><#if tlAlign == "center"> text-center<#elseif tlAlign == "right"> text-right</#if>"
+                <#t><#if validationClasses?contains("required")> required</#if><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
+                <#t><#if .node?parent["@tooltip"]?has_content> data-toggle="tooltip" title="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
+                <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
+                <#t><#if moquiKey?has_content>moqui-key = "${moquiKey}"</#if>
+            >
         <#assign expandedMask = ec.getResource().expandNoL10n(.node["@mask"], "")!>
         <#if expandedMask?has_content><m-script>$('#${tlId}').inputmask("${expandedMask}");</m-script></#if>
         <#if .node["@default-transition"]?has_content>