Files
OpenSign/docs/help/New-Document/widgets/index.html
T

88 lines
31 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-help/New-Document/widgets" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.2">
<title data-rh="true">Widgets in OpenSign | OpenSign™</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docs.opensignlabs.com/img/docusaurus-social-card.png"><meta data-rh="true" name="twitter:image" content="https://docs.opensignlabs.com/img/docusaurus-social-card.png"><meta data-rh="true" property="og:url" content="https://docs.opensignlabs.com/docs/help/New-Document/widgets"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Widgets in OpenSign | OpenSign™"><meta data-rh="true" name="description" content="Widgets in OpenSign are interactive fields that you can place on your documents to collect information, signatures, or confirmations from recipients during the signing process."><meta data-rh="true" property="og:description" content="Widgets in OpenSign are interactive fields that you can place on your documents to collect information, signatures, or confirmations from recipients during the signing process."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.opensignlabs.com/docs/help/New-Document/widgets"><link data-rh="true" rel="alternate" href="https://docs.opensignlabs.com/docs/help/New-Document/widgets" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.opensignlabs.com/docs/help/New-Document/widgets" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Create New OpenSign Document","item":"https://docs.opensignlabs.com/docs/category/create-new-opensign-document"},{"@type":"ListItem","position":2,"name":"Widgets in OpenSign","item":"https://docs.opensignlabs.com/docs/help/New-Document/widgets"}]}</script><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="OpenSign™ RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="OpenSign™ Atom Feed"><link rel="stylesheet" href="/assets/css/styles.03fa8acf.css">
<script src="/assets/js/runtime~main.9e610c3a.js" defer="defer"></script>
<script src="/assets/js/main.62d29b20.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_mb4j" style="background-color:#cae4fa;color:#091E42" role="banner"><div class="content_knG7 announcementBarContent_xLdY">Help use spread the word - ⭐ OpenSign on <a target="_blank" rel="noopener" href="https://github.com/opensignlabs/opensign">GitHub</a></div></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.png" alt="OpenSign™ Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.png" alt="OpenSign™ Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">OpenSign™</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/help/intro">Help</a><a class="navbar__item navbar__link" href="/docs/API-docs/v1.1">APIs</a><a class="navbar__item navbar__link" href="/docs/contribute/CODE_OF_CONDUCT">Contribute</a><a href="https://www.opensignlabs.com/plans-pricing" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Cloud Pricing<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a class="navbar__item navbar__link" href="/docs/self-host/intro">Self-host</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/opensignlabs/opensign" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/help/intro"><span title="Intro" class="linkLabel_WmDU">Intro</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--active" href="/docs/category/create-new-opensign-document"><span title="Create New OpenSign Document" class="categoryLinkLabel_W154">Create New OpenSign Document</span></a><button aria-label="Collapse sidebar category &#x27;Create New OpenSign Document&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/sign-yourself"><span title="Sign your-self" class="linkLabel_WmDU">Sign your-self</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/request-signatures"><span title="Request signatures" class="linkLabel_WmDU">Request signatures</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/help/New-Document/widgets"><span title="Widgets in OpenSign" class="linkLabel_WmDU">Widgets in OpenSign</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/edit-document-before-sending"><span title="Editing Your Document Before Sending" class="linkLabel_WmDU">Editing Your Document Before Sending</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/enforce-email-verification"><span title="Enforce email OTP verification" class="linkLabel_WmDU">Enforce email OTP verification</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/manage-docs-using-opensign-drive"><span title="Manage Docs using OpenSign™ Drive" class="categoryLinkLabel_W154">Manage Docs using OpenSign™ Drive</span></a><button aria-label="Expand sidebar category &#x27;Manage Docs using OpenSign™ Drive&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/documents"><span title="Documents" class="categoryLinkLabel_W154">Documents</span></a><button aria-label="Expand sidebar category &#x27;Documents&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/templates"><span title="Templates" class="categoryLinkLabel_W154">Templates</span></a><button aria-label="Expand sidebar category &#x27;Templates&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/settings"><span title="Settings" class="categoryLinkLabel_W154">Settings</span></a><button aria-label="Expand sidebar category &#x27;Settings&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/user-menu"><span title="User Menu" class="categoryLinkLabel_W154">User Menu</span></a><button aria-label="Expand sidebar category &#x27;User Menu&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/faqs"><span title="FAQs" class="categoryLinkLabel_W154">FAQs</span></a><button aria-label="Expand sidebar category &#x27;FAQs&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_xLCN"><div class="docItemContainer_jfFK"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/docs/category/create-new-opensign-document"><span>Create New OpenSign Document</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Widgets in OpenSign</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><div class="row"><div class="col col--12 markdown"><header><h1>🧩 Understanding the Number Widget</h1></header>
<p>Widgets in <strong>OpenSign</strong> are interactive fields that you can place on your documents to collect information, signatures, or confirmations from recipients during the signing process.</p>
<p>They make your documents dynamic — allowing signers to fill in details like names, dates, numbers, checkboxes, or digital signatures directly within the document.</p>
<p><strong>Widgets help you:</strong></p>
<ul>
<li class="">Create fillable and interactive documents</li>
<li class="">Control the type of input signers can provide (text, date, number, etc.)</li>
<li class="">Ensure data consistency and validation</li>
<li class="">Streamline form completion and signing workflows</li>
</ul>
<p>OpenSign offers various widget types such as <strong>Signature</strong>, <strong>Initial</strong>, <strong>Text</strong>, <strong>Date</strong>, <strong>Checkbox</strong>, <strong>Stamp</strong>, and the newly added <strong>Number Widget</strong> — each designed for specific use cases.</p>
<hr>
<h1>🧮 Number Widget</h1>
<p>The <strong>Number Widget</strong> in <strong>OpenSign</strong> lets you collect numeric input from signers within your document.<br>
<!-- -->It can also perform <strong>dynamic calculations</strong> using values from other number widgets.</p>
<p>This widget ensures that only <strong>numbers</strong> are entered, helping maintain data accuracy and consistency across signed documents.</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="-purpose">🔹 Purpose<a href="#-purpose" class="hash-link" aria-label="Direct link to 🔹 Purpose" title="Direct link to 🔹 Purpose" translate="no"></a></h2>
<p>Use the <strong>Number Widget</strong> when you need signers to input strictly numeric data during the signing process.<br>
<!-- -->Its ideal for:</p>
<ul>
<li class="">Numeric IDs (e.g., Employee ID, Order Number)</li>
<li class="">Amounts or currency values</li>
<li class="">Quantity or item counts</li>
<li class="">Zip/Postal codes</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="-how-to-add-a-number-widget">🧭 How to Add a Number Widget<a href="#-how-to-add-a-number-widget" class="hash-link" aria-label="Direct link to 🧭 How to Add a Number Widget" title="Direct link to 🧭 How to Add a Number Widget" translate="no"></a></h2>
<ol>
<li class="">Upload the document and open the Create Document panel.</li>
<li class="">From the <strong>Widget Toolbar</strong>, select <strong>“Number”</strong>.</li>
<li class="">Click anywhere on the document where you want the number field to appear.</li>
<li class="">Adjust its size and position as needed.</li>
<li class="">Assign the widget to a <strong>signer</strong> (if the document has multiple signers).</li>
</ol>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="-widget-properties">⚙️ Widget Properties<a href="#-widget-properties" class="hash-link" aria-label="Direct link to ⚙️ Widget Properties" title="Direct link to ⚙️ Widget Properties" translate="no"></a></h2>
<p>You can configure the following options for the <strong>Number Widget</strong>:</p>
<table><thead><tr><th><strong>Property</strong></th><th><strong>Description</strong></th></tr></thead><tbody><tr><td><strong>Name</strong></td><td>A unique identifier for this number widget. <br>• Example: <code>number-1</code>, <code>number-2</code> <br>• Must be unique within the document. <br>• Used in formulas as <code>{{number-1}}</code>. <br>🔸 <em>If you include a number widget in a formula, its name must be unique, since formulas rely on these identifiers.</em></td></tr><tr><td><strong>Default Value</strong></td><td>(Optional) Sets an initial numeric value for the widget. This value appears automatically unless changed by the signer or overridden by a formula.</td></tr><tr><td><strong>Formula</strong></td><td>Defines a calculation using other number widgets.</td></tr><tr><td><strong>Required / Optional</strong></td><td>Specifies whether the signer must complete the field before submission.</td></tr><tr><td><strong>Placeholder</strong></td><td>Displays hint text before input (e.g., <em>12345</em>).</td></tr><tr><td><strong>Font Size</strong></td><td>Controls the font size of the number displayed on the document.</td></tr><tr><td><strong>Color</strong></td><td>Sets the font color for the number field.</td></tr></tbody></table>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="-signer-experience">✍️ Signer Experience<a href="#-signer-experience" class="hash-link" aria-label="Direct link to ✍️ Signer Experience" title="Direct link to ✍️ Signer Experience" translate="no"></a></h2>
<p>When the document is opened for signing:</p>
<ul>
<li class="">The signer will see a <strong>numeric input box</strong> at the widgets location.</li>
<li class="">Only <strong>digits (09)</strong> can be entered.</li>
<li class="">If marked as <strong>Required</strong>, the signer cannot finish signing without entering a number.</li>
<li class="">The entered value appears in the final signed PDF.</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="-using-formulas-in-the-number-field">🔢 Using Formulas in the Number Field<a href="#-using-formulas-in-the-number-field" class="hash-link" aria-label="Direct link to 🔢 Using Formulas in the Number Field" title="Direct link to 🔢 Using Formulas in the Number Field" translate="no"></a></h2>
<p>You can use number widgets to perform <strong>arithmetic and algebraic calculations</strong> inside the <strong>Formula</strong> field.<br>
<!-- -->Assume you have four number widgets named:<br>
<code>number-1</code>, <code>number-2</code>, <code>number-3</code>, and <code>number-4</code>.</p>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="-basic-formulas">🧩 Basic Formulas<a href="#-basic-formulas" class="hash-link" aria-label="Direct link to 🧩 Basic Formulas" title="Direct link to 🧩 Basic Formulas" translate="no"></a></h3>
<table><thead><tr><th><strong>Formula</strong></th><th><strong>Description</strong></th><th><strong>Example Result</strong></th></tr></thead><tbody><tr><td><code>{{number-1}} + {{number-2}}</code></td><td>Adds two numbers</td><td>10 + 5 = <strong>15</strong></td></tr><tr><td><code>{{number-1}} - {{number-3}}</code></td><td>Subtracts one number from another</td><td>20 - 4 = <strong>16</strong></td></tr><tr><td><code>{{number-1}} * {{number-2}}</code></td><td>Multiplies two numbers</td><td>6 * 3 = <strong>18</strong></td></tr><tr><td><code>{{number-1}} / {{number-2}}</code></td><td>Divides one number by another</td><td>25 / 5 = <strong>5</strong></td></tr><tr><td><code>({{number-1}} + {{number-2}}) * {{number-3}}</code></td><td>Groups values using parentheses</td><td>(4 + 6) * 2 = <strong>20</strong></td></tr><tr><td><code>{{number-1}} + {{number-2}} - ({{number-3}} * {{number-4}})</code></td><td>Combines multiple operations</td><td>10 + 8 - (2 * 3) = <strong>12</strong></td></tr></tbody></table>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="-advanced-formulas">🧮 Advanced Formulas<a href="#-advanced-formulas" class="hash-link" aria-label="Direct link to 🧮 Advanced Formulas" title="Direct link to 🧮 Advanced Formulas" translate="no"></a></h3>
<table><thead><tr><th><strong>Formula</strong></th><th><strong>Description</strong></th><th><strong>Example Result</strong></th></tr></thead><tbody><tr><td><code>({{number-1}} + {{number-2}} + {{number-3}}) / 3</code></td><td>Calculates the average of three widgets</td><td>(10 + 20 + 30) / 3 = <strong>20</strong></td></tr><tr><td><code>({{number-1}} * {{number-2}}) + ({{number-3}} / {{number-4}})</code></td><td>Combines multiplication and division</td><td>(5 * 6) + (8 / 4) = 30 + 2 = <strong>32</strong></td></tr><tr><td><code>({{number-1}} + {{number-2}}) * ({{number-3}} - {{number-4}})</code></td><td>Multiplies a sum by a difference</td><td>(10 + 5) * (6 - 2) = 15 * 4 = <strong>60</strong></td></tr><tr><td><code>({{number-1}} * {{number-2}} * {{number-3}}) / {{number-4}}</code></td><td>Calculates a scaled ratio</td><td>(2 * 3 * 4) / 2 = 24 / 2 = <strong>12</strong></td></tr><tr><td><code>({{number-1}} + {{number-2}} + {{number-3}} + {{number-4}}) / 4</code></td><td>Finds the average of four widgets</td><td>(8 + 10 + 12 + 14) / 4 = <strong>11</strong></td></tr><tr><td><code>{{number-1}} * ({{number-2}} + {{number-3}} - {{number-4}})</code></td><td>Weighted total</td><td>5 * (10 + 4 - 2) = 5 * 12 = <strong>60</strong></td></tr><tr><td><code>({{number-1}} * {{number-2}} + {{number-3}}) * {{number-4}}</code></td><td>Compound operation using addition and multiplication</td><td>(3 * 4 + 2) * 5 = (12 + 2) * 5 = <strong>70</strong></td></tr></tbody></table>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="-tips">🧠 Tips<a href="#-tips" class="hash-link" aria-label="Direct link to 🧠 Tips" title="Direct link to 🧠 Tips" translate="no"></a></h2>
<ul>
<li class="">Use <strong>parentheses <code>( )</code></strong> to control calculation order.</li>
<li class="">Formulas follow <strong>standard arithmetic precedence</strong> (multiplication/division before addition/subtraction).</li>
<li class="">Only <strong>number widgets (<code>{{number-x}}</code>)</strong> can be used in formulas.</li>
<li class="">Non-numeric fields (like text or date) are <strong>not supported</strong> in formula expressions.</li>
<li class="">Ensure all widget names used in formulas exist in the same document.</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="-need-help">📩 Need Help?<a href="#-need-help" class="hash-link" aria-label="Direct link to 📩 Need Help?" title="Direct link to 📩 Need Help?" translate="no"></a></h2>
<p>If you need further assistance, contact our support team at <strong><a href="mailto:support@opensignlabs.com" target="_blank" rel="noopener noreferrer" class="">support@opensignlabs.com</a></strong>.</p>
<p>Happy Signing with <strong>OpenSign™</strong>!</p></div></div></div><div class="row"><div class="col col--12"><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href="https://github.com/opensignlabs/opensign/tree/feat-docs/docs/docs/help/New-Document/widgets.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></div></div></article><div class="row"><div class="col col--12"><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/help/New-Document/request-signatures"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Request signatures</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/help/New-Document/edit-document-before-sending"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Editing Your Document Before Sending</div></a></nav></div></div></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#-purpose" class="table-of-contents__link toc-highlight">🔹 Purpose</a></li><li><a href="#-how-to-add-a-number-widget" class="table-of-contents__link toc-highlight">🧭 How to Add a Number Widget</a></li><li><a href="#-widget-properties" class="table-of-contents__link toc-highlight">⚙️ Widget Properties</a></li><li><a href="#-signer-experience" class="table-of-contents__link toc-highlight">✍️ Signer Experience</a></li><li><a href="#-using-formulas-in-the-number-field" class="table-of-contents__link toc-highlight">🔢 Using Formulas in the Number Field</a><ul><li><a href="#-basic-formulas" class="table-of-contents__link toc-highlight">🧩 Basic Formulas</a></li><li><a href="#-advanced-formulas" class="table-of-contents__link toc-highlight">🧮 Advanced Formulas</a></li></ul></li><li><a href="#-tips" class="table-of-contents__link toc-highlight">🧠 Tips</a></li><li><a href="#-need-help" class="table-of-contents__link toc-highlight">📩 Need Help?</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/help/intro">Help</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/API-docs/v1.1">APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/contribute/intro">Contribute</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/self-host/intro">Self-host</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://discord.com/invite/xe9TDuyAyj" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://www.linkedin.com/company/opensign%E2%84%A2/" target="_blank" rel="noopener noreferrer" class="footer__link-item">LinkedIn<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://www.twitter.com/opensignhq" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://www.facebook.com/profile.php?id=61551030403669" target="_blank" rel="noopener noreferrer" class="footer__link-item">Facebook<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://www.opensignlabs.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Official Website<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/opensignlabs/opensign" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 OpenSign™. <br>The best Open Source DocuSign alternative.</div></div></div></footer></div>
</body>
</html>