Changed implementation for generating "others" field in options.

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

@@ -466,60 +466,67 @@ 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) {
-			var div = document.createElement('div');
-			div.classList.add('checkbox');
-
-			var checkbox = document.createElement('input');
-			checkbox.type = 'checkbox';
-			checkbox.name = 'checkboxChoices';
-			checkbox.value = item;
-			if (index == 0) checkbox.setAttribute('id', `${key}`);
-
-			div.appendChild(checkbox);
-			var label = document.createTextNode(item);
-			div.appendChild(label);
-			dropdownContent.appendChild(div)
+			if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
+				isOther = true;
+			}else{
+				var div = document.createElement('div');
+				div.classList.add('checkbox');
+
+				var checkbox = document.createElement('input');
+				checkbox.type = 'checkbox';
+				checkbox.name = 'checkboxChoices';
+				checkbox.value = item;
+				if (index == 0) checkbox.setAttribute('id', `${key}`);
+
+				div.appendChild(checkbox);
+				var label = document.createTextNode(item);
+				div.appendChild(label);
+				dropdownContent.appendChild(div)
+			}
 		})
-
-		// Create the checkbox dependent on an input text value
-		var dependentDiv = document.createElement('div');
-		dependentDiv.classList.add('checkbox');
-		var dependentCheckbox = document.createElement('input');
-		dependentCheckbox.type = 'checkbox';
-		dependentCheckbox.name = 'checkboxChoices';
-		dependentCheckbox.id = 'checkDP';
-		dependentCheckbox.value = ''; // Set the value here based on the input text
-		dependentDiv.appendChild(dependentCheckbox);
-
-		var dependentLabel = document.createTextNode('other');
-		dependentDiv.appendChild(dependentLabel);
-		dropdownContent.appendChild(dependentDiv);
 		
-		// Initially hide the input text box
-		var inputTextBox = document.createElement('input');
-		inputTextBox.type = 'text';
-		inputTextBox.id = 'dependentTB';
-		inputTextBox.style.display = 'none';
-		inputTextBox.style.padding = '0px';
-		dropdownContent.appendChild(inputTextBox);
-
-		// Add event listener to the "other" checkbox
-		dependentCheckbox.addEventListener('change', function () {
-			if (dependentCheckbox.checked) {
-				inputTextBox.style.display = 'inline-block';
-			} else {
-				inputTextBox.style.display = 'none'; // Hide the input text box when "other" checkbox is unchecked
-			}
-			// Update the value of the dependentCheckbox when the input value changes
-			dependentCheckbox.value = inputTextBox.value;
-		});
+		if(isOther){
+			// Create the checkbox dependent on an input text value
+			var dependentDiv = document.createElement('div');
+			dependentDiv.classList.add('checkbox');
+			var dependentCheckbox = document.createElement('input');
+			dependentCheckbox.type = 'checkbox';
+			dependentCheckbox.name = 'checkboxChoices';
+			dependentCheckbox.id = 'checkDP';
+			dependentCheckbox.value = ''; // Set the value here based on the input text
+			dependentDiv.appendChild(dependentCheckbox);
+
+			var dependentLabel = document.createTextNode('other');
+			dependentDiv.appendChild(dependentLabel);
+			dropdownContent.appendChild(dependentDiv);
+			
+			// Initially hide the input text box
+			var inputTextBox = document.createElement('input');
+			inputTextBox.type = 'text';
+			inputTextBox.id = 'dependentTB';
+			inputTextBox.style.display = 'none';
+			inputTextBox.style.padding = '0px';
+			dropdownContent.appendChild(inputTextBox);
+
+			// Add event listener to the "other" checkbox
+			dependentCheckbox.addEventListener('change', function () {
+				if (dependentCheckbox.checked) {
+					inputTextBox.style.display = 'inline-block';
+				} else {
+					inputTextBox.style.display = 'none'; // Hide the input text box when "other" checkbox is unchecked
+				}
+				// Update the value of the dependentCheckbox when the input value changes
+				dependentCheckbox.value = inputTextBox.value;
+			});
 
-		inputTextBox.addEventListener("input", event => {
-			dependentCheckbox.value = event.target.value;
-		});
+			inputTextBox.addEventListener("input", event => {
+				dependentCheckbox.value = event.target.value;
+			});
+		}
 
 		return dropdown1;
 	} catch (err) {
@@ -546,58 +553,64 @@ 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) => {
-			var radioDiv = document.createElement('div');
-			radioDiv.classList.add('radio-like-checkbox');
-
-			var radio = document.createElement('input');
-			radio.type = 'radio';
-			radio.name = 'radioChoices';
-			radio.value = item;
-			if (index == 0) radio.setAttribute('id', `${key}`);
-
-			var label = document.createTextNode(item);
-			radioDiv.appendChild(radio);
-			radioDiv.appendChild(label);
-			dropdownContent.appendChild(radioDiv);
-		});
-
-		// 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.value = '';
-		dependentDiv.appendChild(dependentRadio);
-
-		var dependentLabel = document.createTextNode('other');
-		dependentDiv.appendChild(dependentLabel);
-		dropdownContent.appendChild(dependentDiv);
-
-		var inputTextBox = document.createElement('input');
-		inputTextBox.type = 'text';
-		inputTextBox.id = 'dependentTB';
-		inputTextBox.style.display = 'none';
-		inputTextBox.style.padding = '0px';
-		dropdownContent.appendChild(inputTextBox);
-
-		// Add event listener to the "other" radio button
-		dependentRadio.addEventListener('change', function () {
-			if (dependentRadio.checked) {
-				inputTextBox.style.display = 'inline-block';
-			} else {
-				inputTextBox.style.display = 'none'; // Hide the input text box when "other" radio button is unchecked
+			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.value = item;
+				if (index == 0) radio.setAttribute('id', `${key}`);
+
+				var label = document.createTextNode(item);
+				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.value = '';
+			dependentDiv.appendChild(dependentRadio);
+
+			var dependentLabel = document.createTextNode('other');
+			dependentDiv.appendChild(dependentLabel);
+			dropdownContent.appendChild(dependentDiv);
+
+			var inputTextBox = document.createElement('input');
+			inputTextBox.type = 'text';
+			inputTextBox.id = 'dependentTB';
+			inputTextBox.style.display = 'none';
+			inputTextBox.style.padding = '0px';
+			dropdownContent.appendChild(inputTextBox);
+
+			// Add event listener to the "other" radio button
+			dependentRadio.addEventListener('change', function () {
+				if (dependentRadio.checked) {
+					inputTextBox.style.display = 'inline-block';
+				} else {
+					inputTextBox.style.display = 'none'; // Hide the input text box when "other" radio button is unchecked
+				}
+			});
 
-		inputTextBox.addEventListener("input", event => {
-			if (dependentRadio.checked) {
-				dependentRadio.value = event.target.value;
-			}
-		});
+			inputTextBox.addEventListener("input", event => {
+				if (dependentRadio.checked) {
+					dependentRadio.value = event.target.value;
+				}
+			});
+		}
 
 		return dropdown1;
 	} catch (err) {
@@ -815,6 +828,7 @@ const deconstruct = async (section, container, classAttribute) => {
 				case 'textarea':
 				case 'alphanumeric':
 				case 'alphabet':
+				case 'email':
 					input = inputString(key, validation)
 					break
 				case 'specific':

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

@@ -73,7 +73,7 @@
         "validation" : {
           "fieldLength" : 20.0,
           "collection" : "radiolist",
-          "items" : [ "Emergency Room", "Inpatient", "Outpatient" ],
+          "items" : [ "Emergency Room", "Inpatient", "Outpatient", "others" ],
           "mandatory" : true
         }
       },