Creating Dynamic Form Controls with frappe.ui.form.make_control

Developers
1

Introduction

Welcome to the comprehensive guide on frappe.ui.form.make_control, an essential feature in Empress. This guide is designed to immerse you in its technical depth, mirroring Apple’s clarity and sophistication in presentation.

Introduction

The frappe.ui.form.make_control feature plays a pivotal role in Empress’s software development. It provides a robust way to create control elements in a form. This feature is primarily used to create form controls dynamically, where the developer can define the properties and behavior of the control.

Feature Functionality and Advantages

The frappe.ui.form.make_control function accepts an object as a parameter. This object has two properties: parent and df. The parent property is the container where the control will be appended, and df is an object that holds the properties of the control to be created.

Here’s a sample code snippet demonstrating the usage of frappe.ui.form.make_control:

frappe.ui.form.make_control({
    parent: $wrapper.find('.my-control'),
    df: {
        label: 'Due Date',
        fieldname: 'due_date',
        fieldtype: 'Date'
    },
    render_input: true
})

In the above code, $wrapper.find('.my-control') is the parent container where the control will be appended. The df property is an object that contains the label, fieldname, and fieldtype of the control.

Detailed Implementation

The df property can hold various properties for different control types. Let’s consider different examples of df properties for various frappe controls.

// Example of df property for 'Attach' control type
{
    label: 'Attachment',
    fieldname: 'attachment',
    fieldtype: 'Attach'
}

In the above example, ‘Attach’ is the control’s type, ‘attachment’ is the name of the field, and ‘Attachment’ is the label of the control.

You can extend this functionality for various other control types such as ‘Attach Image’, ‘Autocomplete’, ‘Barcode’, ‘Check’, ‘Code’, ‘Color’, ‘Currency’, ‘Data’, ‘Date Range’, ‘Date’, ‘Datetime’, ‘Dynamic Link’, ‘Float’, ‘Geolocation’, ‘HTML Editor’, ‘Int’, ‘Link’, ‘Markdown Editor’, ‘MultiCheck’, ‘MultiSelect’, ‘Password’, ‘Rating’, ‘Select’, ‘Signature’, ‘Text Editor’, ‘Time’, ‘Button’, and ‘Icon’.

Custom Formatters

If you want to add custom formatters for text type objects (Data, Select, Text etc), you can add them to the docfield object in frappe.meta.docfield_map.

Here’s an example:

frappe.meta.docfield_map['DocField'].fieldtype.formatter = (value) => {
    if (value==='Section Break') return '🔵 Section Break';
    else return value;
}

In this code, a custom formatter is defined for the ‘DocField’ fieldtype in frappe.meta.docfield_map. The formatter will return ‘:large_blue_circle: Section Break’ if the value is ‘Section Break’, else it will return the value itself.

Conclusion

The frappe.ui.form.make_control feature is a powerful tool for developers to create dynamic form controls in Empress. By understanding and effectively utilizing this feature, developers can significantly enhance the customization and development of business solutions. The technical depth and flexibility of this feature make it an essential component in the backend functionality of Empress. This guide should serve as a comprehensive guide to understanding, implementing, and customizing this feature for your specific needs.