[PR #1141] [MERGED] chore: add more field types #1422

New issue

Closed

opened 2026-02-26 19:33:11 +03:00 by kerem · 0 comments

kerem commented 2026-02-26 19:33:11 +03:00

Owner

Copy link

📋 Pull Request Information

Original PR: https://github.com/documenso/documenso/pull/1141
Author: @catalinpit
Created: 5/3/2024
Status: ✅ Merged
Merged: 7/18/2024
Merged by: @Mythie

Base: main ← Head: feat/more-field-types

---

📝 Commits (10+)

• 98b0dbc chore: add more field types
• aa3ce6f chore: update fields in the ui
• 46ad49b chore: field border
• 8f96781 chore: update fields buttons
• 306d32f chore: field states editor changes
• cc380a8 chore: show recipients initials on hover
• c52560e chore: progress
• 6c69157 chore: advanced settings addition and fieldMeta field
• 4b53678 chore: add more field types
• 735eceb chore: field format update

📊 Changes

74 files changed (+5248 additions, -843 deletions)

View changed files

📝 apps/marketing/src/app/(marketing)/singleplayer/client.tsx (+3 -0)
📝 apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx (+10 -1)
📝 apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx (+1 -1)
📝 apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx (+10 -9)
📝 apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx (+101 -9)
➕ apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx (+292 -0)
📝 apps/web/src/app/(signing)/sign/[token]/date-field.tsx (+6 -2)
➕ apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx (+209 -0)
📝 apps/web/src/app/(signing)/sign/[token]/email-field.tsx (+8 -2)
📝 apps/web/src/app/(signing)/sign/[token]/name-field.tsx (+8 -2)
➕ apps/web/src/app/(signing)/sign/[token]/number-field.tsx (+337 -0)
➕ apps/web/src/app/(signing)/sign/[token]/radio-field.tsx (+190 -0)
📝 apps/web/src/app/(signing)/sign/[token]/signature-field.tsx (+3 -3)
📝 apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx (+73 -37)
📝 apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx (+47 -3)
📝 apps/web/src/app/(signing)/sign/[token]/text-field.tsx (+143 -26)
📝 apps/web/src/components/document/document-read-only-fields.tsx (+14 -4)
📝 packages/api/v1/implementation.ts (+2 -0)
➕ packages/lib/advanced-fields-validation/validate-checkbox.ts (+82 -0)
➕ packages/lib/advanced-fields-validation/validate-dropdown.ts (+54 -0)

...and 54 more files

📄 Description

Description

What I've done:

• Created an optional fieldMeta field of JSONB type in the Field model (prisma/schema.prisma). This way, we can store advanced configuration for each field. Also, the selected/chosen/entered value for each field is stored in the customText field.

• Created schemas and types for fieldMeta.

• Added the fieldMeta field in the appropriate schemas and types.

• Moved the title and description (DocumentFlowFormContainerHeader) from edit-template page into each template step - add-template-settings.tsx, add-template-placeholder.tsx and add-template-fields.tsx. They have their own title and description. Exactly like it's done for the documents.

  • Why did I do that? So, the header and description from "Field Advanced settings" doesn't collide with the info for each step.
  • Also added the code for clearing the localStorage of fields' settings when the fields get saved in a template (edit-template.tsx)

• Added the code for clearing the localStorage of fields' settings when the fields get saved in a document (edit-document.tsx).

• Created a new file for each field's advanced settings (checkbox, number, dropdown, radio). Also updated the text field to include advanced settings.

  • Also added the validation for each field both on the frontend and backend. We have the following:
    • For the Text field - field-items-advanced-settings/text-field.tsx:
      • If the field has the readOnly and required checked at the same time, it will throw an error.
      • If the field is readOnly, it should have a value for the text field.
      • If the characterLimit is not a number, it will throw an error.
      • If the value entered by the user is over the characterLimit, it will throw an error.
    • For the Number field - field-items-advanced-settings/number-field.tsx:
      • The minValue can't be greater than the maxValue and vice-versa.
      • The value entered by the user can't be lower than the minValue and greater than the maxValue.
      • The field can't have the value field empty when the field is readOnly.
      • If the field has the readOnly and required checked at the same time, it will throw an error.
    • For the Radio field - field-items-advanced-settings/radio-field.tsx:
      • The radio field can't be required and readOnly at the same time.
      • If the field is readOnly, it should have at least one option.
    • For the Checkbox field - field-items-advanced-settings/checkbox-field.tsx:
      • The field can't be required and readOnly at the same time.
      • If the field is readOnly, it should have at least one option.
      • The checkbox options must match the validation rule (Select at least..., Select at most..., Select exactly...) and the validation length (1....10). So for example, if the validation is set to Select exactly 5, there should be at least 5 checkbox options.
    • For the Dropdown field - field-items-advanced-settings/dropdown-field.tsx:
      • The field can't be required and readOnly at the same time.
      • If the field is readOnly, it should have at least one option.

• Created the field-item-advanced-settings.tsx component for the fields' advanced settings. The component renders the appropriate advanced settings form based on the field type, validates user input, and saves the field settings to local storage and triggers a callback function when the "Save" button is clicked.

• Created a new file for each field for the signing page:

  • Updated the Text field to take into account the new advanced settings (sign/[token]/text-field.tsx).
    • The field also validates the data entered by the user:
      • If the field is required and the user tries to sign it without entering a value, it throws an error.
      • If the value entered by the user is greater than the character limit, it will also throw an errors.
    • If the field has the text value set by default and the field is not already inserted, the app will insert the field automatically when you visit the signing page.
  • Created the Radio field (sign/[token]/radio-field.tsx):
    • The user cannot sign a Radio field without choosing one option.
  • Created the Number field (sign/[token]/number.tsx):
    • The field also validates the data entered by the user:
      • It checks that the number matches the selected number format. If it doesn't, it throws an error.
      • If the field is required and the user doesn't enter a number, it throws an error.
      • If the user enters a value that is a number, it will throw an error.
      • If the value entered by the user is less than the minimum value, it throws an error.
      • If the value entered by the user is greater than the maximum value, it throws an error.
    • If the field has the value field set by default and the field is not already inserted, the app will insert the field automatically when you visit the signing page.
  • Created the Checkbox field (sign/[token]/checkbox-field.tsx):
    • If the Checkbox contains options that have the checked option set to true, those will be checked automatically.
    • If a validation rule & length is set, the user can't sign the field until the selected options match the validation.
  • Created the Dropdown field (sign/[token]/dropdown-field.tsx):
    • If the field has a default value set, it will automatically sign the field with that value when visiting the signing page.
  • If any of the fields is required, the field should either have a default value set or a value should be entered by the user.
  • If any of the fields is readonly, it should have a default value and the user shouldn't be able to change it.

• All the validation for these fields are available on the backend as well:

  • lib/server-only/field/set-fields-for-document.ts
  • lib/server-only/field/set-fields-for-template.ts
  • lib/server-only/field/sign-field-with-token.ts

• Updated the d/[token]/sign-direct-template.tsx file to include all the new fields.

• Added the new fields in the (signing)/sign/[token]/signing-page-view.tsx so they are visible and usable.

• Modified the document audit log lib/types/document-audit-logs.ts to include all the new fields.

• Modified the (signing)/sign/[token]/signing-field-container.tsx code so the Radio and Checkbox fields are clickable and work properly.

• Created tRPC procedures for retrieving and updating a field - packages/trpc/server/field-router/router.ts.

• Added colors for each recipient so it's easier to distinguish between them. The recipients and their associated fields will have the same color.

• Added the FieldIcon component - primitives/document-flow/field-icon.tsx - to avoid repeating code.

• Modified ui/primitives/document-flow/field-item.tsx so the fields have the same border color as the recipient.

• Changed the code from the lib/server-only/pdf/insert-field-in-pdf.ts file to add a circle in front of the value from the radio field and an X in front of the values from the checkbox field. Also, the values from the checkbox field will be in a column on the signed document, each having an X in front.

• Updated the Field component (ui/components/field/field.tsx) so the design doesn't break for checkbox and radio fields.

• Updated ui/primitives/document-flow/add-fields.tsx and ui/primitives/template-flow/add-template-fields.tsx contain mostly changes for the color of the fields and recipients.

• Created primitives/document-flow/advanced-fields/checkbox.tsx and primitives/document-flow/advanced-fields/radio.tsx to match the design from Figma. What these 2 components do is to display the fields and their options like in the image below.

• You'll notice the usage of substring, which is used to shorten the customText value which overflows and messes up the field's card design.

.... plus other smaller things.

What's left:

1. Make the new fields work in the SPM mode (not necessary after our discussion)

2. Cleanup the code.

3. For another PR:

   • Date and Name fields configuration
   • Document zooming

Testing Performed

• Text field inserted into a document
  • Inserted text without any advanced configuration
    • It should display the default text "T Add Text"
    • The user should be able to sign the field without any restrictions
  • Inserted text with advanced configuration
    • The field has a label set by the user and all the other configuration fields are empty
      • The field should display the label set by the user instead of "T Add Text"
      • The user should be able to sign the field without any restrictions
    • The field has a placeholder set by the user and all the other configuration fields are empty
      • The field should still display the default text "T Add Text"
      • The field should display the placeholder set by the user when the field is empty on the signing page
      • The user should be able to sign the field without any restrictions
    • The field has a label and a placeholder set by the user and all the other configuration fields are empty
      • The field should display the label set by the user
      • The field should display the placeholder set by the user when the field is empty on the signing page
      • The user should be able to sign the field without any restrictions
    • The field has a text value set by the user and all the other configuration fields are empty
      • The field should display the text value set by the user
      • The field should sign automatically when visiting the signing page
      • The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it
    • The field has a label and a text value set by the user and all the other configuration fields are empty
      • The field should display the label value set by the user instead of "T Add Text" or instead of the text value
      • The field should sign automatically when visiting the signing page
      • The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it
    • The field has a placeholder and a text value set by the user and all the other configuration fields are empty
      • The field should display the text value entered in the advanced configuration
      • The field should sign automatically when visiting the signing page
      • The field should display the placeholder set by the user when the field is empty on the signing page
      • The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it
      • The field should display the text value on the signing page
    • The field has a label, a placeholder and a text value set by the user and all the other configuration fields are empty
      • The field should display the label set by the user
      • The field should sign automatically when visiting the signing page
      • The field should display the placeholder set by the user when the field is empty on the signing page
      • The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it
      • The field should display the text value on the signing page
    • The field has a character limit set by the user and all the other configuration fields are empty or filled
      • The user shouldn't be able to enter more characters in the text field than the character limit when configuring the field
      • The field should be prefilled with the existing value on the signing page
      • The user should be able to replace the prefilled value with any value that doesn't exceed the character limit
      • The user shouldn't be able to sign the field if the character limit is exceeded
    • The field has the "Required" checkbox checked
      • The user shouldn't be able to make the field read-only when the "Required" checkbox is checked
      • The user shouldn't be able to sign the field without entering any text
      • The user should be able to sign the field after entering text
    • The field has the "Read-only" checkbox checked
      • The user shouldn't be able to make the field required when the "Read-only" checkbox is checked
      • The user shouldn't be able to save the field configuration without entering a text value
      • The field should display the text entered by the user if no label is set. Otherwise, it should display the label.
      • The user shouldn't be able to enter any text in the field
      • The field should sign automatically when visiting the signing page
    • The field has the "Required" and character limit set by the user
      • The user shouldn't be able to make the field read-only when the "Required" checkbox is checked
      • The user shouldn't be able to sign the field without entering any text
      • The user shouldn't be able to sign the field if the character limit is exceeded
      • The user should be able to sign the field after entering text
    • The field has the "Read-only" and character limit set by the user
      • The user shouldn't be able to make the field required when the "Read-only" checkbox is checked
      • The user shouldn't be able to save the field configuration without entering a text value
      • The field should display the text value if no label is set. Otherwise, it should display the label.
      • The user shouldn't be able to enter any text in the field
      • The field should sign automatically when visiting the signing page
    • The field has all the configuration fields filled
      • The field should display the label set by the user
      • The field should display the placeholder set by the user when the field is empty on the signing page
      • The user shouldn't be able to enter more characters in the text field than the character limit when configuring the field
      • The user shouldn't be able to sign the field if the character limit is exceeded
      • The user shouldn't be able to make the field read-only when the "Required" checkbox is checked
      • The user shouldn't be able to make the field required when the "Read-only" checkbox is checked
      • The user shouldn't be able to save the field configuration without entering a text value if the "Read-only" checkbox is checked
      • The user shouldn't be able to enter any text in the field if the "Read-only" checkbox is checked
      • The field should sign automatically when visiting the signing page if the "Read-only" checkbox is checked

Checklist

• I have tested these changes locally and they work as expected.
• I have added/updated tests that prove the effectiveness of these changes.
• I have updated the documentation to reflect these changes, if applicable.
• I have followed the project's coding style guidelines.
• I have addressed the code review feedback from the previous submission, if applicable.

Summary by CodeRabbit

• New Features
  • Introduced CheckboxField, DropdownField, NumberField, and RadioField components for document signing.
  • Added advanced settings components for various field types including checkbox, dropdown, number, radio, and text fields.
  • Implemented color styles and utilities for signer colors.
• Enhancements
  • Updated SignatureField and NameField components with improved styling.
  • Enhanced SigningFieldContainer to handle multiple field types.
• Bug Fixes
  • Adjusted document sealing logic to ensure proper status updates.
• Chores
  • Updated turbo.json configuration for prebuild paths and caching.

---

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/documenso/documenso/pull/1141 **Author:** [@catalinpit](https://github.com/catalinpit) **Created:** 5/3/2024 **Status:** ✅ Merged **Merged:** 7/18/2024 **Merged by:** [@Mythie](https://github.com/Mythie) **Base:** `main` ← **Head:** `feat/more-field-types` --- ### 📝 Commits (10+) - [`98b0dbc`](https://github.com/documenso/documenso/commit/98b0dbc947042b68b1528301c0c1fc5f2f214804) chore: add more field types - [`aa3ce6f`](https://github.com/documenso/documenso/commit/aa3ce6f33f5a8ef55cb168f49beb662b1a909756) chore: update fields in the ui - [`46ad49b`](https://github.com/documenso/documenso/commit/46ad49bc630e5e467ed47b8540c67d6530e301cd) chore: field border - [`8f96781`](https://github.com/documenso/documenso/commit/8f967810ee386763f247198ba425371ccd1a9e47) chore: update fields buttons - [`306d32f`](https://github.com/documenso/documenso/commit/306d32ff758ee57619b33b903905a5c5bf934e19) chore: field states editor changes - [`cc380a8`](https://github.com/documenso/documenso/commit/cc380a82b7a2118d25ceb47f6dc979ab047880be) chore: show recipients initials on hover - [`c52560e`](https://github.com/documenso/documenso/commit/c52560e459bf32006e18568d80497ff84c2b3fdb) chore: progress - [`6c69157`](https://github.com/documenso/documenso/commit/6c69157bf9597fc2e9892f19d0ce557e16de7b6b) chore: advanced settings addition and fieldMeta field - [`4b53678`](https://github.com/documenso/documenso/commit/4b53678a10fa6affe76849f8c73bf64df6850bd3) chore: add more field types - [`735eceb`](https://github.com/documenso/documenso/commit/735eceb72571fe3dee84fa59286a8d2e51119a86) chore: field format update ### 📊 Changes **74 files changed** (+5248 additions, -843 deletions) <details> <summary>View changed files</summary> 📝 `apps/marketing/src/app/(marketing)/singleplayer/client.tsx` (+3 -0) 📝 `apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx` (+10 -1) 📝 `apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx` (+1 -1) 📝 `apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx` (+10 -9) 📝 `apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx` (+101 -9) ➕ `apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx` (+292 -0) 📝 `apps/web/src/app/(signing)/sign/[token]/date-field.tsx` (+6 -2) ➕ `apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx` (+209 -0) 📝 `apps/web/src/app/(signing)/sign/[token]/email-field.tsx` (+8 -2) 📝 `apps/web/src/app/(signing)/sign/[token]/name-field.tsx` (+8 -2) ➕ `apps/web/src/app/(signing)/sign/[token]/number-field.tsx` (+337 -0) ➕ `apps/web/src/app/(signing)/sign/[token]/radio-field.tsx` (+190 -0) 📝 `apps/web/src/app/(signing)/sign/[token]/signature-field.tsx` (+3 -3) 📝 `apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx` (+73 -37) 📝 `apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx` (+47 -3) 📝 `apps/web/src/app/(signing)/sign/[token]/text-field.tsx` (+143 -26) 📝 `apps/web/src/components/document/document-read-only-fields.tsx` (+14 -4) 📝 `packages/api/v1/implementation.ts` (+2 -0) ➕ `packages/lib/advanced-fields-validation/validate-checkbox.ts` (+82 -0) ➕ `packages/lib/advanced-fields-validation/validate-dropdown.ts` (+54 -0) _...and 54 more files_ </details> ### 📄 Description ## Description What I've done: - Created an optional `fieldMeta` field of JSONB type in the `Field` model ([prisma/schema.prisma](https://github.com/documenso/documenso/pull/1141/files#diff-56fa4d384ba6fb94b130e9eb42c5cad00734b025ebd6c197f76873469725ae87)). This way, we can store advanced configuration for each field. Also, the selected/chosen/entered value for each field is stored in the `customText` field. - Created schemas and types for `fieldMeta`. - Added the `fieldMeta` field in the appropriate schemas and types. - Moved the title and description (`DocumentFlowFormContainerHeader`) from `edit-template` page into each template step - `add-template-settings.tsx`, `add-template-placeholder.tsx` and `add-template-fields.tsx`. They have their own title and description. Exactly like it's done for the documents. - Why did I do that? So, the header and description from "Field Advanced settings" doesn't collide with the info for each step. - Also added the code for clearing the localStorage of fields' settings when the fields get saved in a template ([edit-template.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-f4cb190cf705693af5e58854c62774ba52d9fedf096e3cc9e44f883cadc0c568)) - Added the code for clearing the localStorage of fields' settings when the fields get saved in a document ([edit-document.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-182305cd9186c9af7c45e75e313f93a548b638afb504601a2929866e71eb7c6b)). - Created a new file for each field's advanced settings (checkbox, number, dropdown, radio). Also updated the text field to include advanced settings. - Also added the validation for each field both on the frontend and backend. We have the following: - For the Text field - [field-items-advanced-settings/text-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-e5fae00e43f1496383ecbf6ff7e2019182fcbcecfefaf40d69bfaffc0a78b8c2): - If the field has the `readOnly` and `required` checked at the same time, it will throw an error. - If the field is `readOnly`, it should have a value for the `text` field. - If the `characterLimit` is not a number, it will throw an error. - If the `value` entered by the user is over the `characterLimit`, it will throw an error. - For the Number field - [field-items-advanced-settings/number-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-80bb7f5ef27407490c1d5e991871fd02eaa9938d7b0737be3930d3ea764ca21f): - The `minValue` can't be greater than the `maxValue` and vice-versa. - The `value` entered by the user can't be lower than the `minValue` and greater than the `maxValue`. - The field can't have the `value` field empty when the field is `readOnly`. - If the field has the `readOnly` and `required` checked at the same time, it will throw an error. - For the Radio field - [field-items-advanced-settings/radio-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-5769e6641c38826dbf74c9f766171c001b70c04836b98999f1977a6e4d720fe7): - The radio field can't be `required` and `readOnly` at the same time. - If the field is `readOnly`, it should have at least one option. - For the Checkbox field - [field-items-advanced-settings/checkbox-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-a561e4249bc52449b02e58b9b432b8e6e194c6b403551c879380faf88fd91e8a): - The field can't be `required` and `readOnly` at the same time. - If the field is `readOnly`, it should have at least one option. - The checkbox options must match the validation rule (*Select at least...*, *Select at most...*, *Select exactly...*) and the validation length (*1....10*). So for example, if the validation is set to *Select exactly 5*, there should be at least 5 checkbox options. - For the Dropdown field - [field-items-advanced-settings/dropdown-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-a115c11df94d018d526063697707f0cbae0fb2984d15580abe0399ea838df5ea): - The field can't be `required` and `readOnly` at the same time. - If the field is `readOnly`, it should have at least one option. - Created the [field-item-advanced-settings.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-49d8f68cb5163c9ba1c57406fdd0500399242992e6d7f3db68677c16e32ef4da) component for the fields' advanced settings. The component renders the appropriate advanced settings form based on the field type, validates user input, and saves the field settings to local storage and triggers a callback function when the "Save" button is clicked. - Created a new file for each field for the signing page: - Updated the Text field to take into account the new advanced settings ([sign/[token]/text-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-0b7b2472a104a6366d3cdef676f681960d343218a2893ca5109430ccd486a012)). - The field also validates the data entered by the user: - If the field is required and the user tries to sign it without entering a value, it throws an error. - If the value entered by the user is greater than the character limit, it will also throw an errors. - If the field has the `text` value set by default and the field is not already inserted, the app will insert the field automatically when you visit the signing page. - Created the Radio field ([sign/[token]/radio-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-88ad286e049fb81c73f1cd45fd0cc7951f08edcfda53adc81f0438b364881498)): - The user cannot sign a Radio field without choosing one option. - Created the Number field ([sign/[token]/number.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-bc2899b1bddd0f955967cbc28b87f3bb8c0edca0bf123c95b0ed5bdf7cb311ac)): - The field also validates the data entered by the user: - It checks that the number matches the selected number format. If it doesn't, it throws an error. - If the field is required and the user doesn't enter a number, it throws an error. - If the user enters a value that is a number, it will throw an error. - If the value entered by the user is less than the minimum value, it throws an error. - If the value entered by the user is greater than the maximum value, it throws an error. - If the field has the `value` field set by default and the field is not already inserted, the app will insert the field automatically when you visit the signing page. - Created the Checkbox field ([sign/[token]/checkbox-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-91e0b86843c2a2c02a736c37616c98b442e775ea372bbe01c4e21c13fa090669)): - If the Checkbox contains options that have the `checked` option set to `true`, those will be checked automatically. - If a validation rule & length is set, the user can't sign the field until the selected options match the validation. - Created the Dropdown field ([sign/[token]/dropdown-field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-e9106bc3ea58c9eaeb8f174532f79fc32e8a7823b060ae369871ca7373286413)): - If the field has a default value set, it will automatically sign the field with that value when visiting the signing page. - If any of the fields is required, the field should either have a default value set or a value should be entered by the user. - If any of the fields is readonly, it should have a default value and the user shouldn't be able to change it. - All the validation for these fields are available on the backend as well: - [lib/server-only/field/set-fields-for-document.ts](https://github.com/documenso/documenso/pull/1141/files#diff-81da22b7bdbddd50f10055aae2839a1cf0ec7795e091d5c98fd17036f528a688) - [lib/server-only/field/set-fields-for-template.ts](https://github.com/documenso/documenso/pull/1141/files#diff-7d5ef999e2e82f7be95070f8d79fc324aacb3781b15e2ff67feb42f5f83c657a) - [lib/server-only/field/sign-field-with-token.ts](https://github.com/documenso/documenso/pull/1141/files#diff-0e1a4eaf21c83911d97266f86845a54c6b5010ba890d5507ebc7da5a1f9a97fe) - Updated the [d/[token]/sign-direct-template.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-3aba278d52dfa13950e7818bf4609a3040ef8f88f63b3823a27340d775b92fda) file to include all the new fields. - Added the new fields in the [(signing)/sign/[token]/signing-page-view.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-8d9297fe8a899d3ddfb068090aaa0fd7d8e7ad875595eac46b2eb6bf01db9092) so they are visible and usable. - Modified the document audit log [lib/types/document-audit-logs.ts](https://github.com/documenso/documenso/pull/1141/files#diff-5e162eca03c8044684f4af2577a6d2c6f9dd9ceb860ddb4c81250ea1d65a3144) to include all the new fields. - Modified the [(signing)/sign/[token]/signing-field-container.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-cec03adc5c48ea8ce650bd20e58065e33e06378d54675b239adf397bd22e98f9) code so the Radio and Checkbox fields are clickable and work properly. - Created tRPC procedures for retrieving and updating a field - [packages/trpc/server/field-router/router.ts](https://github.com/documenso/documenso/pull/1141/files#diff-06e1789e42c597487d9512dd1721cd4cf0835dfe5b791854534004caf30cf9d8). - Added colors for each recipient so it's easier to distinguish between them. The recipients and their associated fields will have the same color. - Added the `FieldIcon` component - [primitives/document-flow/field-icon.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-d67797fd69844476833c982f0e0cd585f467286efc05101207435d0db3ec5a92) - to avoid repeating code. - Modified [ui/primitives/document-flow/field-item.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-75deabb574e2c1a82ac554efe39224268e8431eb391934abaddae836a4172122) so the fields have the same border color as the recipient. - Changed the code from the [lib/server-only/pdf/insert-field-in-pdf.ts](https://github.com/documenso/documenso/pull/1141/files#diff-1f70cdf93a630187a31eee0836e4051edcf25e7270fc59111ccf77d990d2792c) file to add a circle in front of the value from the radio field and an X in front of the values from the checkbox field. Also, the values from the checkbox field will be in a column on the signed document, each having an X in front. - Updated the `Field` component ([ui/components/field/field.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-8e6753026aaceeea12989783c7cad01f9e50fe7d55189efd0aeace209a77fedd)) so the design doesn't break for checkbox and radio fields. - Updated [ui/primitives/document-flow/add-fields.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-eb486643b278bd14a1f827e831943f88e2efe51df10dc4e8439bc0bf01ad7843) and [ui/primitives/template-flow/add-template-fields.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-029cf63d7730c87044447deee55851bf55bfda84e8c1379431955a6c6c946b93) contain mostly changes for the color of the fields and recipients. - Created [primitives/document-flow/advanced-fields/checkbox.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-1c8df81d4d5208edcfe445e3f417c9b2cb1dd87f633fc5e374dc558bf537b904) and [primitives/document-flow/advanced-fields/radio.tsx](https://github.com/documenso/documenso/pull/1141/files#diff-b73f00cddd2d125b1950c1cda4e244138f25c242bb205d42656335f6d848471d) to match the design from Figma. What these 2 components do is to display the fields and their options like in the image below.  - You'll notice the usage of `substring`, which is used to shorten the `customText` value which overflows and messes up the field's card design. .... plus other smaller things. What's left: 1. Make the new fields work in the SPM mode (not necessary after our discussion) 2. Cleanup the code. 3. For another PR: - Date and Name fields configuration - Document zooming ## Testing Performed - Text field inserted into a document - Inserted text without any advanced configuration - [x] It should display the default text "T Add Text" - [x] The user should be able to sign the field without any restrictions - Inserted text with advanced configuration - The field has a label set by the user and all the other configuration fields are empty - [x] The field should display the label set by the user instead of "T Add Text" - [x] The user should be able to sign the field without any restrictions - The field has a placeholder set by the user and all the other configuration fields are empty - [x] The field should still display the default text "T Add Text" - [x] The field should display the placeholder set by the user when the field is empty on the signing page - [x] The user should be able to sign the field without any restrictions - The field has a label and a placeholder set by the user and all the other configuration fields are empty - [x] The field should display the label set by the user - [x] The field should display the placeholder set by the user when the field is empty on the signing page - [x] The user should be able to sign the field without any restrictions - The field has a text value set by the user and all the other configuration fields are empty - [x] The field should display the text value set by the user - [x] The field should sign automatically when visiting the signing page - [x] The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it - The field has a label and a text value set by the user and all the other configuration fields are empty - [x] The field should display the label value set by the user instead of "T Add Text" or instead of the text value - [x] The field should sign automatically when visiting the signing page - [x] The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it - The field has a placeholder and a text value set by the user and all the other configuration fields are empty - [x] The field should display the text value entered in the advanced configuration - [x] The field should sign automatically when visiting the signing page - [x] The field should display the placeholder set by the user when the field is empty on the signing page - [x] The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it - [x] The field should display the text value on the signing page - The field has a label, a placeholder and a text value set by the user and all the other configuration fields are empty - [x] The field should display the label set by the user - [x] The field should sign automatically when visiting the signing page - [x] The field should display the placeholder set by the user when the field is empty on the signing page - [x] The user should be able to sign the field by using the text value entered in the advanced configuration or by changing it - [x] The field should display the text value on the signing page - The field has a character limit set by the user and all the other configuration fields are empty or filled - [x] The user shouldn't be able to enter more characters in the text field than the character limit when configuring the field - [x] The field should be prefilled with the existing value on the signing page - [x] The user should be able to replace the prefilled value with any value that doesn't exceed the character limit - [x] The user shouldn't be able to sign the field if the character limit is exceeded - The field has the "Required" checkbox checked - [x] The user shouldn't be able to make the field read-only when the "Required" checkbox is checked - [x] The user shouldn't be able to sign the field without entering any text - [x] The user should be able to sign the field after entering text - The field has the "Read-only" checkbox checked - [x] The user shouldn't be able to make the field required when the "Read-only" checkbox is checked - [x] The user shouldn't be able to save the field configuration without entering a text value - [x] The field should display the text entered by the user if no label is set. Otherwise, it should display the label. - [x] The user shouldn't be able to enter any text in the field - [x] The field should sign automatically when visiting the signing page - The field has the "Required" and character limit set by the user - [x] The user shouldn't be able to make the field read-only when the "Required" checkbox is checked - [x] The user shouldn't be able to sign the field without entering any text - [x] The user shouldn't be able to sign the field if the character limit is exceeded - [x] The user should be able to sign the field after entering text - The field has the "Read-only" and character limit set by the user - [x] The user shouldn't be able to make the field required when the "Read-only" checkbox is checked - [x] The user shouldn't be able to save the field configuration without entering a text value - [x] The field should display the text value if no label is set. Otherwise, it should display the label. - [x] The user shouldn't be able to enter any text in the field - [x] The field should sign automatically when visiting the signing page - The field has all the configuration fields filled - [x] The field should display the label set by the user - [x] The field should display the placeholder set by the user when the field is empty on the signing page - [x] The user shouldn't be able to enter more characters in the text field than the character limit when configuring the field - [x] The user shouldn't be able to sign the field if the character limit is exceeded - [x] The user shouldn't be able to make the field read-only when the "Required" checkbox is checked - [x] The user shouldn't be able to make the field required when the "Read-only" checkbox is checked - [x] The user shouldn't be able to save the field configuration without entering a text value if the "Read-only" checkbox is checked - [x] The user shouldn't be able to enter any text in the field if the "Read-only" checkbox is checked - [x] The field should sign automatically when visiting the signing page if the "Read-only" checkbox is checked ## Checklist <!--- Please check the boxes that apply to this pull request. --> <!--- You can add or remove items as needed. --> - [x] I have tested these changes locally and they work as expected. - [ ] I have added/updated tests that prove the effectiveness of these changes. - [ ] I have updated the documentation to reflect these changes, if applicable. - [x] I have followed the project's coding style guidelines. - [ ] I have addressed the code review feedback from the previous submission, if applicable. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced `CheckboxField`, `DropdownField`, `NumberField`, and `RadioField` components for document signing. - Added advanced settings components for various field types including checkbox, dropdown, number, radio, and text fields. - Implemented color styles and utilities for signer colors. - **Enhancements** - Updated `SignatureField` and `NameField` components with improved styling. - Enhanced `SigningFieldContainer` to handle multiple field types. - **Bug Fixes** - Adjusted document sealing logic to ensure proper status updates. - **Chores** - Updated `turbo.json` configuration for prebuild paths and caching. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --- _{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

kerem 2026-02-26 19:33:11 +03:00

• closed this issue
• added the
  pull-request
  label

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

chore/translations

feat/signing-required-field-colors

feat/add-field-overflow-settings

chore/extract-translations

release

feat/public-completed-document-access

feat/bulk-download

docs/signing-reminders

feat/document-file-conversion

feat/prefetch-intent-navigation-links

fix/lint-project

fix/replace-linter-with-biome

fix/security-improvements

perf/dynamic-import-posthog

deps/vite-8

chore/migrate-eslint-prettier-to-oxlint-oxfmt

chore/migrate-to-pnpm

feat/add-pdf-image-renderer

feat/add-embed-v2

fix/extract-emails

feat/table-toolbar-filters

copilot/sub-pr-2478

fix/recipients-send-500

feat/external-2fa-codes

feat/protect-signing-urls

fix/checkbox-checked-values

duncan/legacy-api-endpoints

chore/block-po-files-locally

fix/default-embed-v2-document-rejection-to-false

fix/fields-dialog-title-description

copilot/sub-pr-2323

copilot/sub-pr-2267

exp/autoplace-fields

chore/server-hostname-config

fix/template-add-signers

fix/add-field-drag-drop-colors

fix/envelope-updates

feat/allow-formdata

archive/1.13.2

copilot/add-billing-section-account-page

fix/field-coordinate-bounds

feat/update-user-via-admin-dashboard

feat/expiry-links

feat/team-dashboard

feat/change-radio-direction

feat/admin-create-user-with-org

archive/v1.12.11

feat/envelopes-polish

feat/add-attachments-reworked

fix/font-size-fields

feat/improve-resend-dialog

fix/download-certificate-audit-log-safari

fix/duplicate-document-by-id

feat/document-table-filters

fix/template-migration

exp/effect

fix/migrate-template-metadata

exp/keyboard-signature

feat/document-2fa-redo

feat/add-attachments

feat/billing-redirect-flow

fix/add-api-logging

fix/duplicate-document-template-review

feat/handle-redirectto-param

feat/document-processing-status-indicator

feat/customize-doc-audit-log-certificate

feat/document-2fa

feat/organisations-backup-pls

feat/audit-logs-on-completed-document

chore/webhook-trigger-multiselect

exp/bg

chore/single-signer-wording

fix/template-uploading

feat/bin-tab

fix/staging-test

feat/rr7

squish/rr7

archive/nextjs

power-signer

fix/field-placements

fix/team-member-invites

fix/checkbox-field-bugs

fix/leaderboard-query

fix/zapier-list-documents-endpoint

feat/dictate-signers

feat/allow-same-signer-email-multiple-times

wip/rr7-next

experiment/self-sign

fix/oidc-login-error

feat/document-qrcode

feat/mau

feat/copy-links-audit-logs

chore/december-dep-upgrades

wip/rr7

wip/rr7-auth-package

wip/rr7-better-auth-demo

experiment/what-if-user-ids-were-strings-instead-of-numbers

fix/refactor-api-routes

feat/add-owner-completed-email-setting

fix/embed-whitelabel-colors

feat/delete-archive

fun/sign-with-nose

expiry-links

chore/openpage-viral-metrics

fix/sitemap

feat/signing-reminder

feat/automated-fields-signature

feat/add-polish-translations

staging

fix/open-page

openpage-api-deploy

feat/pulumi

chore/angular-embed-docs

exp/next-15

chore/select-signer

feat/save-data-on-blur

feat/save-recipients-on-blur

feat/signature-color

feat/team-email-template

chore/documenso-url

chore/add-ctas

fix/docker-setup-and-documentation

fix/document-creation-timezone

feat/telemetry

feat/integration-animation

fix/render-deployment

feat/publicProfile

feat/redirect-templates

feat/passkey-dialog

fix/refactor-use-template

chore/resend-onUpdate

chore/subject-onBlur

fix/demo-trpc-duration

fix/self-signer-custom-email-message

fix/benchmark

feat/add-myself-as-signer-temp

feat/checkbox-type

feat/update-marketing-header

experiment/queue

feat/error-demo

feat/add-document-auth-options

feat/document-2fa-test

chore/status-widget

open-page-restructure

feat/document-passkey-test

chore/form-reset

fix/neon-db-migration-test

feat/public-profile

feat/launch-week-content

webhooks_plus_api

exp/custom-field-labels

feat/accept-text-signature

feat/document-version-history

fix/delete-recipient-owners

fix/whitespace-title

feat/refresh

exp/million

feat/doc-comments

ElTimuro-patch-1

feat/teams-slugify

pr/537

date-format-setting

exp/millionjs

feat/runtime-env

chore/next-14

feat/chat-with-documents

feat/plan-limits

fix/467-bugsafari-only-unable-to-copy-document-sharing-link

feat/admin-ui-manage-instance

feat/stripe-free-tier

fix/cascade-delete-share-links

feat/marketing-share-document

feat/single-player-mode-polish

feat/next-13-5-3

chore/github-templates

docs/render-deploy

chore/code-of-conduct

chore/team

feat/add-e2e-testing

docs/minor-readme-updatess

docs/dx

feat-early-adopters

feat/open-early-adopters

fix/432-signee-doc-version-doesnt-have-sticky-signing-area

fix/446-cancel-cta-does-nothing-when-a-signer-opens-the-document

fix/445-signer-name-not-persisting

feat/resend-transport

fix/incorrect-completed-stats

feat/update-email-templates

feat/mania

feat/copy-or-tweet

feat/add-design-system-page

feat/single-player-mode

feat/completed-share-link

feat/designsystem

feat/send-email

feat/custom-emails

blog/upcoming-blog-post

feat/single-player-mode-test

feat/reset-password

blog/selfhosting-blog-post

feat/redirect-signed-document

fix/og-description

feat/universal-upload

chore/readme

chore/blogposts

fix/building-documenso-description

feat/admin-ui-metrics

feat/avatar-fallback

feat/templates

feat/blog-post-next

fix/hide-user-selection

feat/disable-sign

feat/marketing-mobile-nav

chore/remove-console-log-warn

feat/add-email-field

fix/redirect-signin-to-dashboard

feat/blog-og-image

feat/redirect-on-send

feat/billing-page

feat/profile-password-form

fix/signature-color-dark-mode

feat/inbox

feat/promise-safety

readme

chore/reduce-refetch-time

feat/update-document-flow

feat/refactor-shared-components

feat/feature-flag

feat/document-authoring

feat/pie-chart-legend

feat/open-page

docs/add-gitpod-setup

docs/add-render-deploy

docs-coventional-commits

feat/table-actions

minor/updates-google-auth-refresh

feat/add-document-animation

feat/new-email-template

feat/password-reset

fix/send-error-double-send

fix/improve-stripe-webhook-endpoint

feat/support-custom-cert-paths

feat/DOC-170-add-name-field

fix/improve-general-styling

feat/DOC-210-sign-dialog-broken-on-second-opening

bugfix-#71/invalid-email-hint

chore/optimise-deps

test-pr

v2.9.1

v2.9.0

v2.8.1

v2.8.0

v2.7.1

v2.7.0

v2.6.1

v2.6.0

v2.5.1

v2.5.0

v2.4.0

v2.3.2

v2.3.1

v2.3.0

v2.2.8

v2.2.7

v2.2.6

v2.2.5

v2.2.4

v2.2.3

v2.2.2

v2.2.1

v2.2.0

v2.1.0

v2.0.14

v2.0.13

v2.0.12

v2.0.11

v2.0.10

v2.0.9

v2.0.8

v2.0.7

v2.0.6

v2.0.5

v2.0.4

v2.0.3

v2.0.2

v2.0.1

v2.0.0

v1.13.2

v1.13.1

v1.13.0

v1.12.10

v1.12.9

v1.12.8

v1.12.7

v1.12.6

v1.12.5

v1.12.4

v1.12.3

v1.12.2-rc.6

v1.12.2-rc.5

v1.12.2-rc.4

v1.12.2-rc.3

v1.12.2-rc.2

v1.12.2-rc.1

v1.12.2-rc.0

v1.12.1

v1.12.0

v1.12.0-rc.8

v1.12.0-rc.7

v1.12.0-rc.6

v1.12.0-rc.5

v1.12.0-rc.4

v1.12.0-rc.3

v1.12.0-rc.2

v1.12.0-rc.1

v1.12.0-rc.0

v1.11.1

v1.11.0

v1.10.3

v1.10.2

v1.10.1

v1.10.0

v1.10.0-rc.5

v1.10.0-rc.4

v1.10.0-rc.3

v1.10.0-rc.2

v1.10.0-rc.1

v1.10.0-rc.0

v1.9.1-rc.9

v1.9.1

v1.9.1-rc.8

v1.9.1-rc.7

v1.9.1-rc.6

v1.9.1-rc.5

v1.9.1-rc.4

v1.9.1-rc.3

v1.9.1-rc.2

v1.9.1-rc.1

v1.9.1-rc.0

v1.9.0

v1.9.0-rc.12

v1.9.0-rc.11

v1.9.0-rc.10

v1.9.0-rc.9

v1.9.0-rc.8

v1.9.0-rc.7

v1.9.0-rc.6

v1.9.0-rc.5

final-marketing-release

v1.9.0-rc.4

v1.9.0-rc.3

v1.9.0-rc.2

v1.9.0-rc.1

v1.9.0-rc.0

v1.8.1

v1.8.1-rc.9

v1.8.1-rc.8

v1.8.1-rc.7

v1.8.1-rc.6

v1.8.1-rc.5

v1.8.1-rc.4

v1.8.1-rc.3

v1.8.1-rc.2

v1.8.1-rc.1

v1.8.1-rc.0

v1.8.0-rc.4

v1.8.0

v1.8.0-rc.3

v1.8.0-rc.2

v1.8.0-rc.1

v1.8.0-rc.0

v1.7.2

v1.7.2-rc.4

v1.7.2-rc.3

v1.7.2-rc.2

v1.7.2-rc.1

v1.7.2-rc.0

v1.7.1-rc.3

v1.7.1

v1.7.1-rc.2

v1.7.1-rc.1

v1.7.1-rc.0

v1.7.0

v1.7.0-rc.5

v1.7.0-rc.4

v1.7.0-rc.3

v1.7.0-rc.2

v1.7.0-rc.1

v1.7.0-rc.0

v1.6.1

v1.6.1-rc.1

v1.6.1-rc.0

v1.6.0

v1.6.0-rc.3

v1.6.0-rc.2

v1.6.0-rc.1

v1.6.0-rc.0

v1.5.6

v1.5.6-rc.4

v1.5.6-rc.3

v1.5.6-rc.2

v1.5.6-rc.1

v1.5.6-rc.0

v1.5.5-rc.8

v1.5.5

v1.5.5-rc.7

v1.5.5-rc.6

v1.5.5-rc.5

v1.5.5-rc.4

v1.5.5-rc.3

v1.5.5-rc.2

v1.5.5-rc.1

v1.5.5-rc.0

v1.5.4-rc.5

v1.5.4

v1.5.4-rc.4

v1.5.4-rc.3

v1.5.4-rc.2

v1.5.4-rc.1

v1.5.4-rc.0

v1.5.3-rc.1

v1.5.3

v1.5.3-rc.0

v1.5.2-rc.8

v1.5.2

v1.5.2-rc.7

v1.5.2-rc.6

v1.5.2-rc.5

v1.5.2-rc.4

v1.5.2-rc.3

v1.5.2-rc.2

v1.5.2-rc.1

v1.5.2-rc.0

v1.5.1

v1.5.1-rc.0

v1.5.0-rc.6

v1.5.0

v1.5.0-rc.5

v1.5.0-rc.4

v1.5.0-rc.3

v1.5.0-rc.2

v1.5.0-rc.1

v1.5.0-rc.0

v1.4.0-rc.0

v1.4.0

v1.3.2-rc.0

v1.3.1-rc.2

v1.3.1

v1.3.1-rc.1

v1.3.1-rc.0

v1.3.0-rc.2

v1.3.0

v1.3.0-rc.1

v1.3.0-rc.0

v1.2.3

v1.2.2

v1.2.1

v1.2.0

v1.1

v1.0

v0.9

before-prettier

0.9-developer-preview

Labels

Clear labels   

Compliance

  

Stale

  

apps: marketing

  

apps: web

  

community

  

component: api

  

component: integrations

  

component: ui

  

duplicate

  

effort: low

  

effort: medium

  

good first issue

  

hacktoberfest

  

help wanted

  

needs triage

  

needs-replication

  

needs-testing

  

on-hold

  

osshack

  

priority: high

  

priority: low

  

priority: medium

  

pull-request

Mirrored from GitHub Pull Request

  

question

  

roadmap

  

status: assigned

  

status: blocked

  

status: in progress

  

status: triage

  

type: bug

  

type: bug

  

type: bug

  

type: documentation

  

type: enhancement

  

type: feature

  

wontfix

  

💎 Bounty

  

💰 Rewarded

  

💰 Rewarded

No labels

Compliance

Stale

apps: marketing

apps: web

community

component: api

component: integrations

component: ui

duplicate

effort: low

effort: medium

good first issue

hacktoberfest

help wanted

needs triage

needs-replication

needs-testing

on-hold

osshack

priority: high

priority: low

priority: medium

pull-request

question

roadmap

status: assigned

status: blocked

status: in progress

status: triage

type: bug

type: bug

type: bug

type: documentation

type: enhancement

type: feature

wontfix

💎 Bounty

💰 Rewarded

💰 Rewarded

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/documenso#1422

No description provided.