Controls

frappe.ui.form.make_control

frappe.ui.form.make_control({ parent, df })

Makes a frappe control based on df properties and appends into parent container.

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

Here are the df properties for most of frappe control types.

// Attach
{
    label: 'Attachment',
    fieldname: 'attachment',
    fieldtype: 'Attach'
}

// Attach Image
{
    label: 'User Image',
    fieldname: 'user_image',
    fieldtype: 'Attach Image'
}

// Autocomplete
{
    label: 'Select User',
    label: 'user',
    fieldtype: 'Autocomplete',
    options: [
        'faris@erpnext.com',
        'suraj@erpnext.com'
    ]
}

// Barcode
{
    label: 'Item Barcode',
    fieldname: 'item_barcode',
    fieldtype: 'Barcode'
}

// Check
{
    label: 'Enable feature',
    fieldname: 'enable_feature',
    fieldtype: 'Check'
}

// Code
{
    label: 'JS Script',
    fieldname: 'script',
    fieldtype: 'Code',
    // for syntax highlighting
    options: 'Javascript' // JS, HTML, CSS, Markdown, SCSS, JSON,
    // wrap code
    wrap: true,
    // changing `max_lines` will set the max-height of the editor
    max_lines: 10,
    // changing `min_lines` will set the min-height of the editor
    min_lines: 5
}

// Color
{
    label: 'Your favorite color',
    fieldname: 'user_color',
    fieldtype: 'Color'
}

// Currency
{
    label: 'Amount',
    fieldname: 'amount',
    fieldtype: 'Currency',
    options: 'INR' // or name of field which holds currency
}

// Data
{
    label: 'First Name',
    fieldname: 'first_name',
    fieldtype: 'Data',
    options: 'Email' // 'Name', 'Phone', 'URL', 'Barcode'
}

// Date Range
{
    label: 'Select Date Range',
    fieldname: 'date_range',
    fieldtype: 'Date Range'
}

// Date
{
    label: 'Birth Date',
    fieldname: 'birth_date',
    fieldtype: 'Date'
}

// Datetime
{
    label: 'Submission Date and Time',
    fieldname: 'submission',
    fieldtype: 'Datetime'
}

// Dynamic Link
{
    label: 'Party',
    fieldname: 'party',
    fieldtype: 'Dynamic Link',
    options: 'party_type' // fieldname which holds the Link type
}

// Float
{
    label: 'Threshold',
    fieldname: 'threshold',
    fieldtype: 'Float'
}

// Geolocation
{
    label: 'Meeting Place',
    fieldname: 'meeting_place',
    fieldtype: 'Geolocation'
}

// HTML Editor
{
    label: 'Custom HTML',
    fieldname: 'custom_html',
    fieldtype: 'HTML Editor'
}

// Int
{
    label: 'No of days',
    fieldname: 'no_of_days',
    fieldtype: 'Int'
}

// Link
{
    label: 'Select User',
    fieldname: 'user',
    fieldtype: 'Link',
    options: 'User' // name of doctype
}

// Markdown Editor
{
    label: 'Blog Content',
    fieldname: 'content',
    fieldtype: 'Markdown Editor'
}

// MultiCheck
{
    label: 'Blog Content',
    fieldname: 'content',
    fieldtype: 'MultiCheck',
    options: [
        'Option 1',
        'Option 2',
        'Option 3',
        'Option 4',
    ],
    columns: 2 // break into 2 columns
}

// MultiSelect
{
    label: 'Select Users',
    fieldname: 'users',
    fieldtype: 'MultiSelect',
    options: [
        'faris@erpnext.com',
        'suraj@erpnext.com',
        'shivam@erpnext.com'
    ]
}

// Password
{
    label: 'New Password',
    fieldname: 'password',
    fieldtype: 'Password'
}

// Rating
{
    label: 'Rate your experience',
    fieldname: 'rating',
    fieldtype: 'Rating'
}

// Select
{
    label: 'Status',
    fieldname: 'status',
    fieldtype: 'Select',
    options: [
        'Open',
        'Closed',
        'Cancelled'
    ]
}

// Signature
{
    label: 'Status',
    fieldname: 'status',
    fieldtype: 'Signature'
}

// Text Editor
{
    label: 'Description',
    fieldname: 'description',
    fieldtype: 'Text Editor'
}

// Time
{
    label: 'In Time',
    fieldname: 'in_time',
    fieldtype: 'Time'
}

// Button
{
    label: 'Fetch',
    fieldname: 'fetch',
    fieldtype: 'Button',
    btn_size: 'xs' // xs, sm, lg
}

//Icon
{
    label: 'Page Icon',
    fieldname: 'page_icon',
    fieldtype: 'Icon'
}

Adding Custom Formatters

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

Example:

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