How to synchronize form field values when sending a signature request using a template via the 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.

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 text boxes.

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 signer 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

curl -X 'POST' \ 'https://api.boldsign.com/v1/template/send?templateId=b8085b47-xxxx-47f8-xxxx-cb0acfe2d916' \
       -H 'accept: application/json' \
       -H 'X-API-KEY: {your API key}' \
       -H 'Content-Type: application/json;odata.metadata=minimal;odata.streaming=true' \
       -d '{
       "title": "Invitation form",
       "message": "Kindly review and sign this.",
       "roles": [
           {
               "roleIndex": 1,
               "signerName": "David",
               "signerEmail": "david@cubeflakes.com",
               "signerType": "Signer",
               "signerRole": "Landlord",
               "formFields": [
                 {
                     "id": "TextBox",
                     "name": "TextBox",
                     "fieldType": "TextBox",
                     "pageNumber": 1,
                     "bounds": {
                       "x": 200,
                       "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"
           }
       ]
   }' \ 

C#

var apiClient = new ApiClient("YOUR_API_KEY");

var templateClient = new TemplateClient(apiClient);

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 sendForSignFromTemplate = new SendForSignFromTemplate
{
   TemplateId = "YOUR_TEMPLATE_ID",
   Roles =
   [
       new Roles()
       {
           RoleIndex = 1,
           SignerName = "David",
           SignerEmail = "david@cubeflakes.com",
           SignerType = SignerType.Signer,
           formFields: formFieldCollections,
       }
   ]
};

var documentCreated = templateClient.SendUsingTemplate(sendForSignFromTemplate); 

Python

import boldsign

configuration = boldsign.Configuration(
       api_key = "YOUR_API_KEY"
  )

with boldsign.ApiClient(configuration) as api_client:

   template_api = boldsign.TemplateApi(api_client)

   form_fields = [
       boldsign.FormField(
           fieldType="TextBox",
           pageNumber=1,
           dataSyncTag="1",
           value="Default Value",
           bounds=boldsign.Rectangle(
               x=100,
               y=100,
               width=100,
               height=50
           )
       ),
       boldsign.FormField(
           fieldType="TextBox",
           pageNumber=1,
           dataSyncTag="1",
           bounds=boldsign.Rectangle(
               x=200,
               y=100,
               width=100,
               height=50
           )
       ),
   ]

   role = [
       boldsign.Role(
       role_index=1,
       signer_name="Richard",
       signer_order=1,
       signer_email="richard@cuberflakes.com",
       signerType='Signer',
       signerRole='Customer',
       formFields=form_fields,
       locale="EN"
   )
   ]


   template_id = "YOUR_TEMPLATE_ID"

   send_for_sign_from_template_form = boldsign.SendForSignFromTemplateForm(
       title="Python-Data sync tag",
       message="Kindly review and sign this.",
       roles=role,
       labels=["DataSyncTag_Python"],
   )

   response = template_api.send_using_template(template_id, send_for_sign_from_template_form)

   print(f"Template sent successfully. Document ID: {response.document_id}") 

PHP

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

use BoldSign\Configuration;
use BoldSign\Api\TemplateApi;
use BoldSign\Model\{Role, SendForSignFromTemplateForm};

$config = new Configuration();
$config->setApiKey('YOUR_API_KEY');

$template_api = new TemplateApi($config);

$form_fields1 = new BoldSign\Model\FormField();
$form_fields1->setFieldType('TextBox');
$form_fields1->setPageNumber(1);
$form_fields1->setDataSyncTag("1");
$bounds1 = new Rectangle([500, 500, 100, 50]);
$form_fields1->setBounds($bounds1);

$form_fields2 = new BoldSign\Model\FormField();
$form_fields2->setFieldType('TextBox');
$form_fields2->setDataSyncTag("1");
$form_fields2->setPageNumber(1);
$bounds2 = new Rectangle([200, 200, 500, 200]);
$form_fields->setBounds($bounds2);

$role = new BoldSign\Model\Role();
$role->setSignerName('Richard');
$role->setSignerEmail('richard@cuberflakes.com');
$role->setSignerType("Signer");
$role->setRoleIndex(1);
$role->setFormFields([$form_fields1, $form_fields2]);

$send_for_sign_from_template = new SendForSignFromTemplateForm();
$send_for_sign_from_template->setRoles([$role]);
$send_for_sign_from_template->setTitle('data sync tag');

$document_created = $template_api->sendUsingTemplate($template_id = 'YOUR_TEMPLATE_ID', $send_for_sign_from_template); 

Java

ApiClient client = Configuration.getDefaultApiClient();  
client.setApiKey("YOUR_API_KEY");
       
TemplateApi templateApi = new TemplateApi(client);

FormField formField1 = new FormField();
formField1.setFieldType(FormField.FieldTypeEnum.TEXT_BOX);
formField1.setPageNumber(1);
formField1.dataSyncTag("1");
formField1.value("Default Text");
Rectangle bounds1 = new Rectangle();
bounds1.setX(100f);
bounds1.setY(50f);
bounds1.setWidth(100f);
bounds1.setHeight(50f);
formField1.setBounds(bounds1);

FormField formField2 = new FormField();
formField2.setFieldType(FormField.FieldTypeEnum.TEXT_BOX);
formField2.setPageNumber(1);
formField2.dataSyncTag("1");
Rectangle bounds2 = new Rectangle();
bounds2.setX(250f);
bounds2.setY(50f);
bounds2.setWidth(100f);
bounds2.setHeight(50f);
formField2.setBounds(bounds2);

Role role = new Role();
role.roleIndex(1);
role.setSignerName("Richard");
role.setSignerEmail("richard@cubeflakes.com");
role.setSignerType(Role.SignerTypeEnum.SIGNER);
role.setFormFields(Arrays.asList(formField1, formField2));
   	
SendForSignFromTemplateForm sendForSignFromTemplate = new SendForSignFromTemplateForm();
sendForSignFromTemplate.setRoles(Arrays.asList(role));
   	
DocumentCreated documentCreated = templateApi.sendUsingTemplate("YOUR_TEMPLATE_ID", sendForSignFromTemplate); 

Node Js

import { TemplateApi, FormField, Rectangle, Role, SendForSignFromTemplateForm  } from "boldsign";

const templateApi = new TemplateApi();
templateApi.setApiKey("YOUR_API_KEY");

var formField1 = new FormField();
formField1.fieldType = FormField.FieldTypeEnum.TextBox;
formField1.pageNumber = 1;
formField1.dataSyncTag= "1";
const bounds = new Rectangle();
bounds.x = 100;
bounds.y = 50;
bounds.width = 100;
bounds.height = 100;
formField1.bounds = bounds;

var formField2 = new FormField();
formField2.fieldType = FormField.FieldTypeEnum.TextBox;
formField2.pageNumber = 1;
formField2.dataSyncTag = "1";
const bounds2 = new Rectangle();
bounds2.x = 200;
bounds2.y = 50;
bounds2.width = 200;
bounds2.height = 200;
formField2.bounds = bounds2;

const role = new Role();
role.roleIndex = 1;
role.signerName = "Richard";
role.signerEmail = "richard@cubeflakes.com";
role.signerType =  Role.SignerTypeEnum.Signer;
role.formFields = [formField1, formField2];

const sendForSignFromTemplate = new SendForSignFromTemplateForm();
sendForSignFromTemplate.roles = [role];

const documentCreated = templateApi.sendUsingTemplate("YOUR_TEMPLATE_ID", sendForSignFromTemplate); 

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 text box form field values. This ensures that changes made in one textbox are reflected in the other, facilitating data consistency and efficiency in document generation.