Simple Form Examples

The First Form

In this first example, we automatically generate a form from a simple JSON schema. The schema is read from schema.js, which directly assigns the schema to a variable called dataModel, that is used as input for the Metadata Editor Form. In addition, the form type is provided, which is in our case CREATE, which means we start with an empty form where all fields are editable. Thus, the parameter object looks as follows: 

var options = {
	operation: "CREATE",
	dataModel: this.dataModel
};
Using these parameters, we can now insert the form into the page. It takes the options object for parameterization and renders where the <form id="plain"></form> tags are located in this HTML file: 
$('#plain').metadataeditorForm(options, (value) => {
	var resource = value;
	JSON.parse(JSON.stringify(resource));
	Console.log(resource);
});
Furthermore, the form received a callback function, which prints the resulting object at the console as soon as CREATE is clicked.

A More Appealing Form

Now, it's time to work on a more user-friendly representation of the form. There are two things we are doing:

  • Apply a UI Schema
  • Overwrite the default submit button label
The UI Schema we include from the file schema.js, which assigns the schema to a variable called uiSchema. The resulting options object now looks as follows: 
var options = {
	operation: "CREATE",
	dataModel: this.dataModel
	uiForm: this.uiSchema,
	buttonTitle: "Submit"
};
In addition to providing the uiForm property you also see, that we provide buttonTitle which overwrites the default label of the submit button. Having this done, the form is rendered where the <form id="with-schema></form> tags are located using the following JavaScript call: 
$('#with-schema').metadataeditorForm(options, (value) => {
	var resource = value;
	JSON.parse(JSON.stringify(resource));
	Console.debug(resource);
});

A Form with Data

Finally, we will learn how to add some data to show in the form. Therefore, we have a file data.js which contains a variable resource defining the input of our form. Furthermore, we have to change the options for parameterizing our form as follows: 

var options = {
	operation: "READ",
	dataModel: this.dataModel,
	uiForm: this.uiSchema,
	resource: this.resource,
	buttonTitle: "Update"
};
As you can see, we changed to operation to READ, as operation CREATE does not accept any inputs. This input is provided by property resource pointing to this.resource which comes from data.js. The result is rendered where the <form id="with-data"></form> tags are located using the following JavaScript call: 
$('#with-data').metadataeditorForm(options, () => {});

For READ forms no callbacks are supported as they are purely for visualization. Thus, the callback function remains empty in this example.