Native characters in Eclipse HTML Forms are not correctly displayed in Tasklist


#1

Hi to all.

My issue is that I want to display some headings of my user task forms in my native language (Greek) and so I 've written these headings in Greek in my Eclipse html forms.
The problem as you can see in my screenshots is that they are not correctly displayed in the Tasklist interface.

<form role="form" name="startForm">
	<h2>Ώρα για προμήθειες</h2>  
</form>

I suppose that I have to modify some settings in my Eclipse.
Does anyone know please?

Thank you,
Steve


#2

Hi @steftriant
Make sure you have saved the file in UTF-8 encoding
Using Notepad:
Open the file, Go to "File -> Save As… " and choose UTF-8 under “Encoding:”, press “Save” and overwrite existing file.


#3

Hi @hassang.

Many thanks, my issue has just been solved here https://stackoverflow.com/questions/50336820/greek-letters-arent-displayed-in-my-web-browsers-page/50337257#50337257.
But, as I just asked in that topic, I would like to know how could I apply that way in case I’ve included both html and javascript in my code. Like this for example:

<form role="form" name="insertForm" accept-charset="utf-8">
	<script cam-script type="text/form-script">
		var product = $scope.product = [];																						// Custom JavaScript creates a JavaScript Object and binds it to the current AngularJS $scope of the form as a variable named "product".															                                                        
		$scope.addProduct = function () {																						// We make a function named "addProduct".
			var product = {};																									// We add a new "product" to the Array.
			product.Category = $scope.Category;
			product.Description = $scope.Description;
			if (!!$scope.camForm.fields[0].element[0].files[0]) {
				product.Details = $scope.camForm.fields[0].element[0].files[0].name;											// We check whether a file is uploaded.
			} else {
					return;																										// If no file is uploaded, it returns "undefined".
			}
			product.Price = $scope.Price;
			$scope.product.push(product);																						// We use the value of the "product" input field to add a new "product" to the Array.
			$scope.Category = "";																								// We clear the TextBox "���������".
			$scope.Description = "";																							// We clear the TextBox "���������".
			$scope.Details = "";																								// We clear the TextBox "������������".
			$scope.Price = "";																									// We clear the TextBox "����".
		};
		$scope.removeProduct = function (index) {																				// We make a function named "removeProduct". 					
			var category = $scope.product[index].Category;																		// We find product's Category using "index" from the Array and binds it to the current AngularJS $scope of the form as a variable named "category".
			$scope.product.splice(index, 1);																					// We use an index to remove a "product" from the Array.
		}
		$scope.isAddFormValid = function () {																					// We make a function named "isAddFormValid".
			return ($scope.Category &&
					$scope.Description &&
					$scope.camForm.fields[0].element[0].files[0] &&
					$scope.Price) ? true : false;																				// If all of the 4 parameters of variable "product" are added, the value will be "true", otherwise the value will be "false".
		}
		camForm.on('form-loaded', function() {																					// We hook into the lifecycle of Camunda SDK JS Form.
			camForm.variableManager.createVariable ({																			// We "create" (declare) a new process variable  
					name:'product',																								// named 'product' and
					type:'json',																								// provide as type information 'json' used for serialization.
					value:product
			});
		});
		camForm.on('submit', function(evt) {																					// We hook into the lifecycle of Camunda SDK JS Form.
			if (product.length<1) {																								// If no "product" is added,
				evt.submitPrevented = true;																						// an event handler prevents the form from being submitted by setting the property "submitPrevented" to 'true'.
			}
		});
	</script>
	<h2><b>����� ���������</b></h2>																								<!-- We set the heading of the HTML Table. -->
	<div>													
		<table style="width:100%;">																								
			<thead>																												<!-- We group the header content in the HTML Table. -->
				<tr>																											<!-- The header content of the HTML Table is not repeated. -->																											
					<th style="width:140px;">���������</th>
					<th style="width:305px;">���������</th>
					<th style="width:250px;">������������</th>
					<th style="width:75px;" >���� (�)</th>
					<th></th>
				</tr>
			</thead>
			<tbody ng-repeat="x in product track by $index">																	<!-- The HTML Table is populated from the JSON Array "product", using a "ng-repeat" directive which is assigned to each row of the Table in order to repeat all the objects of the Array. -->
				<tr>																											<!-- Each row of the HTML Table consists of 4 HTML Input Form fields and 1 button. -->													
					<td><input style="width:140px;" type="text" value="{{x.Category}}" /></td>						
					<td><input style="width:305px;" type="text" value="{{x.Description}}" /></td>
					<td><input style="width:250px;" type="text" value="{{x.Details}}" /></td>	
					<td><input style="width:75px;"  type="number" value="{{x.Price}}" /></td>
					<td><input type="button" ng-click="removeProduct($index)" value="Remove" /></td>							<!-- The "ng-click" directive is assigned to the "Remove" button and calls the function named "removeProduct" with the current "$index" when this button is clicked. -->
				</tr>
			</tbody>
		</table>
	</div>
	<hr>																														<!-- We separate the HTML content. -->
	<div>
		<h2><b>���������� ��� ������</b></h2>																					<!-- We set the heading of the HTML Form. -->
		<div class="row">																										<!-- We set the "1st row" of the HTML Form. -->	
			<div class="col-md-6">																								<!-- We use "md" for "medium" screen devices of width equal to or greater than 992px and "6" for adding 6 columns. -->															
				<div class="form-group">																						<!-- We use "form-group" for optimum spacing. -->
					<label class="control-label" for="category">���������</label>
					<div class="controls">
						<input style="width:140px;" id="category" type="text" ng-model="Category" />							<!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Category" in AngularJS. -->
					</div>
				</div>
			</div>
			<div class="col-md-6">																								
				<div class="form-group">
					<label class="control-label" for="Description">���������</label>
					<div class="controls">
						<input style="width:305px;" id="Description" type="text" ng-model="Description" />						<!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Description" in AngularJS. -->	
					</div>
				</div>
			</div>
		</div>
		<div class="row">																										<!-- We set the "2nd row" of the HTML Form. -->
			<div class="col-md-6">
				<div class="form-group">
					<label class="control-label" for="Details">������������</label>
					<div class="controls">
						<input style="width:250px;"
							   id="Details"
							   type="file"
							   cam-variable-name="Details"
							   cam-variable-type="File"
							   cam-max-filesize="10000000" ng-model="Details" />												<!-- The "ng-model" directive binds the value of the "������������" input field to the created variable "Details" in AngularJS. -->
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="form-group">
					<label class="control-label" for="price">���� (�)</label>
					<div class="controls">
						<input style="width:75px;" id="price" type="number" ng-model="Price" />									<!-- The "ng-model" directive binds the value of the "���� (�)" input field to the created variable "Price" in AngularJS. -->
					</div>
				</div>
			</div>
		</div>
		<div class="row">																										<!-- We set the "3rd row" of the HTML Form. -->
			<div class="col-md-4">																								<!-- We use "md" for medium screen devices of width equal to or greater than 992px and "4" for adding 4 columns. -->
				<div class="controls">
					<input type="button" ng-click="addProduct()" ng-show="isAddFormValid()" value="Add" />						<!-- The "ng-show" directive shows the input element ("Add" button) only if the "isAddFormValid()" expression (function) returns "true". The "ng-click" directive is assigned to the "Add" button and calls the function named "addProduct()" when this button is clicked. -->
				</div>
			</div>
		</div>
	</div>
</form>

When I applied exactly the same way, it didn’t work :confused:

Steve


#4

Hi @steftriant,
In case you didn’t,
Please try to save the html file in UTF-8 encoding as follow

Using Notepad:
Open the file, Go to "File -> Save As… " and choose UTF-8 under “Encoding:”, press “Save” and overwrite existing file.


#5

Hi @hassang,

Thanks for your feedback but I don’t write my html forms in Notepad.
Instead, I 've been using the Eclipse editor. I’ve tried what you explain here, but this isn’t the problem. I think that it has to do with the metadata inside the html code.

Steve


#6

Hi again to all.

I would like to ask how could I correctly display in my web page native characters from an eclipse html form which includes a script call.
I’ve tried to do some things but with no any success until now. :confused:
If you take a look at my following code, you will notice the question symbols istead of the native charactes in my html headings.

<!DOCTYPE html>
<html lang="en">
	<head>																																
		<meta charset="UTF-8">																											
		<meta name="viewport" content="width=device-width, initial-scale=1.0">															
		<meta http-equiv="X-UA-Compatible" content="ie=edge">																			
		<title>Document</title> 																										
	</head>
	<body>
		<form role="form" name="insertForm" accept-charset="utf-8">
			<h2><b>����� ���������</b></h2>																								<!-- We set the heading of the HTML Table. -->
			<div>													
				<table style="width:100%;">																								
					<thead>																												<!-- We group the header content in the HTML Table. -->
						<tr>																											<!-- The header content of the HTML Table is not repeated. -->																											
							<th style="width:140px;">���������</th>
							<th style="width:305px;">���������</th>
							<th style="width:250px;">������������</th>
							<th style="width:75px;" >���� (�)</th>
							<th></th>
						</tr>
					</thead>
					<tbody ng-repeat="x in product track by $index">																	<!-- The HTML Table is populated from the JSON Array "product", using a "ng-repeat" directive which is assigned to each row of the Table in order to repeat all the objects of the Array. -->
						<tr>																											<!-- Each row of the HTML Table consists of 4 HTML Input Form fields and 1 button. -->													
							<td><input style="width:140px;" type="text" value="{{x.Category}}" /></td>						
							<td><input style="width:305px;" type="text" value="{{x.Description}}" /></td>
							<td><input style="width:250px;" type="text" value="{{x.Details}}" /></td>	
							<td><input style="width:75px;"  type="number" value="{{x.Price}}" /></td>
							<td><input type="button" ng-click="removeProduct($index)" value="Remove" /></td>							<!-- The "ng-click" directive is assigned to the "Remove" button and calls the function named "removeProduct" with the current "$index" when this button is clicked. -->
						</tr>
					</tbody>
				</table>
			</div>
			<hr>																														<!-- We separate the HTML content. -->
			<div>
				<h2><b>���������� ��� ������</b></h2>																						<!-- We set the heading of the HTML Form. -->
				<div class="row">																										<!-- We set the "1st row" of the HTML Form. -->	
					<div class="col-md-6">																								<!-- We use "md" for "medium" screen devices of width equal to or greater than 992px and "6" for adding 6 columns. -->															
						<div class="form-group">																						<!-- We use "form-group" for optimum spacing. -->
							<label class="control-label" for="category">���������</label>
							<div class="controls">
								<input style="width:140px;" id="category" type="text" ng-model="Category" />							<!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Category" in AngularJS. -->
							</div>
						</div>
					</div>
					<div class="col-md-6">																								
						<div class="form-group">
							<label class="control-label" for="Description">���������</label>
							<div class="controls">
								<input style="width:305px;" id="Description" type="text" ng-model="Description" />						<!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Description" in AngularJS. -->	
							</div>
						</div>
					</div>
				</div>
				<div class="row">																										<!-- We set the "2nd row" of the HTML Form. -->
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label" for="Details">������������</label>
							<div class="controls">
								<input style="width:250px;"
							   		   id="Details"
							   		   type="file"
							   		   cam-variable-name="Details"
							           cam-variable-type="File"
							           cam-max-filesize="10000000" ng-model="Details" />												<!-- The "ng-model" directive binds the value of the "������������" input field to the created variable "Details" in AngularJS. -->
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label" for="price">���� (�)</label>
							<div class="controls">
								<input style="width:75px;" id="price" type="number" ng-model="Price" />									<!-- The "ng-model" directive binds the value of the "���� (�)" input field to the created variable "Price" in AngularJS. -->
							</div>
						</div>
					</div>
				</div>
				<div class="row">																										<!-- We set the "3rd row" of the HTML Form. -->
					<div class="col-md-4">																								<!-- We use "md" for medium screen devices of width equal to or greater than 992px and "4" for adding 4 columns. -->
						<div class="controls">
							<input type="button" ng-click="addProduct()" ng-show="isAddFormValid()" value="Add" />						<!-- The "ng-show" directive shows the input element ("Add" button) only if the "isAddFormValid()" expression (function) returns "true". The "ng-click" directive is assigned to the "Add" button and calls the function named "addProduct()" when this button is clicked. -->
						</div>
					</div>
				</div>
			</div>
			<script src="insert-products-and-specifications.js" charset="utf-8" cam-script type="text/form-script"></script>			<!-- We call the external script file ("insert-products-and-specifications.js"). -->
		</form>
	</body>
</html>

I’ve also set the UTF-8 as the default encoding in my editor.

Thanks,
Steve