Blog
Home/

Tabs deep dive: anatomy of a tab

Author Paige Rossi
Paige RossiSr. Programmer Writer
Summary3 min read

Dig into the anatomy of a tab and learn to set properties to control its behavior and appearance.

    • Additional resources

    Table of contents

    Welcome back to the Tabs deep dive series, where I’m giving you all the information you need to customize your documents with tabs using the eSignature REST API! In my last post I explained the differences between some of the most common tab types. In this post, I'll dig deeper into the anatomy of tabs and show you how to set properties that control their behavior and appearance.

    While each type of tab is a little bit different, they all share similar properties that you’ll want to understand before you start adding them to your documents. The JSON below shows the definition of two different types of tabs, each with different properties.

    "tabs": {
      "signHereTabs": [
        {
          "anchorString": "**signature_1**",
          "anchorUnits": "pixels",
          "anchorXOffset": "20",
          "anchorYOffset": "10",
          "scaleValue": "1.5",
          "name": "signature",
          "optional": "true"
        },
      ],
      "textTabs": [
        {
          "xPosition": "100",
          "yPosition": "200",
          "width": "50",
          "height": "14",
          "name": "enterText",
          "documentId": "1",
          "pageNumber": "1",
          "required": "true"
        }
      ]
    }
    

    When creating custom tabs, developers frequently need to set a specific size for those tabs. The Text tab above includes width and height properties that determine the size of the tab in pixels. The size of Sign Here tabs, however, can’t be changed using width and height; instead, you need to use the scaleValue property, which takes a value between 0.5 (half the normal size) and 2 (twice the normal size).

    The major difference between the two tabs above is that the Sign Here tab is placed using an anchor string, while the Text tab is placed with specific coordinates. I’ll explain more about how to place tabs in your documents in a later post. For now, it’s important to note that the documentId and pageNumber properties are only required if you are not placing your tabs with anchor strings. The Text tab above is placed at specific x and y coordinates, so you need to use the documentId property to specify the document and the pageNumber property to indicate in which page of that document the tab should appear. 

    Another big difference between the Text tab and the Sign Here tab in the JSON above is that the Text tab is required, while the Sign Here tab is optional. This means that the signer needs to fill out the Text tab in order to finish signing the document, but they don’t need to complete the Sign Here tab. Even though the desired effect of the required and optional properties is the same, they are not interchangeable. Text and Number tabs use the required property, while Sign Here and Initial Here tabs use optional

    Tabs also have properties that can be used to customize their style. The JSON below demonstrates how to create a Full Name tab with various properties that change the font and color of the text while also italicizing it. In addition to the italic property, you can set the bold or underline properties to “true” to format the text in your tab.

    "fullNameTabs": [
      {
        "anchorString": "**full_name**",
        "anchorUnits": "pixels",
        "anchorXOffset": "20",
        "anchorYOffset": "10",
        "scaleValue": "1.5",
        "font": "Tahoma",
        "fontColor": "Purple",
        "italic": "true",
      },
    ],
    

    These are just some of the properties you can use to customize your tabs. For even more, see the API reference. Check back next month for the next post in the Tabs deep dive series, in which I’ll be showing you the different ways you can place tabs in your documents.

    Additional resources

    Author Paige Rossi
    Paige RossiSr. Programmer Writer

    Paige has been working for Docusign since 2020. As a Sr. Programmer Writer on the Developer Content team, she writes content and code to help developers learn how to use Docusign APIs.

    More posts from this author

    Related posts

    • Fast-Track Your Extension Apps with Reference Implementations
      Code Examples

      Fast-Track Your Extension Apps with Reference Implementations

      Author Karissa Jacobsen
      Karissa Jacobsen
    • Trending Topics: Latest from our forums (October 2024)
      Author Paige Rossi
      Paige Rossi
    • From the Trenches: Testing Docusign Connect with ngrok

      From the Trenches: Testing Docusign Connect with ngrok

      Author Ivan Dinkov
      Ivan Dinkov
    Fast-Track Your Extension Apps with Reference Implementations

    Fast-Track Your Extension Apps with Reference Implementations

    Author Karissa Jacobsen
    Karissa Jacobsen
    Trending Topics: Latest from our forums (October 2024)
    Author Paige Rossi
    Paige Rossi
    From the Trenches: Testing Docusign Connect with ngrok

    From the Trenches: Testing Docusign Connect with ngrok

    Author Ivan Dinkov
    Ivan Dinkov

    Discover what's new with Docusign IAM or start with eSignature for free

    Explore Docusign IAMTry eSignature for Free
    Person smiling while presenting