Updating a Record

3min
Learn how to update an existing record using a form. 
Populating a form with initial values
Before updating the record, we have to bind the existing record to the form. For that purpose, the form component has an option called initialValues which can be used to set all form fields to the current values at once. 
In this example, we will use an input parameter recordId (see Inputs & Outputs﻿) to query a data record from the Dynamic Data table and then bind that record to the initialValues of our form.
Please note: The optional isDocument option of our datasource will ensure that only the first record will be returned by our query as a JSON object.
update-form.jigx
title: Update Form
description: My first update form by Jigx
type: jig.default

datasources:
  employee-detail:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
    
      entities:
        - entity: default/form
    
      query: SELECT id, '$.firstname', '$.lastname', '$.email', '$.phone' FROM [default/form] WHERE id = @recordId
      queryParameters:
        recordId: [email protected]
      isDocument: true
   
children:
  - type: component.form
    instanceId: simple-form
    options:
      initialValues: [email protected]
      children:
          - type: component.text-field
            instanceId: firstname
            options:  
              label: First name
          - type: component.text-field
            instanceId: lastname
            options:
              label: Last name
          - type: component.email-field
            instanceId: email
            options:
              label: Email
              keyboardType: email-address
          - type: component.number-field
            instanceId: phone
            options:
              label: Phone number
              keyboardType: number-pad
title: Update Form
description: My first update form by Jigx
type: jig.default

datasources:
  employee-detail:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
    
      entities:
        - entity: default/form
    
      query: SELECT id, '$.firstname', '$.lastname', '$.email', '$.phone' FROM [default/form] WHERE id = @recordId
      queryParameters:
        recordId: =@ctx.jig.inputs.recordId
      isDocument: true
   
children:
  - type: component.form
    instanceId: simple-form
    options:
      initialValues: =@ctx.datasources.record
      children:
          - type: component.text-field
            instanceId: firstname
            options:  
              label: First name
          - type: component.text-field
            instanceId: lastname
            options:
              label: Last name
          - type: component.email-field
            instanceId: email
            options:
              label: Email
              keyboardType: email-address
          - type: component.number-field
            instanceId: phone
            options:
              label: Phone number
              keyboardType: number-pad
﻿
Updating the record
In this section, we will gonna have deep look at how you can update your records in the database or delete them with Jig form. 
Update with submit-form action
Another way to update data is by the submit-form action. We put the id of the record which we want to update. 
Update form - execute-entity action
For the update form, we will use the previous from that we just created and modify it.
We change the method in our action.execute-entity from save to update, under data: we add a new row with id: [email protected] , also we need to create a new entity-field for id, and for every component what we have we must add new rows with initialValue:
Your update-form.jigx file should resemble the code below:
update-form.jigx
title: Update Form with execute-entity action
description: My first update form by Jigx
type: jig.default

actions:
  - children:
      - type: action.execute-entity
        options:
          title: Update form
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/form
          method: update
          data: 
            id: =ctx.jig.inputs.recordId
            firstname: [email protected]
            lastname: [email protected]
            email: [email protected]
            phone: [email protected]

            
children:
  - type: component.form
    instanceId: simple-form
    options:
      children:
          - type: component.text-field
            instanceId: firstname
            options:  
              label: First name
              initialValue: [email protected]-detail.firstname
          - type: component.text-field
            instanceId: lastname
            options:
              label: Last name
              initialValue: [email protected]-detail.lastname
          - type: component.email-field
            instanceId: email
            options:
              label: Email
              keyboardType: email-address
              initialValue: [email protected]-detail.email
          - type: component.number-field
            instanceId: phone
            options:
              label: Phone number
              keyboardType: number-pad
              initialValue: [email protected]-detail.phone
title: Update Form with execute-entity action
description: My first update form by Jigx
type: jig.default

actions:
  - children:
      - type: action.execute-entity
        options:
          title: Update form
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/form
          method: update
          data: 
            id: =ctx.jig.inputs.recordId
            firstname: =@ctx.components.firstname.state.value
            lastname: =@ctx.components.lastname.state.value
            email: =@ctx.components.email.state.value
            phone: =@ctx.components.phone.state.value

            
children:
  - type: component.form
    instanceId: simple-form
    options:
      children:
          - type: component.text-field
            instanceId: firstname
            options:  
              label: First name
              initialValue: =@ctx.datasources.employee-detail.firstname
          - type: component.text-field
            instanceId: lastname
            options:
              label: Last name
              initialValue: =@ctx.datasources.employee-detail.lastname
          - type: component.email-field
            instanceId: email
            options:
              label: Email
              keyboardType: email-address
              initialValue: =@ctx.datasources.employee-detail.email
          - type: component.number-field
            instanceId: phone
            options:
              label: Phone number
              keyboardType: number-pad
              initialValue: =@ctx.datasources.employee-detail.phone
﻿
﻿
﻿
﻿
Updated 04 May 2023
Did this page help you?
Creating a Record
Forms and Composite Jigs