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
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.
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
Steve
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.
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
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.
If you take a look at my following code, you will notice the question symbols instead of the native characters 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
Hi @steftriant,
please check and maybe change the following preferences in your eclipse.
- The encoding of the text editor should be UTF-8.
– General -> Editors -> Text Editors -> Spelling -> Encoding -> Default UTF-8
- The encoding for the HTML files should be UTF-8. For that, you can configure to use the workspace encoding.
– Web -> HTML-Files -> Use workspace encoding
- The encoding of your workspace should be UTF-8.
– General -> Workspace -> Text file encoding -> Other -> UTF-8
You should also check the encoding of your resource. For that, please click with the right mouse button on your eclipse project and choose Properties
. In the new opened window, click on Resource
and check the value of the Text file encoding
.
Hope, it helps!
Cheers
kristin
2 Likes
Hi @kristin.
Yes, you really helped me, I’m very enthusiastic
I changed all these settings in my eclipse and the issue is over now.
I would like also to ask you, if it’s necessary now to keep the head section with metadata and some attributes such as “lang” and accept-charset in my code.
You can take a look at my snippet if you want:
<!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>
Many thanks,
Steve
Hi @steftriant,
I think your head section looks fine and you should keep the stuff.
You could delete the lang
attribute of the html
tag. I would say, it is not necesary.
Cheers
kristin
1 Like