### Project Build and Serve Commands (Shell)

Source: https://context7.com/team-forms/community/llms.txt

Provides the necessary shell commands to install project dependencies, build the templates (generating JSON and preview images), and serve the templates locally for development testing.

```sh
# Install dependencies
npm install

# Build templates (generates dist/ with JSON and preview images)
npm run build

# Serve templates locally for testing
npm run serve
```

--------------------------------

### Response Title Template Examples (JSON)

Source: https://context7.com/team-forms/community/llms.txt

Demonstrates how to configure dynamic titles for form submissions using `responsesTitleTemplate`. This allows titles to be generated based on form data values.

```json
{
  "responsesTitleTemplate": "Invoice #{{ invoiceNo }}",
  "title": "Invoice Template"
}
```

```json
{
  "responsesTitleTemplate": "Expense Claim - ${{ totalExpense }} - {{ status }}",
  "title": "Expense Claim"
}
```

--------------------------------

### Build and Serve Project Locally (Shell)

Source: https://github.com/team-forms/community/blob/main/README.md

Commands to update the distribution directory and serve the project locally for testing. Ensure you run `npm run build` before committing changes to keep the dist directory updated.

```sh
# Update dist directory
npm run build

# Serve the dist directory locally for testing
npm run serve
```

--------------------------------

### File Upload Component Configuration (JSON)

Source: https://context7.com/team-forms/community/llms.txt

Configures a file upload component that allows users to attach files or photos. It supports multiple files, specifies storage options (e.g., indexeddb), and includes settings for file patterns, minimum, and maximum sizes.

```json
{
  "label": "Inspection Photos",
  "type": "file",
  "key": "inspectionPhotos",
  "input": true,
  "storage": "indexeddb",
  "multiple": true,
  "filePattern": "*",
  "fileMinSize": "0KB",
  "fileMaxSize": "1GB",
  "validate": {
    "required": true
  }
}
```

--------------------------------

### Signature Component Configuration (JSON)

Source: https://context7.com/team-forms/community/llms.txt

Sets up a component for capturing electronic signatures. It allows customization of dimensions, colors, and includes an `onChange` event to automatically timestamp the signature when it's completed.

```json
{
  "label": "Signature",
  "type": "signature",
  "key": "signature",
  "input": true,
  "height": 135,
  "width": "100%",
  "penColor": "black",
  "backgroundColor": "rgb(245,245,235)",
  "footer": "Sign above",
  "onChange": "if(data.signature){ instance.root.getComponent('approvalTimestamp').setValue(new Date()); }"
}
```

--------------------------------

### Implement Select Component with External API

Source: https://context7.com/team-forms/community/llms.txt

Configures a dropdown that fetches data from a remote REST API, supporting lazy loading and custom display templates.

```json
{
  "label": "Make",
  "type": "select",
  "key": "make",
  "input": true,
  "dataSrc": "url",
  "data": {
    "url": "https://parallelum.com.br/fipe/api/v1/carros/marcas"
  },
  "valueProperty": "codigo",
  "template": "<span>{{ item.nome }}</span>",
  "searchEnabled": true,
  "lazyLoad": true
}
```

--------------------------------

### Build Data Grid Component

Source: https://context7.com/team-forms/community/llms.txt

Defines a tabular input structure that allows users to add dynamic rows, useful for line items or expense tracking.

```json
{
  "label": "Purchase Table",
  "type": "datagrid",
  "key": "purchaseTable",
  "input": true,
  "reorder": true,
  "customClass": "table-striped",
  "defaultValue": [
    { "item": "", "quantity": "", "unitPrice": "", "total": null }
  ],
  "components": [
    { "label": "Item", "type": "textfield", "key": "item", "tableView": true },
    { "label": "Quantity", "type": "number", "key": "quantity" },
    { "label": "Unit Price", "type": "currency", "key": "unitPrice", "currency": "USD" },
    { "label": "Total", "type": "currency", "key": "total", "disabled": true, "calculateValue": "value = row.quantity * row.unitPrice" }
  ]
}
```

--------------------------------

### Status Select with Permissions Configuration (JSON)

Source: https://context7.com/team-forms/community/llms.txt

A dropdown (select) component for status updates, with options like 'Pending Approval', 'Approved', etc. It can be disabled by default and has specific user permissions for editing.

```json
{
  "label": "Status",
  "type": "select",
  "key": "status",
  "input": true,
  "disabled": true,
  "defaultValue": "Pending Approval",
  "data": {
    "values": [
      { "label": "Pending Approval", "value": "Pending Approval" },
      { "label": "Approved", "value": "Approved" },
      { "label": "Rejected", "value": "Rejected" },
      { "label": "Processed", "value": "Processed" }
    ]
  },
  "permissions": [
    { "user": { "id": "approver-user-id" }, "permissionLevel": "edit" }
  ]
}
```

--------------------------------

### DateTime Component Configuration (JSON)

Source: https://context7.com/team-forms/community/llms.txt

Configures a date and time input field. It supports custom formats, enables or disables date and time selection independently, and allows setting a default date using moment.js.

```json
{
  "label": "Inspection Date",
  "type": "datetime",
  "key": "inspectionDate",
  "input": true,
  "format": "yyyy-MM-dd hh:mm a",
  "enableDate": true,
  "enableTime": true,
  "defaultDate": "moment()",
  "disabled": true,
  "datePicker": {
    "disableWeekends": false,
    "disableWeekdays": false
  }
}
```

--------------------------------

### Panel Component Configuration (JSON)

Source: https://context7.com/team-forms/community/llms.txt

Defines a collapsible panel to group related form components. It supports conditional display logic and can have user permissions assigned to control access.

```json
{
  "title": "Approvals",
  "type": "panel",
  "key": "approvals",
  "collapsible": true,
  "components": [
    // Nested components for approval workflow
  ],
  "permissions": [
    {
      "user": { "displayName": "Manager Name", "id": "user-id" },
      "permissionLevel": "edit"
    }
  ]
}
```

--------------------------------

### Add User Picker Component

Source: https://context7.com/team-forms/community/llms.txt

Integrates a user selection field that queries the Microsoft 365 organization directory for assigning tasks or approvals.

```json
{
  "label": "Approver",
  "type": "user",
  "key": "approver",
  "input": true,
  "widget": "choicesjs",
  "usersSource": "organization",
  "data": {
    "custom": "instance.updateUsers()"
  },
  "dataSrc": "custom",
  "searchEnabled": true,
  "template": "<span>{{ item.label }}</span>"
}
```

--------------------------------

### Configure Text Field Component

Source: https://context7.com/team-forms/community/llms.txt

Implements a standard text input field with optional validation rules such as pattern matching and length constraints.

```json
{
  "label": "License Plate",
  "type": "textfield",
  "key": "vinNumber",
  "input": true,
  "tableView": true,
  "validate": {
    "required": false,
    "minLength": "",
    "maxLength": "",
    "pattern": ""
  },
  "placeholder": "",
  "inputFormat": "plain"
}
```

--------------------------------

### Implement Radio Button Component

Source: https://context7.com/team-forms/community/llms.txt

Creates a multiple-choice selection input, often used for surveys, quizzes, or assessments.

```json
{
  "label": "1. Which of the following is NOT a common workplace hazard?",
  "type": "radio",
  "key": "question1",
  "input": true,
  "optionsLabelPosition": "right",
  "values": [
    { "label": "a. Slips, trips, and falls", "value": "a" },
    { "label": "b. Loud noises", "value": "b" },
    { "label": "c. Proper ergonomics", "value": "c" },
    { "label": "d. Chemical exposure", "value": "d" }
  ]
}
```

--------------------------------

### Quiz Scoring Component Configuration (JSON)

Source: https://context7.com/team-forms/community/llms.txt

Defines a quiz scoring mechanism where points are awarded based on matching user answers to predefined correct values. This component calculates a numerical score.

```json
{
  "label": "Score",
  "type": "number",
  "key": "score",
  "input": true,
  "calculateValue": "value = (data.question1 === 'c' ? 1 : 0) + (data.question2 === 'b' ? 1 : 0) + (data.question3 === 'd' ? 1 : 0) + (data.question4 === 'c' ? 1 : 0) + (data.question5 === 'd' ? 1 : 0)"
}
```

--------------------------------

### Conditional HTML Element Configuration (JSON)

Source: https://context7.com/team-forms/community/llms.txt

Renders dynamic HTML content based on form data. The `conditional` property determines when the element is displayed, using `when` and `eq` to specify the condition.

```json
{
  "type": "htmlelement",
  "key": "html",
  "tag": "p",
  "content": "<div class=\"alert alert-success\">Your expense claim has been approved by {{ data.approver.displayName }}</div>",
  "refreshOnChange": true,
  "conditional": {
    "show": true,
    "when": "action",
    "eq": "Approved"
  }
}
```

--------------------------------

### Define Form Template Structure

Source: https://context7.com/team-forms/community/llms.txt

Defines the root JSON object for a form template, including metadata, tags, and the primary schema containing form components.

```json
{
  "title": "Invoice Template",
  "description": "Create standardized invoice PDF's and track what invoices are created",
  "tags": ["procurement", "finance", "billing", "invoice", "payment"],
  "icon": "<svg>...</svg>",
  "responsesTitleTemplate": "Invoice #{{ invoiceNo }}",
  "schema": {
    "display": "form",
    "components": []
  }
}
```

--------------------------------

### Create Cascading Select Component

Source: https://context7.com/team-forms/community/llms.txt

Sets up a dependent dropdown that automatically refreshes its options based on the value selected in a parent field.

```json
{
  "label": "Model",
  "type": "select",
  "key": "model",
  "input": true,
  "dataSrc": "url",
  "data": {
    "url": "https://parallelum.com.br/fipe/api/v1/carros/marcas/{{data.make}}/modelos"
  },
  "refreshOn": "make",
  "selectValues": "modelos",
  "valueProperty": "codigo",
  "template": "<span>{{ item.nome }}</span>"
}
```

--------------------------------

### Define Calculated Field

Source: https://context7.com/team-forms/community/llms.txt

Uses JavaScript expressions to perform real-time calculations based on other fields within the form schema.

```json
{
  "label": "Subtotal",
  "type": "currency",
  "key": "subtotal",
  "input": true,
  "disabled": true,
  "currency": "USD",
  "calculateValue": "value = _.sumBy(data.purchaseTable, (tableRow) => { return tableRow.total || 0 })"
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.