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

85 lines
30 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.7.0">
<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"><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.6bed5790.css">
<script src="/assets/js/runtime~main.a52a7265.js" defer="defer"></script>
<script src="/assets/js/main.fbed2f27.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"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="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="navbar navbar--fixed-top"><div class="navbar__inner"><div class="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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a><a class="navbar__item navbar__link" href="/docs/self-host/intro">Self-host</a></div><div class="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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="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" class="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></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="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">Intro</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="menu__link menu__link--sublist menu__link--active" href="/docs/category/create-new-opensign-document">Create New OpenSign Document</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 style="display:block;overflow:visible;height:auto" 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">Sign your-self</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">Request signatures</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">Widgets in OpenSign</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">Editing Your Document Before Sending</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">Enforce email OTP verification</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="menu__link menu__link--sublist" href="/docs/category/manage-docs-using-opensign-drive">Manage Docs using OpenSign™ Drive</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="menu__link menu__link--sublist" href="/docs/category/documents">Documents</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="menu__link menu__link--sublist" href="/docs/category/templates">Templates</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="menu__link menu__link--sublist" href="/docs/category/settings">Settings</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="menu__link menu__link--sublist" href="/docs/category/user-menu">User Menu</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="menu__link menu__link--sublist" href="/docs/category/faqs">FAQs</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" itemscope="" itemtype="https://schema.org/BreadcrumbList"><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 itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/category/create-new-opensign-document"><span itemprop="name">Create New OpenSign Document</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Widgets in OpenSign</span><meta itemprop="position" content="2"></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>Create fillable and interactive documents</li>
<li>Control the type of input signers can provide (text, date, number, etc.)</li>
<li>Ensure data consistency and validation</li>
<li>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 anchorWithStickyNavbar_LWe7" id="-purpose">🔹 Purpose<a href="#-purpose" class="hash-link" aria-label="Direct link to 🔹 Purpose" title="Direct link to 🔹 Purpose"></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>Numeric IDs (e.g., Employee ID, Order Number)</li>
<li>Amounts or currency values</li>
<li>Quantity or item counts</li>
<li>Zip/Postal codes</li>
</ul>
<hr>
<h2 class="anchor anchorWithStickyNavbar_LWe7" 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"></a></h2>
<ol>
<li>Upload the document and open the Create Document panel.</li>
<li>From the <strong>Widget Toolbar</strong>, select <strong>“Number”</strong>.</li>
<li>Click anywhere on the document where you want the number field to appear.</li>
<li>Adjust its size and position as needed.</li>
<li>Assign the widget to a <strong>signer</strong> (if the document has multiple signers).</li>
</ol>
<hr>
<h2 class="anchor anchorWithStickyNavbar_LWe7" 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"></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 anchorWithStickyNavbar_LWe7" 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"></a></h2>
<p>When the document is opened for signing:</p>
<ul>
<li>The signer will see a <strong>numeric input box</strong> at the widgets location.</li>
<li>Only <strong>digits (09)</strong> can be entered.</li>
<li>If marked as <strong>Required</strong>, the signer cannot finish signing without entering a number.</li>
<li>The entered value appears in the final signed PDF.</li>
</ul>
<hr>
<h2 class="anchor anchorWithStickyNavbar_LWe7" 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"></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 anchorWithStickyNavbar_LWe7" 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"></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 anchorWithStickyNavbar_LWe7" 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"></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 anchorWithStickyNavbar_LWe7" id="-tips">🧠 Tips<a href="#-tips" class="hash-link" aria-label="Direct link to 🧠 Tips" title="Direct link to 🧠 Tips"></a></h2>
<ul>
<li>Use <strong>parentheses <code>( )</code></strong> to control calculation order.</li>
<li>Formulas follow <strong>standard arithmetic precedence</strong> (multiplication/division before addition/subtraction).</li>
<li>Only <strong>number widgets (<code>{{number-x}}</code>)</strong> can be used in formulas.</li>
<li>Non-numeric fields (like text or date) are <strong>not supported</strong> in formula expressions.</li>
<li>Ensure all widget names used in formulas exist in the same document.</li>
</ul>
<hr>
<h2 class="anchor anchorWithStickyNavbar_LWe7" 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?"></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">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"><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="pagination-nav docusaurus-mt-lg" 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="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="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="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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a></li></ul></div><div class="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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></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-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 OpenSign™. <br>The best Open Source DocuSign alternative.</div></div></div></footer></div>
</body>
</html>