Dialog API (JS)

TechMaju menyediakan serangkaian dialog standar, interaktif, dan fleksibel yang mudah dikonfigurasi dan digunakan. Terdapat juga API di sisi server.

Bahasa: Javascript

Artefak Relevan: UI Script, Click Action

frappe.ui.Dialog

new frappe.ui.Dialog({ title, fields, primary_action })

Membuat instance Dialog baru.

let d = new frappe.ui.Dialog({
    title: 'Masukkan detail',
    fields: [
        {
            label: 'Nama Depan',
            fieldname: 'first_name',
            fieldtype: 'Data'
        },
        {
            label: 'Nama Belakang',
            fieldname: 'last_name',
            fieldtype: 'Data'
        },
        {
            label: 'Umur',
            fieldname: 'age',
            fieldtype: 'Int'
        }
    ],
    size: 'small', // small, large, extra-large 
    primary_action_label: 'Submit',
    primary_action(values) {
        console.log(values);
        d.hide();
    }
});

d.show();

Dialogfrappe.ui.Dialog

frappe.msgprint

frappe.msgprint(message) atau frappe.msgprint({ title, message, indicator })

Menampilkan message dalam modal.

// hanya pesan
frappe.msgprint(__('Dokumen berhasil diperbarui'));

// dengan opsi
frappe.msgprint({
    title: __('Notifikasi'),
    indicator: 'green',
    message: __('Dokumen berhasil diperbarui')
});

Msgprintfrappe.msgprint

Anda juga dapat mengikat tindakan utama ke dialog ini dengan melewatkan action (sebagai metode) dalam primary_action.

// dengan tindakan utama
 frappe.msgprint({
    title: __('Notifikasi'),
    message: __('Apakah Anda yakin ingin melanjutkan?'),
    primary_action:{
        action(values) {
            console.log(values);
        }
    }
});

Msgprint with Primary Actionfrappe.msgprint dengan tindakan utama terikat

frappe.throw

frappe.throw(error_message)

Menampilkan error_message dalam modal dan throw pengecualian.

frappe.throw(__('Ini adalah Pesan Error'))

Throwfrappe.throw

frappe.prompt

frappe.prompt(label) atau frappe.prompt(df) atau frappe.prompt(fields)

Meminta pengguna untuk mengisi nilai atau daftar nilai.

// meminta nilai tunggal dengan tipe Data
frappe.prompt('Nama Depan', ({ value }) => console.log(value))

// Setel judul dan label tombol
frappe.prompt('Nama Depan', console.log, 'Masukkan Nama Depan', 'Submit');

// meminta nilai tunggal dari jenis apa pun
frappe.prompt({
    label: 'Tanggal Lahir',
    fieldname: 'date',
    fieldtype: 'Date'
}, (values) => {
    console.log(values.date);
})

// meminta beberapa nilai
frappe.prompt([
    {
        label: 'Nama Depan',
        fieldname: 'first_name',
        fieldtype: 'Data'
    },
    {
        label: 'Nama Belakang',
        fieldname: 'last_name',
        fieldtype: 'Data'
    },
], (values) => {
    console.log(values.first_name, values.last_name);
})

Promptfrappe.prompt

frappe.confirm

frappe.confirm(message, if_yes, if_no)

Menampilkan modal konfirmasi, mengeksekusi if_yes jika konfirmasi diberikan, jika tidak mengeksekusi if_no.

frappe.confirm('Apakah Anda yakin ingin melanjutkan?',
    () => {
        // tindakan yang dilakukan jika Ya dipilih
    }, () => {
        // tindakan yang dilakukan jika Tidak dipilih
    })

Promptfrappe.confirm

frappe.warn

frappe.warn(title, message_html, proceed_action, primary_label, is_minimizable)

Menampilkan modal peringatan, mengeksekusi proceed_action jika konfirmasi diberikan. Ini dapat diatur sebagai minimizable yang memungkinkan dialog diminimalkan.

frappe.warn('Apakah Anda yakin ingin melanjutkan?',
    'Ada perubahan yang belum disimpan di halaman ini',
    () => {
        // tindakan yang dilakukan jika Lanjutkan dipilih
    },
    'Lanjutkan',
    true // Menetapkan dialog sebagai minimizable
)

Promptfrappe.confirm

frappe.show_alert

frappe.show_alert(message, seconds) atau frappe.show_alert({message, indicator}, seconds)

Dialog Peringatan digunakan untuk menampilkan pesan yang tidak menghalangi.

Parameternya mencakup message, yang dapat berisi warna indikator juga, dan durasi tampilan. Standarnya adalah 7 detik.

frappe.show_alert('Hi, Anda memiliki pesan baru', 5);

//show_alert dengan indikator
frappe.show_alert({
    message:__('Hi, Anda memiliki pesan baru'),
    indicator:'green'
}, 5);

Show Alertfrappe.show_alert

frappe.show_progress

frappe.show_progress(title, count, total, description)

Menampilkan progress bar dengan count (sebagai progres saat ini) dan total (sebagai nilai progres maksimum).

frappe.show_progress('Loading..', 70, 100, 'Harap tunggu');

Show Progressfrappe.show_progress

frappe.new_doc

frappe.new_doc(doctype, route_options, init_callback)

Membuka formulir baru dari DocType yang ditentukan yang memungkinkan untuk mengedit dan menyimpannya. Jika "Quick Entry" diaktifkan untuk DocType (yang memungkinkan untuk mengisi field-field terpenting) jendela pop-up "Quick Entry" akan ditampilkan. Jika tidak, Anda akan dialihkan ke formulir entri dokumen biasa.

Misalnya, mari kita buat Task baru:

frappe.new_doc("Task");

Seringkali ketika Anda membuat dokumen baru di antarmuka pengguna, Anda ingin menginisialisasi beberapa field-nya berdasarkan interaksi pengguna yang memicu pembuatan tersebut. Dua argumen lainnya dapat digunakan untuk inisialisasi semacam itu.

Secara khusus, argumen route_options adalah cara cepat dan nyaman untuk mengatur field apa pun dengan tipe Link, Select, Data, atau Dynamic Link dalam dokumen baru. Nilainya harus berupa objek yang kuncinya adalah nama field yang diinginkan dan nilainya adalah nilai awal.

frappe.new_doc("Task", {subject: "New Task"});

Jika Anda perlu melakukan inisialisasi lain pada dokumen baru yang tidak mungkin dilakukan dengan route_options, init_callback memberi Anda kendali penuh. Ini harus berupa fungsi dengan satu argumen. Jika doctype diinisialisasi dengan formulir "Quick Entry", callback dipanggil dengan objek dialog "Quick Entry" sesaat sebelum kontrol diserahkan kembali ke pengguna. Jika tidak, callback dipanggil dengan dokumen baru sesaat sebelum pengguna diizinkan mengeditnya dalam formulir standar.

frappe.new_doc("Task", {subject: "New Task"},
                doc => {doc.description = "Lakukan apa yang diperlukan";});

Perhatikan bahwa subject adalah field dengan tipe "Data", sehingga kami dapat memanfaatkan argumen route_options untuk mengaturnya. description adalah field dengan tipe "Text Editor", jadi jika kami ingin menginisialisasinya, itu harus dilakukan dalam callback.

Untuk contoh yang sedikit lebih kompleks, berikut adalah panggilan yang membuat Journal Entry baru dengan tipe "Bank Entry" dan mengisi satu sisi transaksi:

frappe.new_doc("Journal Entry", {"voucher_type": "Bank Entry"}, doc => {
    doc.posting_date = frappe.datetime.get_today();
    let row = frappe.model.add_child(doc, "accounts");
    row.account = 'Bank - A';
    row.account_currency = 'USD';
    row.debit_in_account_currency = 100.0;
    row.credit_in_account_currency = 0.0;
});

frappe.ui.form.MultiSelectDialog

new frappe.ui.form.MultiSelectDialog({ doctype, target, setters, date_field, get_query, action })

MultiSelectDialog terdiri dari field filter diikuti oleh daftar pilihan ganda. Tombol utama akan melakukan action yang diberikan pada opsi yang dipilih.

Secara default, field Search Term dan field Date Range akan menjadi field filter.

Daftar argumen mencakup:

  • doctype: Sumber untuk mengambil dan menampilkan entri pilihan.

  • target: Target di mana modal akan ditampilkan.

  • setters: Ini akan menjadi field filter dan nilai untuk mengisinya. Ini juga diterjemahkan menjadi kolom kustom untuk daftar pilihan.

  • add_filters_group: Nilai boolean untuk menambahkan/menghapus grup filter dalam dialog di bawah setters. Grup filter sama dengan filter tampilan daftar.

  • date_field: Diperlukan untuk melewatkan date_field dari DocType yang sedang dipertimbangkan.

  • get_query: Fungsi yang mengembalikan query dan filters untuk meminta daftar pilihan. Metode server-side kustom dapat diteruskan melalui query, dan filters akan diteruskan ke metode tersebut.

  • action: Berisi tindakan utama yang akan dilakukan pada opsi yang dipilih. Ini mengambil selections sebagai parameter, yang terdiri dari opsi yang dipilih.

  • columns: Sebuah array field yang dikembalikan oleh query kustom yang akan menjadi kolom dalam datatable hasil. Hanya berfungsi dengan query kustom (argumen get_query mengembalikan query).

Misalkan kita ingin mengambil Material Requests ke dalam dialog kita. Kita kemudian dapat memanggil MultiSelectDialog dengan cara berikut:

new frappe.ui.form.MultiSelectDialog({
    doctype: "Material Request",
    target: this.cur_frm,
    setters: {
        schedule_date: null,
        status: 'Pending'
    },
    add_filters_group: 1,
    date_field: "transaction_date",
    get_query() {
        return {
            filters: { docstatus: ['!=', 2] }
        }
    },
    action(selections) {
        console.log(selections);
    }
});

// MultiSelectDialog dengan metode query kustom
let query_args = {
    query:"dotted.path.to.method",
    filters: { docstatus: ["!=", 2], supplier: "John Doe" }
}

new frappe.ui.form.MultiSelectDialog({
    doctype: "Material Request",
    target: this.cur_frm,
    setters: {
        schedule_date: null,
        status: 'Pending'
    },
    add_filters_group: 1,
    date_field: "transaction_date",
    columns: ["name", "transaction_date", "status"],
    get_query() {
        return query_args;
    },
    action(selections) {
        console.log(selections);
    }
});

MultiSelectDialogfrappe.ui.form.MultiSelectDialog

Di sini semua Material Requests yang memenuhi kriteria filter akan dimasukkan ke area pilihan. Setter company ditambahkan ke field filter bersama dengan nilai yang diberikan. date_field akan digunakan untuk mengambil dan memfilter tanggal dari DocType yang disebutkan.

Tombol tindakan sekunder Make Material Request (atau Make {DocType}) akan mengarahkan Anda ke formulir baru untuk membuat entri baru ke dalam DocType yang diberikan.

Sekarang, jika kita hanya ingin memilih item tertentu dari Material Request, maka kita bisa menggunakan child_selection_mode opsional untuk mengaktifkan pemilihan child.


// MultiSelectDialog untuk pemilihan child individual
new frappe.ui.form.MultiSelectDialog({
    doctype: "Material Request",
    target: this.cur_frm,
    setters: {
        schedule_date: null,
        status: null
    },
    add_filters_group: 1,
    date_field: "transaction_date",
    allow_child_item_selection: 1,
    child_fieldname: "items", // child table fieldname, whose records will be shown & can be filtered
    child_columns: ["item_code", "qty"], // child item columns to be displayed
    get_query() {
        return {
            filters: { docstatus: ['!=', 2] }
        }
    },
    action(selections, args) {
        console.log(args.filtered_children); // list of selected item names
    }
});

MultiSelectDialogfrappe.ui.form.MultiSelectDialog

Di sini Anda akan melihat checkbox Pilih Item Individu untuk beralih antara pemilihan child item & pemilihan parent. Setelah Anda beralih, semua Material Requests Items individu yang dihasilkan dari semua Material Request yang diquery akan terdaftar, dan Anda sekarang dapat memfilter item-item ini untuk dipilih.

Untuk mengakses child yang dipilih, Anda dapat menggunakan daftar args.filtered_children yang berisi nama-nama child item yang dipilih.

Tabel / Grid dalam Dialog

Sebuah tabel dapat ditambahkan ke dialog, seperti field lainnya sebagai berikut:

const dialog = new frappe.ui.Dialog({
  title: __("Buat Log"),
  fields: [
      {
          fieldname: "logs",
          fieldtype: "Table",
          label: __("Log"),
          in_place_edit: true,
          reqd: 1,
          fields: [
              {
                  fieldname: "log_type",
                  label: __("Jenis Log"),
                  fieldtype: "Select",
                  options: "\nIN\nOUT",
                  in_list_view: 1,
                  reqd: 1,
              },
              {
                  fieldname: "time",
                  label: __("Waktu"),
                  fieldtype: "Time",
                  in_list_view: 1,
                  reqd: 1,
              }
          ],
          on_add_row: (idx) => {
            // idx = visible idx dari baris dimulai dari 1
            // contoh: set `log_type` sebagai IN/OUT bergantian dalam tabel saat menambahkan baris
              let data_id = idx - 1;
              let logs = dialog.fields_dict.logs;
              let log_type = (data_id % 2) == 0 ? "IN" : "OUT";

              logs.df.data[data_id].log_type = log_type;
              logs.grid.refresh();
          },
      },
  ],
  primary_action: (values) => { ... },
  primary_action_label: __("Buat"),
});

on_add_row: Sebuah peristiwa yang dipicu saat menambahkan baris ke tabel. Anda dapat melakukan tindakan seperti manipulasi data atau beberapa jenis perhitungan lain dengan menambahkan fungsionalitas Anda ke hook peristiwa ini.


Discard
Save
Draft

Previous Page

Left

Next Page

Right

On this page

Review Changes ← Back to Content
Message Status Space Raised By Last update on