Creating Dynamic Forms from JSON Schema in Doctype’s `.js` File

Frappe Framework
, ,
1

Hello Frappe community,

I’m working on customizing several doctypes, and I’d like to dynamically build forms using a JSON schema to define field properties. My goal is to generate form fields within the Doctype’s .js file based on this JSON schema, leveraging Frappe’s built-in field types. Additionally, I want to be able to retrieve the values of these fields after they’ve been rendered.

Below is an example schema I’m considering:

[
    {
        "fieldname": "test_field",
        "fieldtype": "Data",
        "label": "Test Field",
        "bold": 0,
        "columns": 0,
        "default": null,
        "description": null,
        "docstatus": 0,
        "hidden": 0,
        "hide_days": 0,
        "hide_seconds": 0,
        "length": 0,
        "max_height": null,
        "no_copy": 0,
        "non_negative": 0,
        "options": null,
        "permlevel": 0,
        "precision": "",
        "read_only": 0,
        "remember_last_selected_value": 0,
        "reqd": 0,
        "search_index": 0,
        "set_only_once": 0,
        "sort_options": 0,
        "translatable": 0,
        "unique": 0,
        "width": null
    },
    {
        "fieldname": "field_2",
        "fieldtype": "Data",
        "label": "Field 2",
        "bold": 0,
        "columns": 0,
        "default": null,
        "description": null,
        "docstatus": 0,
        "hidden": 0,
        "hide_days": 0,
        "hide_seconds": 0,
        "length": 0,
        "max_height": null,
        "no_copy": 0,
        "non_negative": 0,
        "options": null,
        "permlevel": 0,
        "precision": "",
        "read_only": 0,
        "remember_last_selected_value": 0,
        "reqd": 0,
        "search_index": 0,
        "set_only_once": 0,
        "sort_options": 0,
        "translatable": 0,
        "unique": 0,
        "width": null
    }
]

Notes:
Each field can be of the following types:

  • Autocomplete, Attach, Attach Image, Barcode, Check, Color, Column Break, Currency, Data, Date, Datetime, Duration, Float, Geolocation, Icon, Image, Int, Link, Long Text, Markdown Editor, Password, Percent, Phone, Rating, Select, Signature, Small Text, Text, Text Editor, and Time.

Questions:

  1. Form Creation: What’s the recommended approach for creating form fields dynamically in Frappe using a JSON schema like the one above?
  2. Field Rendering: How can I ensure fields are rendered properly with all specified attributes?
  3. Value Retrieval: What’s the best way to retrieve values for fields created dynamically in the .js file?

Any insights, examples, or suggestions are appreciated. Thank you!

2

Storing your data in a fully JSON format in a .json file, rather than as an array in the doctype.js file, would be a good approach as it aligns better with Frappe’s conventions.

If you take reference from the Frappe code for how it renders fields, it will be easier for you to build a form builder.