As a hardware engineer venturing into the realm of creating an in-house software tool, I initially thought it would be a straightforward process. However, I've encountered a plethora of unknowns hindering my progress.
My goal is to develop an internal software solution for order management, complete with a valid JSON Schema. Specifically, I aim to establish a webpage where users can input order information via a web form, which will then be stored as a JSON text file. Additionally, I want the ability to load an existing JSON file, pre-fill the form with current data, make modifications, and save the changes.
While I have experience using php and mysql for similar tasks, I opt for utilizing JSON files this time around to facilitate software adjustments without dealing with database structure intricacies. Moreover, I view this project as a valuable learning opportunity.
Currently, I am exploring auto-generated forms through schemaform.io and have successfully implemented the following code:
<!DOCTYPE html>
<html >
<head>
</head>
<body ng-app="test" ng-controller="FormController">
<form name="ngform"
sf-schema="schema"
sf-form="form"
sf-model="model"></form>
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
</script>
<script>
/*
$.getJSON("data/order.json", function(orderTemplateJson) {
console.log(orderTemplateJson); // this will show the info it in firebug console
$scope.$broadcast('schemaFormRedraw')
});
*/
var app = angular.module('test',['schemaForm']);
app.controller('FormController', function($scope,$http){
$scope.schema = {
// A long long string of text goes here
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
})
</script>
</body>
</html>Next on my agenda is loading the JSON schema from a separate file. Attempting to do so within the callback of a getJSON call resulted in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module test due to: Error: [$injector:nomod] Module 'test' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
$.getJSON("data/order.json", function(orderTemplateJson) {
console.log(orderTemplateJson);
//Moved all the angular module code to here
});Making various attempts to resolve this issue has proved challenging, mainly due to a lack of expertise in this area. Any guidance provided would be immensely appreciated.
Furthermore, I seek tips on how to pre-load form data from a JSON file that adheres to the schema requirements. Your assistance is highly valued.
Thank you,
/ Martin