Updating responsiveSigning.js with a new Formula Tab

Author: InbarGazit

lib/eSignature/examples/responsiveSigning.js

@@ -94,6 +94,63 @@ function makeEnvelope(args) {
     routingOrder: "2",
     recipientId: "2",
   });
+
+  // add formula tabs
+  const price1 = 5;
+  const formulaTab1 = docusign.FormulaTab.constructFromObject({
+    font: "helvetica",
+    fontSize: "size11",
+    fontColor: "black",
+    anchorString: "/l1e/",
+    anchorYOffset: "-8",
+    anchorUnits: "pixels",
+    anchorXOffset: "105",
+    tabLabel: "l1e",
+    formula: `[l1q] * ${price1}`,
+    roundDecimalPlaces: "0",
+    required: "true",
+    locked: "true",
+    disableAutoSize: "false",
+  });
+
+  const price2 = 150;
+  const formulaTab2 = docusign.FormulaTab.constructFromObject({
+    font: "helvetica",
+    fontSize: "size11",
+    fontColor: "black",
+    anchorString: "/l2e/",
+    anchorYOffset: "-8",
+    anchorUnits: "pixels",
+    anchorXOffset: "105",
+    tabLabel: "l2e",
+    formula: `[l2q] * ${price2}`,
+    roundDecimalPlaces: "0",
+    required: "true",
+    locked: "true",
+    disableAutoSize: "false",
+  });
+
+  const formulaTab3 = docusign.FormulaTab.constructFromObject({
+    font: "helvetica",
+    fontSize: "size11",
+    fontColor: "black",
+    anchorString: "/l3t/",
+    anchorYOffset: "-8",
+    anchorUnits: "pixels",
+    anchorXOffset: "105",
+    tabLabel: "l3t",
+    formula: `[l1e] + [l2e]`,
+    roundDecimalPlaces: "0",
+    required: "true",
+    locked: "true",
+    disableAutoSize: "false",
+    bold: "true",
+  });
+
+  const signerTabs = docusign.Tabs.constructFromObject({
+    formulaTabs: [formulaTab1, formulaTab2, formulaTab3]
+  });
+  signer.tabs = signerTabs;
 
   // Add the recipients to the envelope object
   let recipients = docusign.Recipients.constructFromObject({
@@ -102,7 +159,6 @@ function makeEnvelope(args) {
   });
 
   // add the document
-  
   let htmlDefinition = new docusign.DocumentHtmlDefinition();
   htmlDefinition.source = getHTMLDocument(args);
 
@@ -146,8 +202,8 @@ function getHTMLDocument(args) {
     .replace("{ccName}", args.ccName)
     .replace("{ccEmail}", args.ccEmail)
     .replace("/sn1/", "<ds-signature data-ds-role=\"Signer\"/>")
-    .replace("/l1q/", "<input data-ds-type=\"number\"/>")
-    .replace("/l2q/", "<input data-ds-type=\"number\"/>");
+    .replace("/l1q/", "<input data-ds-type=\"number\" name=\"l1q\"/>")
+    .replace("/l2q/", "<input data-ds-type=\"number\" name=\"l2q\"/>");
 }
 
 function makeRecipientViewRequest(args) {