wcs/admin/fields.py

@@ -105,6 +105,12 @@ class FieldDefPage(Directory):
                 )
             else:
                 r += htmltext('<h3 class="field-edit--subtitle">%s</h3>') % self.field.description
+            existing_varnames = {
+                x.varname for x in self.objectdef.fields if x.varname if x.id != self.field.id
+            }
+            r += htmltext(
+                '<script id="other-fields-varnames">%s</script>' % json.dumps(list(existing_varnames))
+            )
             for widget in form.widgets:
                 if hasattr(widget, 'get_widget'):
                     add_element_widget = widget.get_widget('add_element')

wcs/qommon/form.py

@@ -1934,6 +1934,14 @@ class VarnameWidget(ValidatedStringWidget):
 
     regex = r'^[a-zA-Z][a-zA-Z0-9_]*'
 
+    def render_content(self):
+        r = TemplateIO(html=True)
+        r += super().render_content()  # <input>
+        r += htmltext('<span style="display: none" class="inline-hint-message">%s</span>') % _(
+            'This identifier is also used by another field.'
+        )
+        return r.getvalue()
+
     def _parse(self, request):
         ValidatedStringWidget._parse(self, request)
         if self.error:

wcs/qommon/static/css/dc2/admin.scss

@@ -3075,3 +3075,15 @@ ul.objects-list.single-links li.list-item-no-usage p {
 	padding: 0 0.5ex 0 2ex;
 	margin: 0;
 }
+
+.inline-hint-message {
+	&::before {
+		font-family: FontAwesome;
+		content: "\f24a";  /* sticky note */
+		margin-right: 0.3em;
+	}
+	margin-left: 0.7em;
+	background: #ffc;
+	border-radius: 0.3em;
+	padding: 0.5em;
+}

wcs/qommon/static/js/qommon.admin.js

@@ -463,4 +463,21 @@ $(function() {
             showRelatedObjectPopup(this);
         }
     });
+
+    const other_field_varnames_element = document.getElementById('other-fields-varnames')
+    const varname_field_widget = document.getElementById('form_varname')
+    if (other_field_varnames_element && varname_field_widget) {
+      const other_field_varnames = JSON.parse(other_field_varnames_element.textContent)
+      const message_span = document.querySelector('#form_varname + .inline-hint-message');
+      ['keyup', 'change'].forEach(event_type =>
+        varname_field_widget.addEventListener(event_type, function(event) {
+          if (other_field_varnames.indexOf(this.value) != -1) {
+            message_span.style.display = 'inline-block'
+          } else {
+            message_span.style.display = 'none'
+          }
+        })
+      )
+      varname_field_widget.dispatchEvent(new Event('keyup'))
+    }
 });