How to Sync Form Field Values Using Datasync

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": "[email protected]",
  "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: "[email protected]",
    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 boldsign

configuration = boldsign.Configuration(host = "https://api.boldsign.com", api_key = "YOUR_API_KEY")

with boldsign.ApiClient(configuration) as api_client:

    document_api = boldsign.DocumentApi(api_client)

    send_for_sign = boldsign.SendForSign(
        title = "Document SDK API",
        document_title = "SDK Document Test case",
        description = "Testing document from SDK integration test case", 
        files = ["YOUR_FILE_PATH"],
        signers = [
            boldsign.DocumentSigner(
                name = "Hanky",
                emailAddress = "[email protected]",
                signerOrder = 1,
                signerType = "Signer",
                formFields = [
                    boldsign.FormField(
                        name = "TextBox",
                        fieldType = "TextBox",
                        font = "Helvetica",
                        pageNumber = 1,
                        isRequired = True,
                        value = "Default value",
                        dataSyncTag = "1",
                        bounds = boldsign.Rectangle(x = 50, y = 50, width = 100, height = 150)
                    ),
                    boldsign.FormField(
                        name = "TextBox1",
                        fieldType = "TextBox",
                        font = "Helvetica",
                        pageNumber = 1,
                        isRequired = True,
                        dataSyncTag = "1",
                        bounds = boldsign.Rectangle(x = 50, y = 50, width = 100, height = 150)
                    )
                ],
                privateMessage = "This is private message for signer"
            )
        ]
    )

    document_created = document_api.send_document(send_for_sign)

<?php require_once "vendor/autoload.php";

use BoldSign\Configuration;
use BoldSign\Api\DocumentApi;
use BoldSign\Model\{FormField, Rectangle, DocumentSigner, SendForSign, DocumentInfo, FileInfo};

$config = new Configuration();
$config->setHost("https://api.boldsign.com");
$config->setApiKey('YOUR_API_KEY');

$document_api = new DocumentApi($config);

$first_textbox_field = new FormField();
$first_textbox_field->setName('TextBox');
$first_textbox_field->setFieldType('TextBox');
$first_textbox_field->setValue('Default value');
$first_textbox_field->setPageNumber(1);
$first_textbox_field->setFont('Helvetica');
$first_textbox_field->setDataSyncTag('1');
$first_textbox_field->setIsRequired(true);
$first_field_bounds = new Rectangle([50, 50, 100, 150]);
$first_textbox_field->setBounds($first_field_bounds);

$second_textbox_field = new FormField();
$second_textbox_field->setName('TextBox1');
$second_textbox_field->setFieldType('TextBox');
$second_textbox_field->setPageNumber(1);
$second_textbox_field->setFont('Helvetica');
$second_textbox_field->setDataSyncTag('1');
$second_textbox_field->setIsRequired(true);
$second_field_bounds = new Rectangle([50, 50, 100, 150]);
$second_textbox_field->setBounds($second_field_bounds);

$document_signer = new DocumentSigner();
$document_signer->setName('Hanky');
$document_signer->setEmailAddress('[email protected]');
$document_signer->setSignerOrder(1);
$document_signer->setSignerType('Signer');
$document_signer->setFormFields([$first_textbox_field, $second_textbox_field]);
$document_signer->setPrivateMessage('This is private message for signer');

$send_for_sign = new SendForSign();

$documentInfo = new DocumentInfo();
$documentInfo->setTitle('Document SDK API');
$documentInfo->setDescription('Testing document from SDK integration test case');
$send_for_sign->setDocumentInfo([$documentInfo]);

$files = new FileInfo();
$files = 'YOUR_FILE_PATH';
$send_for_sign->setFiles([$files]);

$send_for_sign->setTitle('SDK Document Test case');
$send_for_sign->setSigners([$document_signer]);

$document_created = $document_api->sendDocument($send_for_sign);

ApiClient client = Configuration.getDefaultApiClient();
client.setBasePath("https://api.boldsign.com");
client.setApiKey("YOUR_API_KEY");

DocumentApi documentApi = new DocumentApi(client);

FormField firstTextBoxField = new FormField();
firstTextBoxField.setName("TextBox");
firstTextBoxField.setFieldType(FormField.FieldTypeEnum.TEXT_BOX);
firstTextBoxField.setFont(FormField.FontEnum.HELVETICA);
firstTextBoxField.setPageNumber(1);
firstTextBoxField.setIsRequired(true);
firstTextBoxField.setValue("Default value");
firstTextBoxField.setDataSyncTag("1");
Rectangle firstFieldBounds = new Rectangle().x(100f).y(100f).width(100f).height(50f);
firstTextBoxField.setBounds(firstFieldBounds);

FormField secondTextBoxField = new FormField();
secondTextBoxField.setName("TextBox1");
secondTextBoxField.setFieldType(FormField.FieldTypeEnum.TEXT_BOX);
secondTextBoxField.setFont(FormField.FontEnum.HELVETICA);
secondTextBoxField.setPageNumber(1);
secondTextBoxField.setIsRequired(true);
secondTextBoxField.setDataSyncTag("1");
Rectangle secondFieldBounds = new Rectangle().x(100f).y(100f).width(100f).height(50f);
secondTextBoxField.setBounds(secondFieldBounds);

DocumentSigner signer = new DocumentSigner();
signer.setName("David");
signer.setEmailAddress("[email protected]");
signer.setSignerOrder(1);
signer.setSignerType(DocumentSigner.SignerTypeEnum.SIGNER);
ArrayList<FormField> formFields = new ArrayList<>();
formFields.add(firstTextBoxField);
formFields.add(secondTextBoxField);
signer.setFormFields(formFields);
signer.setPrivateMessage("This is private message for signer");

SendForSign sendForSign = new SendForSign();

File file = new File("YOUR_FILE_PATH");
sendForSign.setFiles(Arrays.asList(file));

sendForSign.setSigners(Arrays.asList(signer));
sendForSign.setTitle("Document SDK API");

DocumentCreated documentCreated = documentApi.sendDocument(sendForSign);

import { DocumentApi, DocumentSigner, DocumentInfo, FormField, Rectangle, SendForSign } from "boldsign"; 
import * as fs from 'fs';

const documentApi = new DocumentApi("https://api.boldsign.com");
documentApi.setApiKey("YOUR_API_KEY");

const firstFieldBounds = new Rectangle();
firstFieldBounds.x = 100;
firstFieldBounds.y = 50;
firstFieldBounds.width = 100;
firstFieldBounds.height = 100;

const secondFieldBounds = new Rectangle();
secondFieldBounds.x = 50;
secondFieldBounds.y = 50;
secondFieldBounds.width = 100;
secondFieldBounds.height = 100;

const firstTextBoxField = new FormField();
firstTextBoxField.name = "TextBox";
firstTextBoxField.fieldType = FormField.FieldTypeEnum.TextBox;
firstTextBoxField.font = FormField.FontEnum.Helvetica;
firstTextBoxField.pageNumber = 1;
firstTextBoxField.isRequired = true;
firstTextBoxField.value = "Default value";
firstTextBoxField.dataSyncTag = "1";
firstTextBoxField.bounds = firstFieldBounds;

const secondTextBoxField = new FormField();
secondTextBoxField.name = "TextBox1";
secondTextBoxField.fieldType = FormField.FieldTypeEnum.TextBox;
secondTextBoxField.font = FormField.FontEnum.Helvetica;
secondTextBoxField.pageNumber = 1;
secondTextBoxField.isRequired = true;
secondTextBoxField.dataSyncTag = "1";
secondTextBoxField.bounds = secondFieldBounds;

const documentSigner = new DocumentSigner();
documentSigner.name = "David";
documentSigner.emailAddress = "[email protected]";
documentSigner.signerOrder = 1;
documentSigner.signerType = DocumentSigner.SignerTypeEnum.Signer;
documentSigner.formFields = [firstTextBoxField, secondTextBoxField];
documentSigner.privateMessage = "This is private message for signer";

const files = fs.createReadStream("YOUR_FILE_PATH");

const sendForSign = new SendForSign();

const documentInfo = new DocumentInfo();
documentInfo.title = "SDK Document Test case";
documentInfo.description = "Testing document from SDK integration test case";
sendForSign.documentInfo = [documentInfo];

sendForSign.title = "Document SDK API";
sendForSign.signers = [documentSigner];
sendForSign.files = [files];

const documentCreated = documentApi.sendDocument(sendForSign);

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.