demo comments implem

WebGde/WebContent/WebGde-Widgets/DataInputWidget/DataInputWidget.css

@@ -91,7 +91,7 @@ h3 {
 	flex-direction: column;
 	border: none;
 	outline: none;
-	padding: 0px 4px 20px 4px;
+	padding: 0px 4px 0px 4px;
 	flex-wrap: nowrap;
 }
 
@@ -177,8 +177,10 @@ h3 {
 	width: 100%;
 }
 
+input[type="date"]::-webkit-inner-spin-button,
 input[type="date"]::-webkit-calendar-picker-indicator {
     display: none;
+    -webkit-appearance: none;
 }
 
 input[type="date"] {
@@ -190,6 +192,7 @@ input[type="date"] {
 	padding-left: 44px !important;
 }
 
+input[type="time"]::-webkit-inner-spin-button,
 input[type="time"]::-webkit-calendar-picker-indicator {
     display: none;
 }
@@ -208,6 +211,10 @@ label {
 	font-weight: 700;
 }
 
+.asterisk {
+	color: #ff3333;
+}
+
 .captureButtons {
 	display: inline-block;
 	width: 100%;
@@ -320,7 +327,7 @@ input[type=file]:hover {
 }
 
 .image-capture button {
-	width: 75%;
+	width: 100%;
 	border-radius: 8px;
 	display: flex;
     justify-content: center;
@@ -384,7 +391,7 @@ input[type=file]:hover {
 }
 
 .fingerprint-capture button {
-	width: 75%;
+	width: 100%;
 	border-radius: 8px;
 	display: flex;
     justify-content: center;
@@ -423,6 +430,10 @@ select {
 	color: #444;
 }
 
+select::-ms-expand {
+    display: none;
+}
+
 
 .select2-selection--single {
     border-style: none !important;

WebGde/WebContent/WebGde-Widgets/DataInputWidget/ImageCapture/captureImage.js

+import { createConfirmationModal } from "../../genericPopup/genericPopup.js";
+
 export function processCapture(key, imgFilename, imgFileSize) {
 	const form = document.getElementById('fields');
 	const img = document.getElementById(`${key}_zz`);
@@ -68,7 +70,7 @@ export function processCapture(key, imgFilename, imgFileSize) {
 
 	document.getElementById(`${key}_container`).style.display = 'none';
 
-	document.getElementById(`${key}_x`).addEventListener('click', () => {
+	function deleteImage(){
 		img.src = '';
 		container.innerHTML = '';
 		container.style.display = 'none';
@@ -77,6 +79,10 @@ export function processCapture(key, imgFilename, imgFileSize) {
 		// Clear the hidden fields
 		hiddenFnameInput.remove();
 		hiddenFileContentInput.remove();
+	}
+
+	document.getElementById(`${key}_x`).addEventListener('click', ()=> {
+		createConfirmationModal(deleteImage, "Delete Image?")
 	});
 }
 

WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js

@@ -41,20 +41,6 @@ export async function generateFields(inputSchema, containerId) {
 	// Make sure input fields are clear
 	clearFields(containerId);
 
-	let header1 = document.createElement("h1");
-	header1.textContent = " ";
-	header1.classList.add("field-header");
-	let header2 = document.createElement("h2");
-	header2.textContent = " ";
-	header2.classList.add("field-header");
-	let header3 = document.createElement("h3");
-	header3.setAttribute('id', 'counter');
-	header3.textContent = " ";
-	header3.classList.add("field-header");
-	divContainer.appendChild(header1);
-	divContainer.appendChild(header2);
-	divContainer.appendChild(header3);
-
 	let container = document.createElement("form");
 	container.id = "fields";
 	divContainer.appendChild(container);
@@ -218,7 +204,7 @@ export async function generateFields(inputSchema, containerId) {
 	});
 
 	$(document).ready(function() {
-		$('form:first *:input[type!=hidden]:first').focus(); // Run code
+		// $('form:first *:input[type!=hidden]:first').focus();
 	});
 
 }
@@ -1585,50 +1571,37 @@ const inputGeoTag = (key, validation) => {
  */
 const inputDropdown = (key, validation) => {
 	try {
-		const {
-			mandatory,
-			options
-		} = validation
-		const input = document.createElement('select')
-		input.setAttribute('id', `${key}`)
-		input.setAttribute('name', `${key}`)
-		input.classList.add('dropdown-input')
-		input.addEventListener('focusout', handleInput)
-
-		input.addEventListener('keydown', function(event) {
-			if (event.keyCode == 9) {
-				event.preventDefault();
-				var elem = document.getElementsByClassName('select2-search__field');
-				elem.focus();
-			}
-		});
-
-		if (options && options.length > 0) {
-			newOption = document.createElement("option")
-			newOption.text = 'Choose an option'
-			newOption.value = null
-
-			input.add(newOption)
-			for (const option of options) {
-				newOption = document.createElement("option")
-				newOption.text = option
-				newOption.value = option
-
-				input.add(newOption)
-			}
-		} else {
-			newOption = document.createElement("option")
-			newOption.text = 'No option available'
-			newOption.value = null
-
-			input.add(newOption)
-			input.setAttribute('disabled', 'false')
+	  const { mandatory, options } = validation;
+	  const input = document.createElement('select');
+	  input.setAttribute('id', `${key}`);
+	  input.setAttribute('name', `${key}`);
+	  input.classList.add('dropdown-input');
+  
+	  input.addEventListener('focusout', handleInput);
+  
+	  if (options && options.length > 0) {
+		// Add a placeholder option
+		const newOption = new Option('Choose an option', null, false, false);
+		input.add(newOption);
+  
+		// Add other options
+		for (const option of options) {
+		  const newOption = new Option(option, option, false, false);
+		  input.add(newOption);
 		}
-		return input
+	  } else {
+		// Add a disabled option if no options are available
+		const newOption = new Option('No option available', null, false, true);
+		input.add(newOption);
+		input.setAttribute('disabled', 'false');
+	  }
+  
+	  return input;
 	} catch (err) {
-		throw err
+	  throw err;
 	}
-}
+  };
+  
 
 const inputDbLookup = async (key, validation) => {
 	try {
@@ -1755,6 +1728,7 @@ const deconstruct = async (section, container, classAttribute) => {
 
 			const validation = getValidation(key, schema)
 
+			const { mandatory } = validation;
 			
 			if (hidden) {
 				const hiddenField = document.createElement('div') // will contain input field and label
@@ -1798,6 +1772,14 @@ const deconstruct = async (section, container, classAttribute) => {
 			label.style.color = fieldLabel ? '#000000' : '#ff3333'
 			labelContainer.appendChild(label)
 
+			const mandatoryMarker = document.createElement('text');
+			mandatoryMarker.classList.add('asterisk');
+			mandatoryMarker.textContent = "*";
+
+			if(mandatory){
+				labelContainer.appendChild(mandatoryMarker)
+			};
+
 			const inputContainer = document.createElement('div') // input field
 			inputContainer.setAttribute('class', 'inputContainer ' + classAttribute)
 			newField.appendChild(inputContainer)
@@ -1862,7 +1844,7 @@ const deconstruct = async (section, container, classAttribute) => {
 					input = noValidation()
 					break
 			}
-			input.setAttribute('class', classAttribute)
+			input.classList.add(classAttribute)
 			inputContainer.appendChild(input)
 
 		}

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css

@@ -34,7 +34,6 @@ body {
 	height: 100%;
 	overflow-y: auto;
 	padding-bottom: 1rem;
-	margin-bottom: 1rem;
 	border-bottom: 1px solid #e0e0e0;
 }
 
@@ -55,8 +54,8 @@ body {
 
 /* Element Item */
 .element-item {
-	margin-top: 17px;
-	margin-bottom: 17px;
+	margin-top: 15px;
+	margin-bottom: 15px;
 	margin-left: 32px;
 	font-size: 20px;
 	display: flex;
@@ -65,7 +64,7 @@ body {
 }
 
 .element-item span{
-	font-size: 20px;
+	font-size: 18px;
 	font-weight: bold;
 }
 

WebGde/WebContent/WebGde-Widgets/Submit/XMLWriter/XML_Saver.js

@@ -82,6 +82,8 @@ export async function WriteForm(e,metrics,doctype,section) {
         let fieldOrder = extractAkaValues(schema, doctype, section);
         console.log(fieldOrder);
 
+        fields = removeBlankValues(fields);
+
         let response = await createOutputXml(fields, myArray, doctype, section, fieldOrder);
         return response;
     }
@@ -221,5 +223,14 @@ async function createBPOXML(fields, metrics, doctype, section, fieldOrder){
     
 }
 
-
-
+function removeBlankValues(fields) {
+    for (const key in fields) {
+        if (fields.hasOwnProperty(key)) {
+            const value = fields[key];
+            if (value === '' || value === null || value === undefined) {
+              delete fields[key];
+            }
+        }
+    }
+    return fields;
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/documentControlWidget/DocumentControl.css

@@ -3,6 +3,7 @@
     justify-content: center;
     height: 70px;
     background-color: white;
+    margin-top: auto;
 }
 
 .document-control-button {

WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js

@@ -57,6 +57,16 @@ export class DocumentControlWidget {
 
 	addEvenListeners() {
 
+		window.addEventListener("resize", (e) => {
+			const container = this.global.container;
+
+			if (container.style.display === "none") {
+				container.style.display = "flex";
+			} else {
+				container.style.display = "none";
+			}
+		})
+
 		this.global.submitBtn.onclick = async (e) => {
 			createSubmitWindow(e);
 		}

WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema.json

@@ -93,6 +93,16 @@
 					"collection": "image-capture",
 					"mandatory": false
 				}
+			},
+			"Test": {
+				"fieldLabel": "Test",
+				"aka": "field7",
+				"validation": {
+					"fieldLength": 30,
+					"collection": "alphanumeric",
+					"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
+					"mandatory": false
+				}
 			}            
 		}
 	}