Creating Dynamic Data can be achieved in several ways, one of which is by using a form. In this example, we will demonstrate how to create a new employee form that will create the employee table, columns, and data record in the Dynamic Data database when the form is submitted.
Data provider, jig, component & action
default.jigx is the database where the Dynamic Data table is defined.
jig.default is the type of jig we will use to contain the form.
form is the component used with text and date fields.
submit-form is the action that executes the create method of the Dynamic Dataprovider
Examples and code snippets
Form creating Dynamic Data
Dynamic data database
Create the Dynamic Data table
In Jigx Builder under the databases folder in the default.jigx file the employee table is added. This will create the table in Dynamic Data.
Create the jig, form and action
The code example below is for the jig.default with the component.form that uses componet.text and component.date-picker to create the fields on the form. The action.submit-form executes the DATA_PROVIDER_DYNAMIC that uses the save/create method to create columns and data records.
View the Dynamic Data in Jigx Management
Open Management, navigate to your solution (employees).
Navigate to Data option
Click on the employee table and view the data record you just created.
title: New Employee
description: Employee form
# use the default jig as the container for the form
type: jig.default
icon: person-task-2
header:
type: component.jig-header
options:
height: medium
children:
type: component.image
options:
source:
uri: https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
children:
- type: component.section
options:
title: Personal Information
children:
# add the form component with fields to capture the dynamic data record
- type: component.form
# The id is used in the action for context to the fields which crete the columns and data
instanceId: form-employee
options:
children:
- type: component.text-field
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: first_name
options:
label: First Name
- type: component.text-field
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: last_name
options:
label: Last Name
- type: component.text-field
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: address
options:
label: Address
- type: component.text-field
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: contact
options:
label: Contact Information
- type: component.text-field
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: email
options:
label: Email
- type: component.section
options:
title: Employment Information
children:
- type: component.text-field
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: job_title
options:
label: Job Title
- type: component.text-field
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: department
options:
label: Department
- type: component.date-picker
# The name in the instanceId becomes the column name and the value entered in the field becomes the column data value
instanceId: start_date
options:
label: Start Date
actions:
- children:
# use the submit form action to execute the create/save method of the Dynamic Data provider.
- type: action.submit-form
options:
# The formId is used to get the context to the fields and values that specify the columns and data
formId: form-employee
# specify the Dynamic Data provider to store the employees data record
provider: DATA_PROVIDER_DYNAMIC
title: Create Record
entity: default/employee
method: save # use the create or save method, the first exection will create columns and records, the second will create data records as the columns already exist.
onSuccess:
type: action.go-back
