Home Page - Tindakan Khusus (Custom Actions)

Tindakan kustom memungkinkan Anda melakukan tugas-tugas spesifik langsung dari halaman Prospek atau Transaksi, yang selaras dengan tahapan proses penjualan Anda. Tindakan ini dapat berupa apa saja, mulai dari integrasi dengan aplikasi eksternal hingga memperbarui status transaksi atau membuat dokumen terkait.

Membuat Tindakan Kustom

Tindakan kustom diimplementasikan menggunakan Form Scripts di Desk:

1. Navigasi ke Meja: Beralih ke Meja dan navigasikan ke Skrip Formulir CRM.
2. Pilih Doctype: Pilih Doctype (misalnya, Prospek atau Transaksi) tempat Anda ingin menambahkan tindakan kustom. Anda akan melihat kode standar.
3. Terapkan Ke: Pilih "Formulir".
4. Tentukan Tindakan Anda: Berikut cara menentukan berbagai jenis tindakan:
   • Tombol Tunggal: Kode ini membuat tombol tunggal berlabel "Buka di Meja" yang membuka Prospek/Transaksi saat ini di tab browser baru.

const actions = [{
    "label": "Open in Desk",
    "onClick": () => {
        let URL = `https://frappecrm.frappe.cloud/app/crm-deal/${doc.name}`
        window.open(URL, '_blank')
    }
}]

• Tindakan yang Dikelompokkan: Kode ini membuat sekelompok tombol yang tersembunyi di bawah menu tiga titik berlabel "Tambah". Mengklik "Buat Penawaran" atau "Buat Pesanan Penjualan" akan memicu fungsi onClick masing-masing (dijelaskan di tempat lain).

const actions = [{
    "group": "Add",
    "hideLabel": true,
    "items": [
        {
            "label": 'Create Quotation',
            "onClick": () => {}
        },
        {
            "label": 'Create Sales Order',
            "onClick": () => {}
        },
    ]
},
{
    "group": "Delete",
    "items": [
        {
            "label": 'Delete Quotation',
            "onClick": () => {}
        },
        {
            "label": 'Delete Sales Order',
            "onClick": () => {}
        },
    ]
}]

• Tindakan yang Dikelompokkan dengan label: Kode ini membuat sekelompok tombol yang tersembunyi di bawah tombol tarik-turun berlabel "Buat". Mengklik "Buat Penawaran" atau "Buat Pesanan Penjualan" akan memicu fungsi onClick masing-masing.

const actions = [{
    "buttonLabel": "Create",
    "group": "Add",
    "hideLabel": true,
    "items": [
        {
            "label": 'Create Quotation',
            "onClick": () => {}
        },
        {
            "label": 'Create Sales Order',
            "onClick": () => {}
        },
    ]
}]

• Tindakan Gabungan: Anda dapat menggabungkan tombol tunggal dan tindakan grup menjadi satu daftar dan meneruskannya sebagai properti "tindakan".

Menggunakan Konteks dan Tindakan

Parameter ini docmenyediakan konteks tentang halaman Prospek/Transaksi saat ini. Anda dapat memanfaatkan konteks ini beserta berbagai fungsi untuk membuat tindakan kustom Anda:

• doc: Mengakses nilai bidang Prospek/Kesepakatan (misalnya, doc.lead_owner, doc.name).
• deleteDoc: Menghapus dokumen Prospek/Kesepakatan saat ini.
• $dialog: Membuka dialog konfirmasi dengan tindakan.
• updateField: Memperbarui nilai bidang tertentu (misalnya, updateField('status', 'Lost', callback)).
• router: Navigasi ke halaman lain menggunakan Vue Router.
• createToast: Menampilkan pesan keberhasilan atau kesalahan.
• call: Memanggil API dari sisi klien.

Contoh: Tindakan Kustom untuk Manajemen Transaksi

Berikut contoh yang menampilkan berbagai tindakan kustom yang dapat Anda buat untuk mengelola Transaksi:

const actions = [
 {
  group: "Actions",
  hideLabel: true,
  items: [
   {
    label: "Create Quotation",
    onClick: () => {
     if (doc.status === "Won") {
      // Call API to create quotation based on deal fields
      call("create_quotation", {
       deal: doc.name,
       // Include relevant deal fields for quotation creation
      }).then((data) => {
       if (data.name) {
        router.push({ name: "Quotation", params: { name: data.name } });
        createToast({
         title: "Quotation Created",
         icon: "check",
         iconClasses: "text-green-600",
        });
       } else {
        createToast({
         title: "Error Creating Quotation",
         icon: "x",
         iconClasses: "text-red-600",
        });
       }
      });
     } else {
      createToast({
       title: "Action only available for Won Deals",
       icon: "info",
      });
     }
    },
   },
   {
    label: "Mark Lost",
    onClick: () => {
     $dialog({
      title: "Mark Deal Lost",
      message: "Are you sure you want to mark this deal as Lost?",
      actions: [
       {
        label: "Mark Lost",
        theme: "red",
        variant: "solid",
        onClick(close) {
         updateField("status", "Lost", () => {
          createToast({ title: "Deal Marked Lost", icon: "alert-circle" });
          close();
         });
        },
       },
       {
        label: "Cancel",
        variant: "outline",
        onClick(close) {
         close();
        },
       },
      ],
     });
    },
   }
  ],
 },
 {
  label: "Delete",
  onClick: () => {
   $dialog({
    title: "Delete Deal",
    message: "Are you sure you want to delete this deal?",
    actions: [
     {
      label: "Delete",
      theme: "red",
      variant: "solid",
      onClick(close) {
       deleteDoc();
       close();
      },
     },
     {
      label: "Cancel",
      variant: "outline",
      onClick(close) {
       close();
      },
     },
    ],
   });
  },
 }
];