OpenSign/assets/js/5c485335.fe1bbef5.js

"use strict";(self.webpackChunkOpenSign_Docs=self.webpackChunkOpenSign_Docs||[]).push([[2075],{27626:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>d,metadata:()=>r,toc:()=>o});const r=JSON.parse('{"id":"help/New-Document/widgets","title":"Widgets in OpenSign","description":"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.","source":"@site/docs/help/New-Document/widgets.md","sourceDirName":"help/New-Document","slug":"/help/New-Document/widgets","permalink":"/docs/help/New-Document/widgets","draft":false,"unlisted":false,"editUrl":"https://github.com/opensignlabs/opensign/tree/feat-docs/docs/docs/help/New-Document/widgets.md","tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3,"title":"Widgets in OpenSign"},"sidebar":"tutorialSidebar","previous":{"title":"Request signatures","permalink":"/docs/help/New-Document/request-signatures"},"next":{"title":"Editing Your Document Before Sending","permalink":"/docs/help/New-Document/edit-document-before-sending"}}');var i=s(74848),t=s(28453);const d={sidebar_position:3,title:"Widgets in OpenSign"},l="\ud83e\udde9 Understanding the Number Widget",c={},o=[{value:"\ud83d\udd39 Purpose",id:"-purpose",level:2},{value:"\ud83e\udded How to Add a Number Widget",id:"-how-to-add-a-number-widget",level:2},{value:"\u2699\ufe0f Widget Properties",id:"\ufe0f-widget-properties",level:2},{value:"\u270d\ufe0f Signer Experience",id:"\ufe0f-signer-experience",level:2},{value:"\ud83d\udd22 Using Formulas in the Number Field",id:"-using-formulas-in-the-number-field",level:2},{value:"\ud83e\udde9 Basic Formulas",id:"-basic-formulas",level:3},{value:"\ud83e\uddee Advanced Formulas",id:"-advanced-formulas",level:3},{value:"\ud83e\udde0 Tips",id:"-tips",level:2},{value:"\ud83d\udce9 Need Help?",id:"-need-help",level:2}];function h(e){const n={a:"a",br:"br",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"-understanding-the-number-widget",children:"\ud83e\udde9 Understanding the Number Widget"})}),"\n",(0,i.jsxs)(n.p,{children:["Widgets in ",(0,i.jsx)(n.strong,{children:"OpenSign"})," are interactive fields that you can place on your documents to collect information, signatures, or confirmations from recipients during the signing process."]}),"\n",(0,i.jsx)(n.p,{children:"They make your documents dynamic \u2014 allowing signers to fill in details like names, dates, numbers, checkboxes, or digital signatures directly within the document."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Widgets help you:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Create fillable and interactive documents"}),"\n",(0,i.jsx)(n.li,{children:"Control the type of input signers can provide (text, date, number, etc.)"}),"\n",(0,i.jsx)(n.li,{children:"Ensure data consistency and validation"}),"\n",(0,i.jsx)(n.li,{children:"Streamline form completion and signing workflows"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["OpenSign offers various widget types such as ",(0,i.jsx)(n.strong,{children:"Signature"}),", ",(0,i.jsx)(n.strong,{children:"Initial"}),", ",(0,i.jsx)(n.strong,{children:"Text"}),", ",(0,i.jsx)(n.strong,{children:"Date"}),", ",(0,i.jsx)(n.strong,{children:"Checkbox"}),", ",(0,i.jsx)(n.strong,{children:"Stamp"}),", and the newly added ",(0,i.jsx)(n.strong,{children:"Number Widget"})," \u2014 each designed for specific use cases."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h1,{id:"-number-widget",children:"\ud83e\uddee Number Widget"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.strong,{children:"Number Widget"})," in ",(0,i.jsx)(n.strong,{children:"OpenSign"})," lets you collect numeric input from signers within your document.",(0,i.jsx)(n.br,{}),"\n","It can also perform ",(0,i.jsx)(n.strong,{children:"dynamic calculations"})," using values from other number widgets."]}),"\n",(0,i.jsxs)(n.p,{children:["This widget ensures that only ",(0,i.jsx)(n.strong,{children:"numbers"})," are entered, helping maintain data accuracy and consistency across signed documents."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"-purpose",children:"\ud83d\udd39 Purpose"}),"\n",(0,i.jsxs)(n.p,{children:["Use the ",(0,i.jsx)(n.strong,{children:"Number Widget"})," when you need signers to input strictly numeric data during the signing process.",(0,i.jsx)(n.br,{}),"\n","It\u2019s ideal for:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Numeric IDs (e.g., Employee ID, Order Number)"}),"\n",(0,i.jsx)(n.li,{children:"Amounts or currency values"}),"\n",(0,i.jsx)(n.li,{children:"Quantity or item counts"}),"\n",(0,i.jsx)(n.li,{children:"Zip/Postal codes"}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"-how-to-add-a-number-widget",children:"\ud83e\udded How to Add a Number Widget"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Upload the document and open the Create Document panel."}),"\n",(0,i.jsxs)(n.li,{children:["From the ",(0,i.jsx)(n.strong,{children:"Widget Toolbar"}),", select ",(0,i.jsx)(n.strong,{children:"\u201cNumber\u201d"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"Click anywhere on the document where you want the number field to appear."}),"\n",(0,i.jsx)(n.li,{children:"Adjust its size and position as needed."}),"\n",(0,i.jsxs)(n.li,{children:["Assign the widget to a ",(0,i.jsx)(n.strong,{children:"signer"})," (if the document has multiple signers)."]}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"\ufe0f-widget-properties",children:"\u2699\ufe0f Widget Properties"}),"\n",(0,i.jsxs)(n.p,{children:["You can configure the following options for the ",(0,i.jsx)(n.strong,{children:"Number Widget"}),":"]}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Property"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"Name"})}),(0,i.jsxs)(n.td,{children:["A unique identifier for this number widget. ",(0,i.jsx)("br",{}),"\u2022 Example: ",(0,i.jsx)(n.code,{children:"number-1"}),", ",(0,i.jsx)(n.code,{children:"number-2"})," ",(0,i.jsx)("br",{}),"\u2022 Must be unique within the document. ",(0,i.jsx)("br",{}),"\u2022 Used in formulas as ",(0,i.jsx)(n.code,{children:"{{number-1}}"}),". ",(0,i.jsx)("br",{}),"\ud83d\udd38 ",(0,i.jsx)(n.em,{children:"If you include a number widget in a formula, its name must be unique, since formulas rely on these identifiers."})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"Default Value"})}),(0,i.jsx)(n.td,{children:"(Optional) Sets an initial numeric value for the widget. This value appears automatically unless changed by the signer or overridden by a formula."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"Formula"})}),(0,i.jsx)(n.td,{children:"Defines a calculation using other number widgets."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"Required / Optional"})}),(0,i.jsx)(n.td,{children:"Specifies whether the signer must complete the field before submission."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"Placeholder"})}),(0,i.jsxs)(n.td,{children:["Displays hint text before input (e.g., ",(0,i.jsx)(n.em,{children:"12345"}),")."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"Font Size"})}),(0,i.jsx)(n.td,{children:"Controls the font size of the number displayed on the document."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"Color"})}),(0,i.jsx)(n.td,{children:"Sets the font color for the number field."})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"\ufe0f-signer-experience",children:"\u270d\ufe0f Signer Experience"}),"\n",(0,i.jsx)(n.p,{children:"When the document is opened for signing:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The signer will see a ",(0,i.jsx)(n.strong,{children:"numeric input box"})," at the widget\u2019s location."]}),"\n",(0,i.jsxs)(n.li,{children:["Only ",(0,i.jsx)(n.strong,{children:"digits (0\u20139)"})," can be entered."]}),"\n",(0,i.jsxs)(n.li,{children:["If marked as ",(0,i.jsx)(n.strong,{children:"Required"}),", the signer cannot finish signing without entering a number."]}),"\n",(0,i.jsx)(n.li,{children:"The entered value appears in the final signed PDF."}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"-using-formulas-in-the-number-field",children:"\ud83d\udd22 Using Formulas in the Number Field"}),"\n",(0,i.jsxs)(n.p,{children:["You can use number widgets to perform ",(0,i.jsx)(n.strong,{children:"arithmetic and algebraic calculations"})," inside the ",(0,i.jsx)(n.strong,{children:"Formula"})," field.",(0,i.jsx)(n.br,{}),"\n","Assume you have four number widgets named:",(0,i.jsx)(n.br,{}),"\n",(0,i.jsx)(n.code,{children:"number-1"}),", ",(0,i.jsx)(n.code,{children:"number-2"}),", ",(0,i.jsx)(n.code,{children:"number-3"}),", and ",(0,i.jsx)(n.code,{children:"number-4"}),"."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"-basic-formulas",children:"\ud83e\udde9 Basic Formulas"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Formula"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Example Result"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"{{number-1}} + {{number-2}}"})}),(0,i.jsx)(n.td,{children:"Adds two numbers"}),(0,i.jsxs)(n.td,{children:["10 + 5 = ",(0,i.jsx)(n.strong,{children:"15"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"{{number-1}} - {{number-3}}"})}),(0,i.jsx)(n.td,{children:"Subtracts one number from another"}),(0,i.jsxs)(n.td,{children:["20 - 4 = ",(0,i.jsx)(n.strong,{children:"16"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"{{number-1}} * {{number-2}}"})}),(0,i.jsx)(n.td,{children:"Multiplies two numbers"}),(0,i.jsxs)(n.td,{children:["6 * 3 = ",(0,i.jsx)(n.strong,{children:"18"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"{{number-1}} / {{number-2}}"})}),(0,i.jsx)(n.td,{children:"Divides one number by another"}),(0,i.jsxs)(n.td,{children:["25 / 5 = ",(0,i.jsx)(n.strong,{children:"5"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"({{number-1}} + {{number-2}}) * {{number-3}}"})}),(0,i.jsx)(n.td,{children:"Groups values using parentheses"}),(0,i.jsxs)(n.td,{children:["(4 + 6) * 2 = ",(0,i.jsx)(n.strong,{children:"20"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"{{number-1}} + {{number-2}} - ({{number-3}} * {{number-4}})"})}),(0,i.jsx)(n.td,{children:"Combines multiple operations"}),(0,i.jsxs)(n.td,{children:["10 + 8 - (2 * 3) = ",(0,i.jsx)(n.strong,{children:"12"})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"-advanced-formulas",children:"\ud83e\uddee Advanced Formulas"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Formula"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Example Result"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"({{number-1}} + {{number-2}} + {{number-3}}) / 3"})}),(0,i.jsx)(n.td,{children:"Calculates the average of three widgets"}),(0,i.jsxs)(n.td,{children:["(10 + 20 + 30) / 3 = ",(0,i.jsx)(n.strong,{children:"20"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"({{number-1}} * {{number-2}}) + ({{number-3}} / {{number-4}})"})}),(0,i.jsx)(n.td,{children:"Combines multiplication and division"}),(0,i.jsxs)(n.td,{children:["(5 * 6) + (8 / 4) = 30 + 2 = ",(0,i.jsx)(n.strong,{children:"32"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"({{number-1}} + {{number-2}}) * ({{number-3}} - {{number-4}})"})}),(0,i.jsx)(n.td,{children:"Multiplies a sum by a difference"}),(0,i.jsxs)(n.td,{children:["(10 + 5) * (6 - 2) = 15 * 4 = ",(0,i.jsx)(n.strong,{children:"60"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"({{number-1}} * {{number-2}} * {{number-3}}) / {{number-4}}"})}),(0,i.jsx)(n.td,{children:"Calculates a scaled ratio"}),(0,i.jsxs)(n.td,{children:["(2 * 3 * 4) / 2 = 24 / 2 = ",(0,i.jsx)(n.strong,{children:"12"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"({{number-1}} + {{number-2}} + {{number-3}} + {{number-4}}) / 4"})}),(0,i.jsx)(n.td,{children:"Finds the average of four widgets"}),(0,i.jsxs)(n.td,{children:["(8 + 10 + 12 + 14) / 4 = ",(0,i.jsx)(n.strong,{children:"11"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"{{number-1}} * ({{number-2}} + {{number-3}} - {{number-4}})"})}),(0,i.jsx)(n.td,{children:"Weighted total"}),(0,i.jsxs)(n.td,{children:["5 * (10 + 4 - 2) = 5 * 12 = ",(0,i.jsx)(n.strong,{children:"60"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"({{number-1}} * {{number-2}} + {{number-3}}) * {{number-4}}"})}),(0,i.jsx)(n.td,{children:"Compound operation using addition and multiplication"}),(0,i.jsxs)(n.td,{children:["(3 * 4 + 2) * 5 = (12 + 2) * 5 = ",(0,i.jsx)(n.strong,{children:"70"})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"-tips",children:"\ud83e\udde0 Tips"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Use ",(0,i.jsxs)(n.strong,{children:["parentheses ",(0,i.jsx)(n.code,{children:"( )"})]})," to control calculation order."]}),"\n",(0,i.jsxs)(n.li,{children:["Formulas follow ",(0,i.jsx)(n.strong,{children:"standard arithmetic precedence"})," (multiplication/division before addition/subtraction)."]}),"\n",(0,i.jsxs)(n.li,{children:["Only ",(0,i.jsxs)(n.strong,{children:["number widgets (",(0,i.jsx)(n.code,{children:"{{number-x}}"}),")"]})," can be used in formulas."]}),"\n",(0,i.jsxs)(n.li,{children:["Non-numeric fields (like text or date) are ",(0,i.jsx)(n.strong,{children:"not supported"})," in formula expressions."]}),"\n",(0,i.jsx)(n.li,{children:"Ensure all widget names used in formulas exist in the same document."}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"-need-help",children:"\ud83d\udce9 Need Help?"}),"\n",(0,i.jsxs)(n.p,{children:["If you need further assistance, contact our support team at ",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.a,{href:"mailto:support@opensignlabs.com",children:"support@opensignlabs.com"})}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["Happy Signing with ",(0,i.jsx)(n.strong,{children:"OpenSign\u2122"}),"!"]})]})}function u(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},28453:(e,n,s)=>{s.d(n,{R:()=>d,x:()=>l});var r=s(96540);const i={},t=r.createContext(i);function d(e){const n=r.useContext(t);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]);