Form Data Table

This tutorial shows how to use the Form Data Table.

This component is similar to the Dynamic form except it allows for saving the result of the form in the component.

It includes a similar layout, but here we do not need to include a submit element. When the user interacts with the form, the save bar appears, just as when the user edits the JSON value in a data table. When the user presses save, the content of the form is saved.

This component includes the following views:

• Form - This displays the form.

• Layout Code - This should be used to enter a function body returning the form initialization info. For the format, see the definition of the form initialization data int the Configurable Form documentation.

• Layout Private - This allows for an private constants or functions needed by the function body initializing this form.

• isInputValid(formValue) - This view allows for entry of the isInputValid function for when the user presses save from the form.

• isInputValid Private - This allows for an private constants for functions needed by the isInputValid function.

• Form Value - This shows the saved data for the form. It can be edited to set the form value, or used to read the return value of the form.

• Notes - This displays any desired notes.

Example Form

The following example describes the workspace: Example Workspace

We use a similar layout to the one in our Dynamic Form example except here we omit the submit element. We also can of course omit the submit callback functions. The return value is a pure JSON object in this case.

The following JSON gives a sample layout that includes the following elements:

• Title

• Text Field

• Radio Button Group

[
	{
		"type": "heading",
		"level": 2,
		"text": "Test Form"
	},
	{
		"type": "textField",
		"label": "Test text entry: ",
		"value": "Hello There",
		"key": "text1"
	},
	{
		"type": "radioButtonGroup",
		"label": "Radio 1: ",
		"groupName": "rg1",
		"entries": [
			"antelope",
			"buffalo",
			"cat",
			"dog"
		],
		"value": "dog",
		"key": "radioGroup1"
	}
]

Using this layout JSON in a Form Data Table, we return this value from the layout code as follows:

This creates the following form:

If we change the radio buttons, we get the save bar, just as if we edited the value of a plain data table.

Pressing Save...

Now if we go to the Form Value view of the Form Data Table, we see what result value is associated with this form content.

Accessing the Form Data From another Table

In the workspace, there are two additional tables, copyOfResult and copyOfLayout. These show how you can externally access the value (copyOfResult) and even the layout (copyOfLayout) of the Form Data Table.

Here is the code to access the values from the form externally.

And here are the resulting values of these tables.

Compound Tables

The FormDataTable is an example of a compound table. This is actually a folder object, to which the user can not add tables. This folder contains three tables:

• layout - The value of this table is the layout for the form, or the return value of the layout code function. (Note that this is not a JSON but a javascript object, in general. So the "equivelent" folder below is not really equivelent to the component value in general.)

• data - This table holds the form value. It can be used both to initialize the form and read the form result.

• isInputValid - This is a function that is called with the argument formValue. When the form is submitted this is called to validate the date. It should return one of the following values. If a different value is returned, an error message is shown.

  • true (boolean value) - This means the data is valid

  • error message (string) - This error message will be shown to the user and the form data will not be saved.

However, Apogee does not display this as a folder, it instead appears as a control with the form functionality.

If this were displayed as a folder, it would look something like this:

Compound tables are used in other places as a simple means to put more complex functionality into the components without making more complex underlying tables.

More Information

For more information about using the configurable form see the programming guide Configurable Forms.