Creating Dynamic Data

5min
Creating   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  database when the form is submitted.
Data provider, jig, component & action
default.jigx is the database where the  table is defined.
﻿jig.default﻿ is the type of  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 provider
﻿Examples and code snippets﻿
Form creating Dynamic Data
﻿
Dynamic data database 
﻿
Create the  table
In  under the databases folder in the default.jigx file the employee table is added. This will create the table in . 
default.jigx
tables:
  employee: null
tables:
  employee: null
﻿
Create the , 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.
new-employee-form.jigx
index.jigx
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
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
﻿
View the  in ﻿
Open Management﻿ , navigate to your solution (employees).
Navigate to Data option 
Click on the employee table and view the data record you just created.
﻿
Updated 05 Nov 2024
Did this page help you?
Dynamic Data
Reading Dynamic Data
Creating Dynamic Data

Data provider, jig, component & action

﻿Examples and code snippets﻿

Create the table

Create the , form and action

View the in ﻿

Examples and code snippets

View the in
