分类： JS接口

树形视图是为所有启用了“是树形”属性的 DocType 生成的。

树形视图

标准树形 JS

要自定义树形视图，你必须在 doctype 目录中有一个 {doctype}_tree.js 文件。
以下是所有可以自定义的选项。

例如，如果你想配置 Account DocType，你需要创建一个包含以下内容的 account_tree.js 文件。

frappe.treeview_settings["Account"] = {
    breadcrumb: "Accounting",
    title: "Chart of Accounts",

    filters: [
        {
            fieldname: "company",
            fieldtype: "Select",
            label: "Company",
            options: "Company 1\nCompany 2",
            on_change: handle_company_change(),
        },
    ],

    get_tree_nodes: "path.to.whitelisted_method.get_children",
    add_tree_node: "path.to.whitelisted_method.handle_add_account",

    fields: [
        {
            fieldtype: "Data",
            fieldname: "account_name",
            label: "New Account Name",
            reqd: true,
        },
        {
            fieldtype: "Link",
            fieldname: "account_currency",
            label: "Currency",
            options: "Currency",
        },
        {
            fieldtype: "Check",
            fieldname: "is_group",
            label: "Is Group",
        },
    ],

    ignore_fields: ["parent_account"],

    menu_items: [
        {
            label: "New Company",
            action: function () {
                frappe.new_doc("Company", true);
            },
            condition: "frappe.boot.user.can_create.indexOf('Company') !== -1",
        },
    ],

    onload: function (treeview) {},

    post_render: function (treeview) {},

    onrender: function (node) {},

    on_get_node: function (nodes) {},

    extend_toolbar: true,

    toolbar: [
        {
            label: "Add Child",
            condition: function (node) {
                return node && node.is_group;
            },
            click: function (node) {
                frappe.treeview_settings["Account"].add_node(node);
            },
            btnClass: "hidden-xs",
        },
    ],
};

Desk 中的每个屏幕都渲染在一个 frappe.ui.Page 对象内。

frappe.ui.make_app_page

创建一个新的页面并将其附加到父级。

let page = frappe.ui.make_app_page({
    title: 'My Page',
    parent: wrapper // HTML DOM Element or jQuery object
    single_column: true // create a page without sidebar
})

新建页面

页面方法

本节列出了页面实例对象上可用的常用方法。

page.set_title

设置页面标题以及文档标题。文档标题显示在浏览器标签页中。

page.set_title('My Page')

页面标题

page.set_title_sub

设置页面的副标题。它显示在页面标题的右侧。

page.set_title_sub('Subtitle')

页面副标题

page.set_indicator

设置指示器的标签和颜色。

page.set_indicator('Pending', 'orange')

页面指示器

page.clear_indicator

清除指示器的标签和颜色。

page.clear_indicator()

page.set_primary_action

设置主要操作按钮的标签和处理函数。第三个参数是图标类，将在移动视图中显示。

let $btn = page.set_primary_action('New', () => create_new(), 'octicon octicon-plus')

页面主要操作

page.clear_primary_action

清除主要操作按钮和处理函数。

page.clear_primary_action()

page.set_secondary_action

设置次要操作按钮的标签和处理函数。第三个参数是图标类，将在移动视图中显示。

let $btn = page.set_secondary_action('Refresh', () => refresh(), 'octicon octicon-sync')

页面次要操作

page.clear_secondary_action

清除次要操作按钮和处理函数。

page.clear_secondary_action()

page.add_menu_item

在菜单下拉框中添加菜单项。

// add a normal menu item
page.add_menu_item('Send Email', () => open_email_dialog())

// add a standard menu item
page.add_menu_item('Send Email', () => open_email_dialog(), true)

页面菜单下拉框

page.clear_menu

移除包含菜单项的下拉菜单。

page.clear_menu()

page.add_action_item

在操作下拉框中添加菜单项。

// add a normal menu item
page.add_action_item('Delete', () => delete_items())

页面操作下拉框

page.clear_actions_menu

移除包含菜单项的操作下拉菜单。

page.clear_actions_menu()

page.add_inner_button

在内部工具栏中添加按钮。

// add a normal inner button
page.add_inner_button('Update Posts', () => update_posts())

页面内部按钮

// add a dropdown button in a group
page.add_inner_button('New Post', () => new_post(), 'Make')

页面内部按钮组

page.change_custombuttontype

通过标签（和组）更改特定自定义按钮的类型。

// change type of ungrouped button
page.change_inner_button_type('Update Posts', null, 'primary');

// change type of a button in a group
page.change_inner_button_type('Delete Posts', 'Actions', 'danger');

page.remove_inner_button

移除内部工具栏中的按钮。

// remove inner button
page.remove_inner_button('Update Posts')

// remove dropdown button in a group
page.remove_inner_button('New Posts', 'Make')

page.clear_inner_toolbar

移除内部工具栏。

page.clear_inner_toolbar()

page.add_field

在页面表单工具栏中添加一个表单控件。

let field = page.add_field({
    label: 'Status',
    fieldtype: 'Select',
    fieldname: 'status',
    options: [
        'Open',
        'Closed',
        'Cancelled'
    ],
    change() {
        console.log(field.get_value());
    }
});

页面表单工具栏

page.get_form_values

以对象形式获取页面表单工具栏中的所有表单值。

let values = page.get_form_values()
// { status: 'Open', priority: 'Low' }

page.clear_fields

清除页面表单工具栏中的所有字段。

page.clear_fields()

列表视图是为除子表和单文档类型之外的所有文档类型生成的。

列表视图功能丰富，其中一些功能包括：

• 筛选
• 排序
• 分页
• 按标签筛选
• 切换视图为报表、日历、甘特图、看板等。

列表视图

标准列表 JS

要自定义列表视图，您必须在文档类型目录中有一个 {doctype}_list.js 文件。以下是所有可以自定义的选项。

例如，如果您想自定义 Note 文档类型，您需要创建一个包含以下内容的 note_list.js 文件。

frappe.listview_settings['Note'] = {
    // add fields to fetch
    add_fields: ['title', 'public'],
    // set default filters
    filters: [
        ['public', '=', 1]
    ],
    hide_name_column: true, // hide the last column which shows the `name`
    hide_name_filter: true, // hide the default filter field for the name column
    onload(listview) {
        // triggers once before the list is loaded
    },
    before_render() {
        // triggers before every render of list records
    },

    // set this to true to apply indicator function on draft documents too
    has_indicator_for_draft: false,

    get_indicator(doc) {
        // customize indicator color
        if (doc.public) {
            return [__("Public"), "green", "public,=,Yes"];
        } else {
            return [__("Private"), "darkgrey", "public,=,No"];
        }
    },
    primary_action() {
        // triggers when the primary action is clicked
    },
    get_form_link(doc) {
        // override the form route for this doc
    },
    // add a custom button for each row
    button: {
        show(doc) {
            return doc.reference_name;
        },
        get_label() {
            return 'View';
        },
        get_description(doc) {
            return __('View {0}', [`${doc.reference_type} ${doc.reference_name}`])
        },
        action(doc) {
            frappe.set_route('Form', doc.reference_type, doc.reference_name);
        }
    },
    // format how a field value is shown
    formatters: {
        title(val) {
            return val.bold();
        },
        public(val) {
            return val ? 'Yes' : 'No';
        }
    }
}

自定义列表 JS

您还可以通过创建系统中的客户端脚本来自定义列表视图。如果逻辑特定于您的站点，您应该编写客户端脚本。如果您想在多个站点之间共享列表视图自定义设置，则必须通过应用程序来包含它们。

要创建新的客户端脚本，请前往

首页 > 自定义 > 客户端脚本 > 新建

用于列表的新客户端脚本

上述自定义将产生如下所示的列表视图：

自定义列表视图

列表 JS 中的多个按钮

此功能在开发版中可用。

您现在可以通过列表视图客户端脚本，在列表视图行中的下拉菜单内添加多个按钮。此功能通过直接从列表视图方便地访问各种操作，增强了用户体验。

frappe.listview_settings["ToDo"] = {
    hide_name_column: true,
    add_fields: ["reference_type", "reference_name"],

    button: {
      show: function(doc) {
        return doc.reference_name;
      },
      get_label: function() {
        return __("Open", null, "Access");
      },
      get_description: function(doc) {
        return __("Open {0}", [
          `${__(doc.reference_type)}: ${doc.reference_name}`
        ]);
      },
      action: function(doc) {
        frappe.set_route("Form", doc.reference_type, doc
          .reference_name);
      },
    },
    dropdown_button: {
      get_label: __("Dropdown"),
      buttons: [{
          get_label: __("Button 1"),
          show: function(doc) {
            return true;
          },
          get_description: function(doc) {
            return "Open Button 1 " + doc.reference_name;
          },
          action: function(doc) {
            frappe.msgprint("Dropdown Button 1 Clicked " +
              doc.reference_name);
          }
        },
        {
          get_label: __("Button 2"),
          show: function(doc) {
            return doc.status != "Closed";
          },
          get_description: function(doc) {
            return "Open Button 2 " + doc.reference_name;
          },
          action: function(doc) {
            frappe.msgprint("Dropdown Button 2 Clicked " +
              doc.reference_name);
          }
        },
        {
          get_label: __("Button 3"),
          show: function(doc) {
            return doc.status != "Cancelled";
          },
          get_description: function(doc) {
            return "Open Button 3 " + doc.reference_name;
          },
          action: function(doc) {
            frappe.msgprint("Dropdown Button 3 Clicked " +
              doc.reference_name);
          }
        },
      ]
    }
  };

frappe.ui.form.make_control

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

根据 df 属性创建一个 frappe 控件，并将其追加到 parent
容器中。

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

以下是大多数 frappe 控件类型的 df 属性。

// 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: [
 '[email protected]',
 '[email protected]'
 ]
}

// 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: [
 '[email protected]',
 '[email protected]',
 '[email protected]'
 ]
}

// 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'
}

添加自定义格式化器

您可以通过将自定义格式化器添加到 frappe.meta.docfield_map 中的 docfield 对象，为文本类型对象（如 Data、Select、Text 等）添加自定义格式化器。

示例：

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