How to Set Up Synchronizing Form Field Values Across the Document for Signature Requests via API?

BoldSign offers support for linking multiple form fields, enabling the synchronization of values across these fields. This functionality ensures that when data is entered into one field, it is automatically populated in all linked fields. This streamlines the form-filling process, enhancing efficiency and accuracy for users.

Supported Form Fields

Data sync tags are presently compatible with the following types of form fields:

Textbox
Label
Checkbox
Dropdown
Image
Editable Date

Creating Data Sync Tags

To synchronize the values of the form fields, simply input the same value into the dataSyncTag property of each form field. For instance, if you wish to link two textboxes, assign the identical value (e.g., "1") to the dataSyncTag property of both textboxes.

When a user inputs data into one of the linked fields, the data will be automatically populated in all the other linked fields. This streamlines the user experience, requiring them to enter data only once, which will then be automatically filled in for them in all the other linked fields.

Here are example codes demonstrating how to achieve this:

Code snippet

curl -X 'POST' \
  'https://api.boldsign.com/v1/document/send' \
  -H 'accept: application/json' \
  -H 'X-API-KEY: {your API key}' \
  -H 'Content-Type: multipart/form-data' \
  -F 'Title="Sample Document"' \
  -F 'Signers={
  "name": "hanky",
  "emailAddress": "hankyWhites@gmail.com",
  "signerType": "Signer",
  "signerRole": "Signer",
  "formFields": [
    {
      "id": "TextBox",
      "name": "TextBox",
      "fieldType": "TextBox",
      "pageNumber": 1,
      "bounds": {
        "x": 100,
        "y": 100,
        "width": 125,
        "height": 25
      },
      "isRequired": true,
      "value": "Default Value",
      "dataSyncTag": "1"
    },
    {
      "id": "TextBox1",
      "name": "TextBox1",
      "fieldType": "TextBox",
      "pageNumber": 1,
      "bounds": {
        "x": 200,
        "y": 200,
        "width": 125,
        "height": 25
      },
      "isRequired": true,
      "dataSyncTag": "1"
    }
  ],
  "locale": "EN"
}' \
  -F 'Files=@{your file}' \

var apiClient = new ApiClient("https://api.boldsign.com", "{Your API key}");
var documentClient = new DocumentClient(apiClient);

var documentFilePath = new DocumentFilePath
{
    ContentType = "application/pdf",
    FilePath = "{Your File path}"
};

var filesToUpload = new List<IDocumentFile>
{
    documentFilePath,
};

var TextBoxField = new FormField(
    id: "TextBox",
    isRequired: true,
    value: "Default value",
    dataSyncTag: "1",
    type: FieldType.TextBox,
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 125, height: 25));

var TextBoxField1 = new FormField(
    id: "TextBox1",
    isRequired: true,
    dataSyncTag: "1",
    type: FieldType.TextBox,
    pageNumber: 1,
    bounds: new Rectangle(x: 200, y: 200, width: 125, height: 25));

var formFieldCollections = new List<FormField>()
{
    TextBoxField,
    TextBoxField1
};

var signer = new DocumentSigner(
    signerName: "David",
    signerEmail: "david@cubeflakes.com",
    formFields: formFieldCollections,
    locale: Locales.EN);    

var documentSigners = new List<DocumentSigner>()
{
    signer
};

var sendForSign = new SendForSign()
{
    Signers = documentSigners,
    Files = filesToUpload,
    Title = "Sample Document"
};
var documentCreated = documentClient.SendDocument(sendForSign);
Console.WriteLine(documentCreated.DocumentId);

import requests
import json

url = "https://api.boldsign.com/v1/document/send"

signer_data = {
    "name": "hanky",
    "emailAddress": "hankyWhites@gmail.com",
    "signerType": "Signer",
    "signerRole": "Signer",
    "formFields": [
        {
            "id": "TextBox",
            "name": "TextBox",
            "fieldType": "TextBox",
            "pageNumber": 1,
            "bounds": {
                "x": 100,
                "y": 100,
                "width": 125,
                "height": 25
            },
            "isRequired": True,
            "value": "Default value",
            "dataSyncTag": "1"
        },
        {
            "id": "TextBox1",
            "name": "TextBox1",
            "fieldType": "TextBox",
            "pageNumber": 1,
            "bounds": {
                "x": 200,
                "y": 200,
                "width": 125,
                "height": 25
            },
            "isRequired": True,
            "dataSyncTag": "1"
        }
    ],
    "locale": "EN"
}

payload = {
    'Signers': json.dumps(signer_data),
    'Title': "Sample Document"
}

files = [
    ('Files', ('{Your file name}', open('{Your file path}', 'rb'), 'application/pdf'))
]

headers = {
    'accept': 'application/json',
    'X-API-KEY': '{Your API key}'
}

response = requests.post(url, headers=headers, data=payload, files=files)

print(response.text)

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');
let data = new FormData();
data.append('Signers', '{\r\n  "name": "hanky",\r\n  "emailAddress": "hankyWhites@gmail.com",\r\n  "signerType": "Signer",\r\n  "signerRole": "Signer",\r\n  "formFields": [\r\n    {\r\n      "id": "TextBox",\r\n      "name": "TextBox",\r\n      "fieldType": "TextBox",\r\n      "pageNumber": 1,\r\n      "bounds": {\r\n        "x": 100,\r\n        "y": 100,\r\n        "width": 125,\r\n        "height": 25\r\n      },\r\n "value": "Default Value",\r\n "dataSyncTag": "1",\r\n    "isRequired": true\r\n}\r\n, \r\n    {\r\n      "id": "TextBox1",\r\n      "name": "TextBox1",\r\n      "fieldType": "TextBox",\r\n      "pageNumber": 1,\r\n      "bounds": {\r\n        "x": 200,\r\n        "y": 200,\r\n        "width": 125,\r\n        "height": 25\r\n      },\r\n  "dataSyncTag": "1",\r\n    "isRequired": true\r\n}\r\n  ],\r\n  "locale": "EN"\r\n}');
data.append('Files', fs.createReadStream('{Your file path}'));
data.append('Title', "Sample Document");

let config = {
  method: 'post',
  maxBodyLength: Infinity,
  url: 'https://api.boldsign.com/v1/document/send',
  headers: { 
    'accept': 'application/json', 
    'X-API-KEY': '{Your API key}', 
    ...data.getHeaders()
  },
  data : data
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});

In the provided example, when the same value, such as "1," is entered into the dataSyncTag property, it enables users to input data once, which will then be automatically populated into another textbox field. When the code is executed, a document will be generated, synchronizing both textbox form field values. This ensures that changes made in one textbox are reflected in the other, facilitating data consistency and efficiency in document generation.