Image capture implementation changes

WebGde/WebContent/WebGde-Widgets/DataInputWidget/AndroidInterface/androidInterface.js

@@ -11,3 +11,7 @@ export function selfieCapture(key) {
 export function fingerprintCapture(key){
     window.ScannerInterface.scannerTest(key);
 }
+
+export async function getLocation(){
+    await window.LocationHandlerInterface.setupLocation();
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/DataInputWidget/FingerprintCapture/captureFingerprint.js

@@ -20,6 +20,8 @@ export function processFingerprint(key, filename) {
 	form.appendChild(hiddenFileContentInput);
 
 	img.style.display = 'inline';
+	img.style.width = '100%'; // Set maximum width to 100% of the container
+	img.style.height = '100%'; // Set maximum height to a specific value (adjust as needed)
 	thumb.style.display = 'none';
 
 	filenameElement.textContent = filenameString;
@@ -36,6 +38,7 @@ export function processFingerprint(key, filename) {
 	x.style.position = 'absolute';
 	document.getElementById(`${key}_x`).addEventListener('click', () => {
 		img.style.display = 'none';
+		img.src = '';
 		thumb.style.display = 'none';
 		x.style.display = 'none';
 		filenameElement.style.display = 'none';

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

-export function processCapture(key) {
+export function processCapture(key, imgFilename) {
 	const form = document.getElementById('fields');
 	const img = document.getElementById(`${key}_zz`);
 	const thumb = document.getElementById(`${key}_thumbnail`);
 	const filename = document.getElementById(`${key}_fname`);
 	const x = document.getElementById(`${key}_x`);
-    const filenameString = generateMediaFileName(sessionStorage.getItem('user_id'));;
+    // const filenameString = generateMediaFileName(sessionStorage.getItem('user_id'));
+	const filenameString = imgFilename;
 
 	// Create hidden inputs for fname and file content
 	const hiddenFnameInput = document.createElement('input');
@@ -20,6 +21,8 @@ export function processCapture(key) {
 	form.appendChild(hiddenFileContentInput);
 
 	img.style.display = 'inline';
+	img.style.width = '100%'; // Set maximum width to 100% of the container
+	img.style.height = '100%'; // Set maximum height to a specific value (adjust as needed)
 	thumb.style.display = 'none';
 
 	filename.textContent = filenameString;
@@ -36,6 +39,7 @@ export function processCapture(key) {
 	x.style.position = 'absolute';
 	document.getElementById(`${key}_x`).addEventListener('click', () => {
 		img.style.display = 'none';
+		img.src = '';
 		thumb.style.display = 'none';
 		x.style.display = 'none';
 		filename.style.display = 'none';

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

+import { schema } from "../generateFields.js";
+
+export const validateImage = (fieldID) => {
+
+    
+
+}
+
+export const getValidation = (fieldID) => {
+    // const { SECTION } = schema
+
+    let section = schema[sessionStorage.getItem("currentDoctype").replaceAll("_"," ")][sessionStorage.getItem("currentSection").replaceAll("_"," ")];
+    
+    try{
+        if (Object.keys(section).includes(fieldID)) return section[fieldID].validation;
+
+        return null;
+    } catch(err) {
+        return null
+    }
+}
\ No newline at end of file

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

 //Data Input Field Config
-export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/demo_schema.json";
+export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/08-30-test.json";
 // export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/HR Speed Test schema.json";
 //DBLookup Webservice URL
 export var DB_URL = "http://localhost:8080/WebGde/svc/gfs-rest/db-lookup"
\ No newline at end of file

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

@@ -6,7 +6,7 @@ import { showError } from "./showError.js";
 import { submitForm } from "../Submit/submit.js";
 import { BPO_OBJECT } from "../globalVariable.js";
 import { fetchOptionsDB } from "./DBLookup/DBLookup.js";
-import { fingerprintCapture, imageCapture } from "./AndroidInterface/androidInterface.js";
+import { fingerprintCapture, getLocation, imageCapture } from "./AndroidInterface/androidInterface.js";
 import { processCapture } from "./ImageCapture/captureImage.js";
 import { processFingerprint } from "./FingerprintCapture/captureFingerprint.js";
 
@@ -532,6 +532,7 @@ const inputImageCapture = (key, validation) => {
 						x.style.position = 'absolute';
 						document.getElementById(`${key}_x`).addEventListener('click', () => {
 							img.style.display = 'none';
+							img.src = '';
 							thumb.style.display = 'none';
 							x.style.display = 'none';
 							input.value = ''
@@ -566,6 +567,7 @@ const inputImageCapture = (key, validation) => {
 						x.style.position = 'absolute';
 						document.getElementById(`${key}_x`).addEventListener('click', () => {
 							img.style.display = 'none';
+							img.src = '';
 							thumb.style.display = 'none';
 							x.style.display = 'none';
 
@@ -661,96 +663,6 @@ const inputImageCapture = (key, validation) => {
  * @returns
  *      created input field element 
  */
-const inputSelfieCapture = (key, validation) => {
-	try {
-		const {
-			mandatory,
-			fieldLength
-		} = validation
-
-		const container = document.createElement('div');
-		const container2 = document.createElement('div');
-		container.appendChild(container2);
-		container2.classList.add('image-capture');
-
-		const input = document.createElement('input');
-		input.setAttribute('id', `attachedMedia`);
-		input.setAttribute('name', `${key}`);
-		input.setAttribute('type', 'file');
-		input.setAttribute('style', 'display: none');
-		// input.setAttribute('accept', 'all/*');
-
-		const capturedImage = document.createElement('input');
-		capturedImage.setAttribute('id', 'capturedImageData');
-		capturedImage.setAttribute('name', `${key}`);
-		capturedImage.setAttribute('type', 'hidden');
-		capturedImage.setAttribute('style', 'display: none');
-
-		const x = document.createElement('span')
-		x.setAttribute('class', 'x');
-		x.setAttribute('style', 'display: none')
-		x.textContent = 'x';
-
-		const dash = document.createElement('label');
-
-		dash.setAttribute('class', 'dash');
-		dash.innerHTML = ' or ';
-
-		const input2 = document.createElement('input');
-		input2.setAttribute('id', `${key}`);
-		input2.setAttribute('name', `${key}`);
-		input2.setAttribute('type', 'button');
-		input2.setAttribute('value', 'Capture Photo');
-		input2.addEventListener('click', () => {
-			selfieCapture(key);
-		});
-		window.processCapture = processCapture
-
-		const img = document.createElement('img');
-		const thumbnail = document.createElement('video');
-		thumbnail.setAttribute('style', 'display: none');
-		thumbnail.setAttribute('id', `${key}_thumbnail`);
-
-		img.setAttribute('id', `${key}_zz`);
-		img.setAttribute('style', 'display: none');
-
-		const filename = document.createElement('span');
-		filename.setAttribute('id', `${key}_fname`);
-		filename.setAttribute('name', `${key}`);
-		filename.setAttribute('type', 'text');
-		filename.setAttribute('style', 'display: none; font-size: inherit;');
-
-		// Append all elements to the container
-		const container3 = document.createElement('div');
-		container2.appendChild(x);
-		container3.setAttribute('id', `${key}_buttonsContainer-video`)
-		container3.setAttribute('class', 'buttonsContainer');
-		container3.appendChild(input);
-		// container3.appendChild(input1);
-		// container3.appendChild(dash);
-		container3.appendChild(input2);
-		container2.appendChild(container3)
-		container2.appendChild(img);
-		container2.appendChild(thumbnail);
-		container2.appendChild(filename);
-
-		mandatory ? input.setAttribute('required', 'true') : null
-
-		return container
-	} catch (err) {
-		throw err
-	}
-}
-
-/**
- * 
- * @param {*} key
- *      will serve as id of input field  
- * @param {*} validation
- *      validation of field from schema 
- * @returns
- *      created input field element 
- */
 const inputFingerprintCapture = (key, validation) => {
 	try {
 		const {
@@ -818,6 +730,7 @@ const inputFingerprintCapture = (key, validation) => {
 						x.style.position = 'absolute';
 						document.getElementById(`${key}_x`).addEventListener('click', () => {
 							img.style.display = 'none';
+							img.src = '';
 							thumb.style.display = 'none';
 							x.style.display = 'none';
 							input.value = ''
@@ -852,6 +765,7 @@ const inputFingerprintCapture = (key, validation) => {
 						x.style.position = 'absolute';
 						document.getElementById(`${key}_x`).addEventListener('click', () => {
 							img.style.display = 'none';
+							img.src = '';
 							thumb.style.display = 'none';
 							x.style.display = 'none';
 
@@ -1031,9 +945,13 @@ const inputChecklist = (key, validation) => {
 		var dropdownContent = document.createElement('div');
 		dropdownContent.classList.add('dropdown-content');
 		dropdown1.appendChild(dropdownContent);
+		var isOther = false;
 
 		// Create the checkboxes for each item
 		items.forEach(function (item, index) {
+			if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
+				isOther = true;
+			}else{
 				var div = document.createElement('div');
 				div.classList.add('checkbox');
 
@@ -1047,8 +965,10 @@ const inputChecklist = (key, validation) => {
 				var label = document.createTextNode(item);
 				div.appendChild(label);
 				dropdownContent.appendChild(div)
+			}
 		})
 		
+		if(isOther){
 			// Create the checkbox dependent on an input text value
 			var dependentDiv = document.createElement('div');
 			dependentDiv.classList.add('checkbox');
@@ -1085,6 +1005,7 @@ const inputChecklist = (key, validation) => {
 			inputTextBox.addEventListener("input", event => {
 				dependentCheckbox.value = event.target.value;
 			});
+		}
 
 		return dropdown1;
 	} catch (err) {
@@ -1111,15 +1032,19 @@ const inputRadiolist = (key, validation) => {
 		var dropdownContent = document.createElement('div');
 		dropdownContent.classList.add('dropdown-content');
 		dropdown1.appendChild(dropdownContent);
+		var isOther = false;
 
 		// Create radio buttons for each item
 		items.forEach((item, index) => {
+			if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
+				isOther = true;
+			}else{
 				var radioDiv = document.createElement('div');
 				radioDiv.classList.add('radio-like-checkbox');
 
 				var radio = document.createElement('input');
 				radio.type = 'radio';
-			radio.name = 'radioChoices';
+				radio.name = `radioChoices_${key}`;
 				radio.value = item;
 				if (index == 0) radio.setAttribute('id', `${key}`);
 
@@ -1127,14 +1052,15 @@ const inputRadiolist = (key, validation) => {
 				radioDiv.appendChild(radio);
 				radioDiv.appendChild(label);
 				dropdownContent.appendChild(radioDiv);
+			}
 		});
-
+		if (isOther){
 			// Create the radio button dependent on an input text value
 			var dependentDiv = document.createElement('div');
 			dependentDiv.classList.add('radio-like-checkbox');
 			var dependentRadio = document.createElement('input');
 			dependentRadio.type = 'radio';
-		dependentRadio.name = 'radioChoices';
+			dependentRadio.name = `radioChoices_${key}`;
 			dependentRadio.value = '';
 			dependentDiv.appendChild(dependentRadio);
 
@@ -1163,12 +1089,12 @@ const inputRadiolist = (key, validation) => {
 					dependentRadio.value = event.target.value;
 				}
 			});
+		}
 
 		return dropdown1;
 	} catch (err) {
 		throw err;
 	}
-
 }
 
 /**
@@ -1184,14 +1110,19 @@ const inputGeoTag = (key, validation) => {
 	try {
 		const {
 			mandatory,
-			fieldLength
+			fieldLength,
+			collection
 		} = validation
 		//Text box to store the longitude and lattitude (for easier submission of data)
 		const input1 = document.createElement('input')
 		input1.setAttribute('id', `${key}`)
 		input1.setAttribute('name', `${key}`)
+		input1.setAttribute('class', `${collection}`)
 		input1.setAttribute('type', 'text')
 		input1.setAttribute('readonly', 'true')
+		if(collection === 'geotag'){
+			getLocation();
+		}
 
 		// Create a container div to hold both the input and the text node
 		const container = document.createElement('div');
@@ -1384,18 +1315,18 @@ const deconstruct = async (section, container, classAttribute) => {
 			} = section[key]
 
 			// Create hidden input for fields with hidden="y"
-			if (hidden && hidden.toLowerCase() === "y") {
-				const hiddenInput = document.createElement('input');
-				hiddenInput.setAttribute('type', 'hidden');
-				hiddenInput.setAttribute('name', key);
-				hiddenInput.setAttribute('value', ''); // Set the value as needed
+			// if (hidden && hidden.toLowerCase() === "y") {
+			// 	const hiddenInput = document.createElement('input');
+			// 	hiddenInput.setAttribute('type', 'hidden');
+			// 	hiddenInput.setAttribute('name', key);
+			// 	hiddenInput.setAttribute('value', ''); // Set the value as needed
 
-				// Append the hidden input to the container
-				container.appendChild(hiddenInput);
+			// 	// Append the hidden input to the container
+			// 	container.appendChild(hiddenInput);
 
-				// Skip creating other visible input elements for hidden fields
-				continue;
-			}
+			// 	// Skip creating other visible input elements for hidden fields
+			// 	continue;
+			// }
 
 			const validation = getValidation(key, schema)
 
@@ -1475,8 +1406,11 @@ const deconstruct = async (section, container, classAttribute) => {
 					break
 			}
 			input.setAttribute('class', classAttribute)
-			input.classList.add('inputField')
 			inputContainer.appendChild(input)
+			if (hidden && hidden.toLowerCase() === 'y') {
+				newField.style.display = 'none'; // Hide the input
+				newField.classList.add('hidden'); // Add 'hidden' class
+			}
 
 		}
 		//keys na drop down
@@ -1803,7 +1737,7 @@ export function clearForm() {
 		// Programatically click media close button
 		const closeButtons = document.getElementsByClassName('x');
 
-		for (let i = 0; i < xElements.length; i++) {
+		for (let i = 0; i < closeButtons.length; i++) {
 			closeButtons[i].click();
 		}
 

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

@@ -102,7 +102,7 @@ option {
     background-color: yellow;
 }
 
-.image-capture {
+.image-capture, .fingerprint-capture {
     display: flex;
     flex-direction: column;
     width: 100%;

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

@@ -61,6 +61,7 @@ const validateEmail = (validation, value) => {
     const PATTERN_EMAIL = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
     let errors = []
     const { mandatory, fieldLength } = validation
+    if(!mandatory && value.length===0) return { valid: true, errors: ['Field is empty'] }
     if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
     if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters']
     if(!value.match(PATTERN_EMAIL)) errors = [...errors, 'Contain invalid character/s']

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

@@ -16,7 +16,7 @@ export async function WriteForm(e,metrics,doctype,section) {
 
         let fields = {};
             for (var i=0;i<Nodes.length;i++) {     
-                if (Nodes[i].style.display === 'none') continue 
+                if (Nodes[i].style.display === 'none' && !Nodes[i].classList.contains('hidden')) continue 
                 let fid = Nodes[i].id;
                 if (fid == 'DocType' || fid == 'Section' || fid == '' || fid == "submitButton") continue
                 // Skip the textbox in checklist and radiolist

WebGde/WebContent/WebGde-Widgets/Submit/submit.js

@@ -7,7 +7,7 @@ import { createInfoModal } from "../genericPopup/genericPopup.js";
 import { Settings } from "./XMLWriter/Global.js";
 import { urlGetFile } from "./XMLWriter/WebServices.js";
 import { WriteForm } from "./XMLWriter/XML_Saver.js";
-import { PROJECT_CODE, TEMPORARY_FOLDER } from "./config.js";
+import { GFS_ROOT_FOLDER, GFS_URL, PROJECT_CODE, TEMPORARY_FOLDER } from "./config.js";
 
 export const submitForm = async (e) => {
 	try {
@@ -21,11 +21,15 @@ export const submitForm = async (e) => {
 
 		// Validate all elements again
 		for (let element of elements) {
-			if (element.style.display === 'none') continue
+			if (element.style.display === 'none' || element.classList.contains('hidden')) {
+				continue;
+			}			
 			const { id, value, type, name } = element		
 			// Skip submit, buttons, and files
 			if (id === 'dependentTB' ) continue;
-			if(id == 'Geo_Tag' || id === 'Altitude' || id === 'Direction') continue
+			if (element.classList.contains('geotag') || element.classList.contains('altitude') || element.classList.contains('direction')) {
+				continue;
+			}			
 			if (type === 'button') continue
 			if (type === 'submit') continue
 			if (type === 'file') continue
@@ -81,7 +85,7 @@ export const submitForm = async (e) => {
 
 		if (error) {
 			if (errorMsg !== null) {
-				createInfoModal(null, 'OK', 'errorMsg');
+				createInfoModal(null, 'OK', errorMsg);
 			} else {
 				createInfoModal(null, 'OK', 'Invalid or Missing data on highlighted fields!');
 			}
@@ -107,7 +111,7 @@ export const submitForm = async (e) => {
 				// await uploadTOGFS(await getFile.text(), sessionStorage.getItem("recentlySavedFileName"));
 
 			}
-			saveForm(sessionStorage.getItem("display_counter"));
+			// saveForm(sessionStorage.getItem("display_counter"));
 		}
 		return true
 	} catch (err) {
@@ -159,3 +163,71 @@ export async function batchUpload(Form){
 	}
 }
 
+async function uploadTOGFS(stream, filename){   
+    await checkIfFolderExists(GFS_ROOT_FOLDER+"/"+sessionStorage.getItem("user_id"), "uploads");
+    await checkIfFolderExists(GFS_ROOT_FOLDER+"/"+sessionStorage.getItem("user_id")+"/uploads", PROJECT_CODE);
+    
+    let xml = new File([stream], filename, {type: "text/plain"});
+    let formData = new FormData();
+
+    formData.append("file", xml);
+    formData.append("parentPath", GFS_ROOT_FOLDER+"/"+sessionStorage.getItem("user_id")+ "/uploads/"+PROJECT_CODE);
+    formData.append("extraData", "{}");
+    // formData.append("remarks", "Non-BPO Upload");
+    // formData.append("description", "");
+    formData.append("isSudo", false);
+    // formData.append("inheritFolderMetadata", "");
+    // formData.append("hash", "");
+    // formData.append("isSigned", "");
+   
+    let response = await fetch(GFS_URL + "add-file", {
+        method: "PUT",
+        headers: {
+            'Authorization': sessionStorage.getItem("token"),
+            //'Authorization': token,
+            'Accept-Encoding': "gzip, deflate, utf-8",
+            'Accept': "*/*"
+        },
+        body: formData
+    });
+
+	console.log(response);
+}
+
+async function checkIfFolderExists(parentPath, folderName ){
+    let url = GFS_URL + "check-folder?" + new URLSearchParams({folderPath: parentPath+"/"+folderName , isSudo: false });
+    let response = await fetch(url, {
+        method: "GET",
+        headers: {
+            'Authorization': sessionStorage.getItem("token"),
+        },
+    });
+
+    let result = await response.json;
+
+    if(result !== null && result.isExists === false){
+       let createObj = {
+        "folderName": folderName,
+        "parentPath": parentPath,
+        "extraData": "{}",
+        "isSudo": false,
+         // "remarks": "Non-BPO Upload",
+        // "description": "",
+        // "inheritFolderMetadata":"",
+        // "hash":"",
+        // "isSigned": ""
+       }
+       await createGFSFolder(createObj);
+    }
+    
+}
+
+async function createGFSFolder(jsonObj){
+    let response = await fetch(GFS_URL + "add-folder", {
+        method: "PUT",
+        headers: {
+            'Authorization': sessionStorage.getItem("token"),
+        },
+        body: jsonObj
+    });
+}

WebGde/WebContent/WebGde-Widgets/config.js

-/**
- * for testing purposes, below are different files to be used showing
- * some possible configurations of the file
- */
-
-
-// schema with no "SECTION" key
-// const SCHEMA_FILE = "./src/sample_schema/no_section.json"
-
-// schema with missing fields (fieldLabel, validation)
-// const SCHEMA_FILE = "./src/sample_schema/missing_fields.json"
-
-// schema with 20 fields
-// const SCHEMA_FILE = "./src/sample_schema/20_field_schema.json"
-
-// schema with 15 fields
-// const SCHEMA_FILE = "./src/sample_schema/15_field_schema.json"
-
-// schema with 10 fields
-// const SCHEMA_FILE = "./src/sample_schema/10_field_schema.json"
-
-// schema with 5 fields and all possible collections
-//const SCHEMA_FILE = "./src/sample_schema/5_field_schema.json"
-
-/*export const  SCHEMA_FILE = "./src/sample_schema/SC Schema.json"*/
-
 export const SCHEMA_FILE = "./src/sample_schema/HR Speed Test schema.json"
 
-//const INPUT_FILES = ["./input/Ong, Mae Janica - Application Form.TIFF","./input/Magalona, Rowell James - Application Form.TIFF","./input/Felizardo, Brylle Theodure - Application Form.TIFF","./input/Laxamana, Conrad John - Application Form.TIFF"]  // list of URLs
-
 export const INPUT_FOLDER = "./input/"
 
 export const OUTPUT_FILES = "../../output/"
@@ -38,7 +10,7 @@ export const  HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.
 export const ROOT_FOLDER = "/WebGde-Widgets";
 
 //this determines if the images will be retrieved from the gfs
-export const  DOMAIN = "http://18.204.18.121:8080"
+export const  DOMAIN = "http://54.157.29.8:8080"
 export const  CONTEXTROOT = "gfs-explorer-ws"
 export const  GDE_URL = DOMAIN + "/MobileGde/svc/gfs-rest"
 export const  FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
@@ -63,7 +35,5 @@ export const  PNG_EXTENSION = ".png"
 
 export const  REASON_LIST = "Reason1,Reason2,Reason3,Reason4"
 
-
-
 //KEYCLOAK CONFIG
 window.REDIRECT_URL = 'http://auth-server/auth/realms/GFS/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri';

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

 import { submitForm } from '../Submit/submit.js';
 import { ROOT_FOLDER } from '../config.js';
+import { createInfoModal } from '../genericPopup/genericPopup.js';
 import { BPO_OBJECT, DISPLAY_FIELD_OBJECT, DOCUMENT_CONTROL_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from '../globalVariable.js';
 
 export class DocumentControlWidget {
@@ -43,6 +44,7 @@ export class DocumentControlWidget {
 
             if (isSuccessful) {         
                 DISPLAY_FIELD_OBJECT.clearForm();
+                createInfoModal(null, 'ok', 'Form Submitted.');
             }
         }
 

WebGde/WebContent/WebGde-Widgets/genericPopup/genericPopup.js

@@ -45,7 +45,7 @@ export function createModal(okButtonAction, popupTitleText) {
 
   var popupContent = document.createElement("div");
   popupContent.id = "popupContent";
-  var popupTitle = document.createElement("h2");
+  var popupTitle = document.createElement("p");
   popupTitle.textContent = popupTitleText;
   popupContent.appendChild(popupTitle);
   popupContent.appendChild(okButton);
@@ -118,7 +118,7 @@ export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
 
   var popupContent = document.createElement("div");
   popupContent.id = "popupContent";
-  var popupTitle = document.createElement("h2");
+  var popupTitle = document.createElement("p");
   popupTitle.textContent = popupTitleText;
   popupContent.appendChild(popupTitle);
   popupContent.appendChild(okButton);

WebGde/WebContent/WebGde-Widgets/sample_schema/08-30-test.json

+{
+	"SAMPLE FIELDS": {
+		"Doctype 1": {
+            "Image1":{
+				"fieldLabel": "Image1",
+				"aka": "field5",
+				"validation": {
+					"collection": "image-capture",
+					"mandatory": false
+				}
+			},
+			"Checkbox_List": {
+				"fieldLabel": "Checkbox List",
+				"aka": "field16",
+				"source": "s",
+				"validation": {
+					"collection": "checklist",
+					"items": [
+						"sample-item1",
+						"sample-item2",
+						"sample-item3",
+						"sample-item4",
+						"sample-item5"
+					],
+					"mandatory": false
+				}
+			},
+            "Radio_List": {
+                "fieldLabel": "Radio List",
+                "aka": "field4",
+                "source": "s",
+                "validation": {
+                    "collection": "radiolist",
+                    "items": [
+                        "sample-item1",
+                        "sample-item2",
+                        "sample-item3",
+                        "sample-item4",
+                        "sample-item5"
+                    ],
+                    "mandatory": false
+                }
+            },
+            "Time": {
+                "fieldLabel": "Time",
+                "aka": "field5",
+                "validation": {
+                    "collection": "timepicker",
+                    "mandatory": false
+                }
+            },
+            "Geo_Tag": {
+                "fieldLabel": "Geo Tag",
+                "aka": "field40",
+                "validation": {
+                    "fieldLength": 100,
+                    "collection": "geotag"
+                },
+                "hidden":"y"
+            },
+            "Altitude": {
+                "fieldLabel": "Altitude",
+                "aka": "field6",
+                "validation": {
+                    "fieldLength": 100,
+                    "collection": "altitude"
+                },
+                "hidden":"y"
+            },
+            "Direction": {
+                "fieldLabel": "Direction",
+                "aka": "field70",
+                "validation": {
+                    "fieldLength": 100,
+                    "collection": "direction"
+                },
+                "hidden":"y"
+            }                      
+		}
+	}
+}
\ No newline at end of file

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

+{
+    "FINGERPRINT": {
+        "LEFT HAND": {
+            "Image1":{
+				"fieldLabel": "Image1",
+				"aka": "field20",
+				"validation": {
+					"collection": "image-capture",
+					"mandatory": false
+				}
+			},
+            "Left Little": {
+                "fieldLabel": "Left Little",
+                "aka": "field1",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Left Ring": {
+                "fieldLabel": "Left Ring",
+                "aka": "field2",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Left Middle": {
+                "fieldLabel": "Left Middle",
+                "aka": "field3",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Left Index": {
+                "fieldLabel": "Left Index",
+                "aka": "field4",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Left Thumb": {
+                "fieldLabel": "Left Thumb",
+                "aka": "field5",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            }
+        },
+        "RIGHT HAND": {
+            "Right Little": {
+                "fieldLabel": "Right Little",
+                "aka": "field6",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Right Ring": {
+                "fieldLabel": "Right Ring",
+                "aka": "field7",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Right Middle": {
+                "fieldLabel": "Right Middle",
+                "aka": "field8",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Right Index": {
+                "fieldLabel": "Right Index",
+                "aka": "field9",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            },
+            "Right Thumb": {
+                "fieldLabel": "Right Thumb",
+                "aka": "field10",
+                "validation": {
+                    "collection": "fingerprint",
+                    "mandatory": false
+                }
+            }
+        }
+    }
+}

WebGde/WebContent/style.css

@@ -289,7 +289,7 @@ input[type=radio] {
     display: none;
 }
 
-.image-capture {
+.image-capture, .fingerprint-capture {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -408,6 +408,7 @@ select {
 }
 
 textarea {
+    width: 100%;
     resize: none;
 }
 
@@ -695,7 +696,7 @@ span#filename {
         background-color: yellow;
     }
 
-    .image-capture {
+    .image-capture, .fingerprint-capture {
         display: flex;
         flex-direction: column;
         width: 100%;