frappe-syntax-clientscripts

Frappe クライアントスクリプトの構文

クライアントスクリプトはブラウザーで実行され、Frappe/ERPNext のすべての UI 操作を制御します。Setup > Client Script から作成するか、カスタムアプリの public/js/ に作成します。

重要：クライアントスクリプトの検証が適用されるのは、ブラウザーのフォームビューのみです。API 呼び出しと System Console では検証がバイパスされます。セキュリティ上重要な検証には、必ずサーバースクリプトを併用してください。

クイックリファレンス

操作	コード
値を設定	frm.set_value('field', value)
値を取得	frm.doc.fieldname
フィールドを非表示	frm.toggle_display('field', false)
必須にする	frm.toggle_reqd('field', true)
読み取り専用にする	frm.toggle_enable('field', false)
フィールドプロパティを設定	frm.set_df_property('field', 'options', [...])
リンクフィールドをフィルタリング	frm.set_query('field', () => ({filters: {}}))
サーバーを呼び出す	frappe.call({method: 'path.to.fn', args: {}})
ドキュメントメソッドを呼び出す	frm.call('method_name', {args})
保存を防止	frappe.throw(__('Error message'))
ボタンを追加	frm.add_custom_button(__('Label'), callback, group)
子テーブルの行を追加	frm.add_child('table', {values}); frm.refresh_field('table')
アラートを表示	frappe.show_alert({message: __('Done'), indicator: 'green'})
文字列を翻訳	__('Text') または __('Hello {0}', [name])

イベントの判断ツリー

What do you need to do?
│
├─ One-time setup (queries, formatters)?
│  └─ ALWAYS use setup — runs once per form instance
│
├─ Show/hide fields, add buttons, update UI?
│  └─ ALWAYS use refresh — fires after every load/reload
│
├─ Validate data before save?
│  └─ ALWAYS use validate — use frappe.throw() to block save
│
├─ Modify data right before server save?
│  └─ Use before_save — last chance to change values
│
├─ Run logic after successful save?
│  └─ Use after_save — document is persisted
│
├─ React to a field value change?
│  └─ Use the fieldname as the event name
│
├─ Intercept workflow state change?
│  └─ Use before_workflow_action / after_workflow_action
│
└─ Manipulate DOM after full render?
   └─ Use onload_post_render — NEVER use jQuery selectors directly

イベントの一覧と実行順序については、references/events.md を参照してください。

フォームイベントの登録

// Parent form events
frappe.ui.form.on('Sales Order', {
    setup(frm) { },           // Once per form instance
    refresh(frm) { },         // After every load/reload
    validate(frm) { },        // Before save — throw to block
    fieldname(frm) { }        // On field value change
});

// Child table events — ALWAYS register on the CHILD doctype
frappe.ui.form.on('Sales Order Item', {
    qty(frm, cdt, cdn) {
        let row = frappe.get_doc(cdt, cdn);
        frappe.model.set_value(cdt, cdn, 'amount', row.qty * row.rate);
    },
    items_add(frm, cdt, cdn) { },     // Row added
    items_remove(frm) { },            // Row removed (no cdt/cdn)
    items_move(frm) { }               // Row reordered
});

値の操作

// ALWAYS use frm.set_value() — NEVER assign frm.doc.field directly
frm.set_value('status', 'Approved');                        // Single
frm.set_value({status: 'Approved', priority: 'High'});      // Multiple

// Read values (read-only — NEVER write via frm.doc)
let val = frm.doc.fieldname;
let items = frm.doc.items;  // Child table array

フィールドプロパティ

// Show/hide (accepts single field or array)
frm.toggle_display(['priority', 'due_date'], frm.doc.status === 'Open');

// Mandatory toggle
frm.toggle_reqd('due_date', true);

// Read-only toggle
frm.toggle_enable('amount', false);  // false = read-only

// Arbitrary property change
frm.set_df_property('status', 'options', ['New', 'Open', 'Closed']);
frm.set_df_property('amount', 'read_only', 1);
frm.set_df_property('notes', 'label', 'Internal Notes');

// Intro message at form top
frm.set_intro('This document is pending review', 'orange');

リンクフィールドのフィルター

// ALWAYS set queries in setup event — NEVER in refresh
frappe.ui.form.on('Sales Order', {
    setup(frm) {
        // Simple filter
        frm.set_query('customer', () => ({
            filters: { disabled: 0 }
        }));

        // Child table filter
        frm.set_query('item_code', 'items', (doc, cdt, cdn) => {
            let row = locals[cdt][cdn];
            return { filters: { is_sales_item: 1 } };
        });

        // Server-side query for complex logic
        frm.set_query('customer', () => ({
            query: 'myapp.queries.get_filtered_customers',
            filters: { region: frm.doc.region }
        }));
    }
});

サーバーとの通信

// frappe.call — whitelisted Python method
let r = await frappe.call({
    method: 'myapp.api.process_data',
    args: { customer: frm.doc.customer },
    freeze: true,
    freeze_message: __('Processing...')
});
if (r.message) { /* use r.message */ }

// frm.call — document controller method
let result = await frm.call('calculate_taxes', { include_shipping: true });

// frappe.db shortcuts
let val = await frappe.db.get_value('Customer', name, 'credit_limit');
let list = await frappe.db.get_list('Sales Order', {
    filters: { customer: frm.doc.customer },
    fields: ['name', 'grand_total'],
    order_by: 'creation desc',
    limit: 10
});

子テーブルの操作

// Add row — ALWAYS call refresh_field after
let row = frm.add_child('items', { item_code: 'ITEM-001', qty: 5 });
frm.refresh_field('items');

// Clear all rows
frm.clear_table('items');
frm.refresh_field('items');

// Modify existing rows — refresh_field ONCE after loop
frm.doc.items.forEach(row => {
    row.discount = row.qty > 10 ? 5 : 0;
});
frm.refresh_field('items');

// Set child row value (inside child event handler)
frappe.model.set_value(cdt, cdn, 'amount', row.qty * row.rate);

// Mark form dirty after programmatic changes
frm.dirty();

カスタムボタン

refresh(frm) {
    if (frm.doc.docstatus === 1) {
        // Grouped dropdown
        frm.add_custom_button(__('Invoice'), () => {
            frappe.model.open_mapped_doc({
                method: 'erpnext.selling.doctype.sales_order.sales_order.make_sales_invoice',
                frm: frm
            });
        }, __('Create'));

        // Primary action
        frm.page.set_primary_action(__('Process'), () => {
            frm.call('process').then(() => frm.reload_doc());
        });
    }

    // ALWAYS guard buttons with state checks
    if (!frm.is_new() && frm.doc.docstatus === 0) {
        frm.add_custom_button(__('Validate'), () => { /* ... */ });
    }
}

リストビューのカスタマイズ

frappe.listview_settings['Task'] = {
    add_fields: ['status', 'priority'],
    filters: [['status', '!=', 'Cancelled']],
    hide_name_column: true,

    get_indicator(doc) {
        // ALWAYS return [label, color, filter_field + ',' + filter_value]
        if (doc.status === 'Open') return [__('Open'), 'orange', 'status,=,Open'];
        if (doc.status === 'Closed') return [__('Closed'), 'green', 'status,=,Closed'];
    },

    button: {
        show(doc) { return doc.status === 'Open'; },
        get_label() { return __('Close'); },
        action(doc) { frappe.call({method: 'myapp.api.close', args: {name: doc.name}}); }
    },

    formatters: {
        priority(val) { return val === 'High' ? `<b>${val}</b>` : val; }
    },

    onload(listview) { /* runs once */ },
    refresh(listview) { /* runs on every refresh */ }
};

ダイアログとプロンプト

// Quick prompt
frappe.prompt({label: 'Reason', fieldname: 'reason', fieldtype: 'Data'},
    (values) => { console.log(values.reason); },
    __('Enter Reason')
);

// Full dialog
let d = new frappe.ui.Dialog({
    title: __('Enter Details'),
    fields: [
        {label: 'Name', fieldname: 'name', fieldtype: 'Data', reqd: 1},
        {label: 'Date', fieldname: 'date', fieldtype: 'Date'}
    ],
    size: 'small',
    primary_action_label: __('Submit'),
    primary_action(values) { d.hide(); /* use values */ }
});
d.show();

// Progress indicator
frappe.show_progress(__('Importing'), 45, 100, __('Please wait'));

重要なルール

1. 子テーブルを変更した後は、必ず frm.refresh_field('table') を呼び出してください
2. frm.doc.field = value を代入しないでください。必ず frm.set_value() を使用してください
3. ユーザーに表示する文字列には、必ず __('text') を使用してください
4. set_query は必ず setup に配置してください。refresh には配置しないでください
5. async: false は使用しないでください。ブラウザーがフリーズします
6. アクションボタンを追加する前に、必ず frm.is_new() を確認してください
7. フィールドの操作に jQuery のセレクターを直接使用しないでください。Frappe API を使用してください
8. グローバル変数に状態を保存しないでください。代わりに frm オブジェクトにアタッチしてください
9. サーバー呼び出しのレスポンスを使用する前に、必ず r.message を確認してください
10. 保存を阻止するには、必ず validate 内で frappe.throw() を使用してください。非同期ハンドラー内で return false を使用しないでください

API の完全なリファレンスについては、references/methods.md を参照してください。 実際の使用パターンについては、references/examples.md を参照してください。 よくある間違いについては、references/anti-patterns.md を参照してください。

関連スキル

• frappe-impl-clientscripts — 実装ワークフローと判断ツリー
• frappe-errors-clientscripts — エラー処理とデバッグのパターン
• frappe-syntax-whitelisted — クライアントスクリプトから呼び出すサーバー側メソッド
• frappe-syntax-doctypes — スクリプトで参照される DocType フィールド定義