Skip to main content

Understanding JSON Field Settings

In DynForms, you can adjust various settings for form fields using a JSON configuration. Below are the available options and what they do:

General Field Settings​

Description ("description")​

  • What it does: Adds a short explanation or help text for the field, including links to documentation if needed.
  • Example: 
    "description": "[Learn more about App Relation Fields](https://docs.dynforms.net/docs/field-types/app-relation)"

Required ("required")​

  • What it does: Defines whether the field must be filled before submitting the form.
  • Options:
    • true → The field must be filled.
    • false → The field is optional.
  • Example: 
    "required": true

Placeholder ("placeholder")​

  • What it does: Shows example text inside the field to guide the user before they enter their data.
  • Example: 
    "placeholder": "Start typing to search..."

CSS Classes ("css_classes")​

  • What it does: Allows adding CSS class names to customize the field's style.
  • Example: 
    "css_classes": "mycompany-large-field"

You can add your own custom classes here and reference the in the extra_css of the form:

Add the mycompany-large-field to the css_classes of the field. Then add following to Extra CSS which you can find under "Basic form settings" in the visual form editor.

.mycompany-large-field {
  font-size: 48px;
  background-color: yellow;
}

Screenshot of two fields, one with custom CSS classes

Another way to use this is to use the CSS classed provided by our theme. Our default form theme uses the Bootstrap 5 CSS framework in the background. Most of the classes documented in the Boostrap 5 documentation can be used.

The following example uses the border utility class to paint a rounded red border around the form field in (see Bootstrap 5 documentation on background colors for more):

"css_classes": "border border-danger rounded"

Here is how it would look like with the default theme:

Screenshot of the field with red border

Field Width ("field_width")​

  • What it does: Defines how wide the field should be in the form layout.
  • Example: 
    "field_width": "50%"

Visibility ("visible")​

  • What it does: Controls whether the field is shown or hidden.
  • Options:
    • true → The field is visible.
    • false → The field is hidden.
  • Example: 
    "visible": false

App Relation Specific Settings​

Multiple Selection ("multiple")​

  • What it does: Defines whether users can select one or multiple items from the related apps.
  • Options:
    • true → Users can select multiple items.
    • false → Users can select only one item.
  • Example: 
    "multiple": true

Referenced Apps ("referenced_apps")​

  • What it does: Specifies which apps in Tape the field pulls data from.
  • Example: 
    "referenced_apps": [
      {
        "field_id": 569924
      }
    ]
  • Details:
    • Each referenced app is defined by a field_id.
    • The field retrieves data from this app when users search for related records.

By understanding these settings, you can customize your DynForms fields to fit your specific needs. 🚀