Hi to all.
Based on this link Getting started - jsGrid, I followed the steps in order to create a grid for my HTML Table. For this purpose, I decided to apply a jQuery plugin named jsGrid.
My problem is that I can’t load my html form as I take this message:
Does anyone know please why do I take this error message?
My script:
<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]) { // If the file is uploaded,
product.Details = $scope.camForm.fields[0].element[0].files[0].name; // it returns file's "name".
} else { // If the file is not uploaded,
return; // 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 file's "name".
$scope.Price = ""; // We clear the TextBox "Τιμή (€)".
};
$scope.clear = function () { // We make a function named "clear".
angular.element("input[type='file']").val(null);
};
$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 input fields of variable "product" are filled in, the "isAddFormValid" function (expression) returns "true", otherwise the function returns "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 any "product" is added,
evt.submitPrevented = true; // an event handler prevents the form from being submitted by setting the property "submitPrevented" to 'true'.
}
});
var category = [
{ Name: "", Id: 0 },
{ Name: "Desktop", Id: 1 },
{ Name: "Laptop", Id: 2 },
{ Name: "Tablet", Id: 3 },
{ Name: "Οθόνη Υπολογιστή", Id: 4 },
{ Name: "Οθόνη Προβολής", Id: 5 },
{ Name: "Εκτυπωτής laser", Id: 6 },
{ Name: "Φωτοτυπικό Μηχάνημα", Id: 7 },
{ Name: "Scanner", Id: 8 },
{ Name: "UPS", Id: 9 },
{ Name: "Διαδικτυακή Συσκευή Αποθήκευσης", Id: 10 },
{ Name: "Εξωτερικός Σκληρός Δίσκος", Id: 11 },
{ Name: "Προτζέκτορας", Id: 12 },
{ Name: "Βιντεοπροτζέκτορας", Id: 13 }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: product,
fields: [
{ name: "Κατηγορία", type: "select", items: category, valueField: "Id", textField: "Name" },
{ name: "Περιγραφή", type: "text" },
{ name: "Λεπτομέρειες", type: "text" },
{ name: "Τιμή (€)", type: "number", width: 75 },
{ type: "control" }
]
});
</script>
Thanks,
Steve