Overview

The Data Table element displays structured key-value data in a table format. It’s designed for documents like insurance certificates, financial summaries, and account overviews where data arrives from external systems (XML/JSON via API or webhook) and needs to be presented as styled tables.

Data Sources Static JSON — Enter JSON directly in the properties panel editor. Good for prototyping and fixed content.

Variable — Bind to a variable name populated at runtime via API/webhook. The element reads data from dataTableValues using the element’s property key or explicit variable name. This is the primary production use case.

Both can coexist: static JSON is the fallback, runtime variable data overrides when present.

JSON Schema

{
  "title": "Optional Table Title",
  "style": {
    "borderStyle": "full",
    "borderColor": "#e5e7eb",
    "fontSize": "14px",
    "fontFamily": "Arial, sans-serif",
    "cellPadding": "4px 10px",
    "titleFontSize": "1.4em",
    "titleFontWeight": "700",
    "titleBorderWidth": "3px",
    "labelBackground": "#f5f5f0",
    "labelColor": "#333",
    "labelWidth": "25%",
    "labelFontWeight": "normal",
    "valueAlignment": "left",
    "headerBackground": "#f0f0eb",
    "boldBackground": null
  },
  "rows": [
    {
      "label": "Row Label",
      "values": ["Value 1", "Value 2"],
      "bold": false,
      "header": false
    }
  ]
}

Automatic Layout Behaviors

RowSpan — When consecutive rows omit the label property, they are grouped under the previous labeled row. The label cell automatically spans all grouped rows.

ColSpan — The maximum number of value columns is determined across all rows. If a row has fewer values than the max, the last value cell spans the remaining columns.

Line breaks — Use \n in string values for line breaks.

Bullet lists — Use an array of strings as a value to render a bulleted list:

{
  "title": "Includes Example",
  "rows": [
    {
      "label": "Included Items",
      "values": [
        [
          "Item 1",
          "Item 2",
          "Item 3"
        ]
      ]
    },
    {
      "label": "Regular Value",
      "values": ["Normal row without list"]
    }
  ]
}

Example: Insurance Certificate

{
  "title": "Insurance Certificate",
  "style": {
    "borderStyle": "rows",
    "labelBackground": "#f5f5f0",
    "labelWidth": "30%",
    "titleFontSize": "1.4em",
    "titleBorderWidth": "3px"
  },
  "rows": [
    { "label": "Policyholder:", "values": ["John Doe"] },
    { "label": "Policy Number:", "values": ["1234567"] },
    { "label": "Coverage:", "values": ["Covers", "Deductible"], "header": true },
    { "label": "Liability", "values": ["Liability Coverage", "None"] },
    { "values": ["Legal assistance up to $100,000", "$4,000"] },
    { "label": "Total:", "values": ["$15,000"], "bold": true }
  ]
}

Example: Account Overview

{
  "title": "Account Overview",
  "style": {
    "borderStyle": "full",
    "labelWidth": "40%",
    "valueAlignment": "right"
  },
  "rows": [
    { "label": "Account Name", "values": ["Savings Account"], "header": true },
    { "label": "Account Number:", "values": ["1234.56.78901"] },
    { "label": "Balance:", "values": ["$150,000.00"], "bold": true }
  ]
}

Visual Example

The screenshot below shows how the JSON example renders inside the Smartform editor:

Overview

The HTML element is used to add custom content that requires more flexibility than standard Smartform elements.
Typical use cases include:

• Custom text layouts
• Branded information boxes
• Columns or structured content
• Highlight sections
• Simple decorative elements

How to add HTML

1. Drag the HTML element into the Smartform
2. Open the Value field
3. Paste or write your HTML code
4. Save the form and preview the result

Example

This simple HTML block creates a styled info box:

<div style="padding: 18px; border-radius: 14px; background: #ffffff; border: 1px solid #e6e6e6; width: 360px; font-family: Arial, sans-serif;">
 
  <!-- Circle icon/figure -->
  <div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6bb9f0, #4da8da);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.12);">
    <div style="
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: white;">
    </div>
  </div>
 
  <!-- Title -->
  <div style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 6px;">
    Status Overview
  </div>
 
  <!-- Description -->
  <div style="font-size: 13px; color: #666; margin-bottom: 14px;">
    A visual summary block that can be used to highlight information inside your Smartform.
  </div>
 
  <!-- 3-column stats -->
  <div style="display: flex; gap: 10px;">
 
    <div style="flex: 1; background: #f7faff; padding: 10px; border-radius: 10px; text-align: center;">
      <div style="font-size: 16px; font-weight: bold; color: #4a90e2;">24</div>
      <div style="font-size: 11px; color: #777;">Items</div>
    </div>
 
    <div style="flex: 1; background: #f9f9f9; padding: 10px; border-radius: 10px; text-align: center;">
      <div style="font-size: 16px; font-weight: bold; color: #555;">7</div>
      <div style="font-size: 11px; color: #777;">Pending</div>
    </div>
 
    <div style="flex: 1; background: #f7faff; padding: 10px; border-radius: 10px; text-align:center;">
      <div style="font-size: 16px; font-weight: bold; color: #4a90e2;">3</div>
      <div style="font-size: 11px; color: #777;">Alerts</div>
    </div>
 
  </div>
</div>

Visual Example

The screenshot below shows how the HTML example renders inside the Smartform editor:

Purpose
The Map element is used when you want to show locations retrieved from an API.
To display locations inside the map, you must first set up a workflow that calls an API and then updates the Smartform with the data.

Step 1: Create a Workflow

1. Go to Workflow in Smartforms Studio
2. Click New Workflow
3. Choose trigger:
   • Trigger event: Element on load
   • Set up trigger: Select the Smartform that contains your Map element

This makes sure the workflow runs automatically when the user opens the form.

Step 2: REST API call

1. Add a new Action
2. Choose REST API
3. Action event: GET
4. In Set up action, paste the API URL that returns map locations
   Example:
   https://faas-ams3-2a2df116.doserverless.co/api/v1/web/fn-875f7dde-eba8-447d-a54a-6101f2a574de/default/map_locations
5. Under response format, select Raw data (not Flattened)
6. Click Test action
   • You will now see the API response in the test window

Step 3: Update Smartform with the API data

1. Add a new Action
2. Choose Update values in Smartform
3. Action event: Update
4. In Set up action:
   • Choose the same Smartform
   • The Map element will appear in the list
   • Paste the raw data from the previous test into the Map field

Now the workflow knows how to insert the API data into the map.

Step 4: Publish the workflow

1. Click Publish in the top right corner
2. Activate the workflow

This makes sure the workflow is ready and connected.

Step 5: Connect workflow to Map in the Smartform

1. Go back to the Smartform
2. Click on the Map element
3. Open the Integration tab
4. Under Workflow, choose the workflow you created
   Example: Load map with data

Result

When a user opens the Smartform:

• The workflow runs automatically
• The API is called
• Locations are retrieved
• The Map element displays these locations in a dropdown and on the map

The user can now select a location that was retrieved from your API.

Purpose

The QR Code element generates a scannable code based on a value you enter.
You can use static text, a normal URL, or dynamic variables from the Smartform.

How to use

1. Add the QR Code element to your Smartform
2. Open the Value field
3. Enter the text or URL you want the QR code to point to
4. The QR code is generated automatically

You can use it for:

• Linking to a website
• Showing product info
• Opening a portal page
• Quick access to external systems

Simple Example

To create a QR code that opens a website, enter an URL.

When the user scans the QR code, they will be taken directly to the page.

Dynamic Example

You can also let the QR code change based on what the user types into the Smartform.
In this example, the QR code will search Wikipedia for the user’s first name + last name.

Important:
The input fields must use the same Property names as the variables you use inside the QR Code.
Example: If your QR Code uses FirstName and LastName, the input fields must have Property = FirstName and Property = LastName.
Otherwise the QR Code will not update correctly.

Enter this in the Value field:

When the user fills in:

• First Name: John
• Last Name: Doe

The QR code will point to John Doe’s Wikipedia page.

This is useful for generating dynamic lookups, profile links, or search URLs.

Purpose

A Smart Table is used when you want the user to add, edit, or remove rows of data when filling out the Smartform.
To make this work, the Smart Table must be connected to a Smart Object.

How to create a Smart Object

1. Go to the Templates tab in Smartforms Studio.
2. Select Smart Object in the left menu.
3. Click New Object.
4. Give the Smart Object a name.
5. Add the fields (properties) the table should contain — for example:
   • Product
   • Quantity
   • Price
   • Comment
6. When finished, click Publish (top right).
7. The Smart Object will now appear in the Smart Object list.

Connect Smart Object to the Smart Table

1. Go back to your Smartform.
2. Find your Smart Table element.
3. Open the dropdown called Connected Smart Object.
4. Select the Smart Object you just created.
5. The Smart Table will now use the fields from the Smart Object.

The user will now be able to:

• Add rows
• Fill out the fields
• Delete rows
• Submit the data back to the system

Example

A Smart Object with the type:

• String
• Dropdown
• Checkbox
• Date

…will result in a Smart Table where the user sees:

And the user can press Add Item to insert rows.

Visual Example

Purpose

The Static Table element displays structured, tabular data in a Smartform.

• Read-only (end-users cannot edit values)
• Used for presenting static or dynamic data
• Supports manual configuration or variable-based population

Data Source Options

Static Data (Manual)

Use when table content is predefined.

Configuration:

1. Select the element.
2. Set Data Source to Static Data.
3. Click Edit Columns to define columns.
4. Click Edit Data to add rows.

Suitable for fixed informational tables.

Variable (Dynamic)

Use when data is provided via:

• API (Smartform creation)
• Workflow
• Dataset (testing)

Variable Requirements:

• Must be a datatable value (array of objects).
• Each object represents one row.
• Object keys must match configured column keys.

Example:

{
  "dataTableValue": {
    "orderLines": [
      {
        "productName": "Laptop Pro 14\"",
        "quantity": "2",
        "unitPrice": "1500"
      },
      {
        "productName": "Wireless Mouse",
        "quantity": "5",
        "unitPrice": "25"
      }
    ]
  }
}

Tip:
You can enable Use First Row as Headers to automatically use the first row values as column headers.
When enabled, the first row will not be displayed as data.