### Enhanced Form Examples

#### The First Table

After we've learned how to create a form for a single resource, we continue with handling multiple resource. In terms of the Metadata Editor this means, that we use a table first, to show all resources and show a certain form based on the selection within the table. Let's start with the table itself. The Metadata Editor makes use of the Tabulator library, which requires a certain amount of parameters in order to render an appropriate table. The first parameter object defines the table's colums:

    var columns = [
    	{title: "Given Name", field: "givenName", headerSort: false},
    	{title: "Family Name", field: "familyName", headerSort: false},
    	{title: "Age", field: "age", headerSort: false},
    	{title: "Gender", field: "gender", headerSort: false}
    ];

As you can see, we are using the same schema as in our basic example. The next parameter object is used later on to configure the table's behaviour, e.g., its layout and pagination parameters:

    var tableConfig = {
    	layout: "fitColumns",
    	pagination: "local",
    	ajaxURL: "",
    	paginationSize: 10,
    	paginationSizeSelector: [3, 6, 8, 10, 15, 20]
    };

Finally, all parameters are combined into one single parameter object as follows:

    var params = {
    	dataModel: dataModel,
    	uiForm: this.uiSchema,
    	items: columns,
    	tableLayout: tableConfig,
    	data: this.tableData,
    	readOperation: undefined},
    	updateOperation: undefined,
    	deleteOperation: undefined,
    	createOperation: undefined,
    	listOperation: undefined
    };

Here you can find form-specific parameters (dataModel, uiForm), which we ignore for the moment, table-specific parameters (items, tableLayout, data) and a list of callback functions, which we also skip for the moment. In order to render the table, we use the following call:

    $('#first-table').metadataeditorTable(params);

By doing this, the table is rendered at the element with id first-table in this HTML file.

#### Including Callbacks and Editor Forms

The table shown in the previous example was purely for visualization as we did not provide any callback. As soon as we add a callback function for any of the supported operations (read, update, delete, create, list), the according action button will be visible. In order to add a callback function to an operation, we have to modify the table parameters as follows:

    var params = {
    	dataModel: dataModel,
    	uiForm: this.uiSchema,
    	items: columns,
    	tableLayout: tableConfig,
    	data: this.tableData,
    	readOperation: (selection) => {
    		var options = {
    			operation: "READ",
    			dataModel: this.dataModel,
    			uiForm: this.uiSchema,
    			resource: selection,
    			buttonTitle: "Close"
    		};
    		$('#read-form').metadataeditorForm(options, () => {
    			$("#formModal").modal('hide');
    		});
    		$("#formModal").modal('show');
    	},
    	updateOperation: undefined,
    	deleteOperation: undefined,
    	createOperation: undefined,
    	listOperation: undefined
    };

The content of the callback function is very similar to what we did in the simple examples. There are only two differences:

- The form data is taken from the table selection instead of an external source
- The form is not always visible but shown as modal dialog on demand

For details on how to integrate the form as a modal dialog, please refer so the source of this file. To add the table with our read operation we finally have to call:

    $('#second-table').metadataeditorTable(params);

By doing this, the table is rendered at the element with id second-table in this HTML file. As you can see, each table row now contains an eye icon in the last column, which will trigger the callback we've defined for the read operation.

#### Person Form

#### Remotely Fetching Data and Enhanced Styling

With the last example in this section, let's come to something more complex and closer to reality. Typically, the Metadata Editor is supposed to serve as frontend to a Web-accessible service providing data and all operations to it. We will now show how to integrate data loading from a remote location including some more customized representation of the result. Therefor, we switch from showing persons to movies. Thus, we have to setup an entirely new table and we start with the column definition:

    var columnsMovies = [
    	{title: "", field: "image", headerSort: false, formatter:"image", formatterParams:{width:"50px"}, frozen:true, width: 70},
    	{title: "Title", field: "title", headerSort: false},
    	{title: "Release Date", field: "release_date", headerSort: false}
    ];

Looks quite similar to the first example, except the first column, which uses a special formatter and has a fixed size. As you can see, you have all possibilities offered by the Tabulator library to improve the user experience of your Metadata Editor-based UI. The next parameter object we have to change is the tableConfig. Instead of serving static data we now provide an ajaxURL from where the data will be fetched by Tabulator. Furthermore, we limit the page size to 6 and we provide a minimum height of the table, both only having optical impact.

    var tableConfigMovies = {
    	layout: "fitColumns",
    	pagination: "local",
    	ajaxURL: "https://ghibliapi.herokuapp.com/films",
    	paginationSize: 6,
    	minHeight: 300,
    	paginationSizeSelector: [3, 6, 8, 10, 15, 20]
    };

Finally, we have to combine everything in a parameter object for the table. Most of what is shown below was already presented before, unless we are now using different properties for dealing with movies instead of persons. The only thing worth mentioning here is, that we are not limited to the form element for using the resource selected in the table, but we can also use single elements, i.e., the image property in this case, on other UI elements easily.

    var paramsMovies = {
    	dataModel: this.dataModelMovies,
    	uiForm: this.uiSchemaMovies,
    	items: columnsMovies,
    	tableLayout: tableConfigMovies,
    	readOperation: (selection) => {
    		var optionsMovies = {
    			operation: "READ",
    			dataModel: this.dataModelMovies,
    			uiForm: this.uiSchemaMovies,
    			resource: selection,
    			buttonTitle: "Close"
    		};
    		$("#titleImage").attr("src", selection.image);
    		$('#movie-form').metadataeditorForm(optionsMovies, (value) => {
    			var resource = optionsMovies.resource;
    			JSON.parse(JSON.stringify(resource));
    			console.log(resource);
    			$("#formModalMovies").modal('hide');
    		});
    		$("#formModalMovies").modal('show');
    	},
    	updateOperation: undefined,
    	deleteOperation: undefined,
    	createOperation: undefined,
    	listOperation: undefined
    };

That's it, after calling the following line we see what we achieved.

    $('#third-table').metadataeditorTable(paramsMovies);

#### Movie Form