Home Page - Tindakan Kustom

Tindakan kustom memungkinkan Anda melakukan tugas tertentu langsung dari halaman Tiket. Tindakan ini bisa berupa apa saja, mulai dari integrasi dengan aplikasi eksternal, pembaruan data tiket, hingga pembuatan 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 HD. 2.* Pilih Doctype:* Pilih Doctype (misalnya, Tiket HD) tempat Anda ingin menambahkan tindakan kustom. Anda akan melihat kode boilerplate.
2. Terapkan Ke: Pilih "Formulir".
3. Tentukan Tindakan Anda: Berikut cara menentukan berbagai jenis tindakan:
   • Tombol Tunggal: Kode ini membuat tombol tunggal berlabel "Buka di Meja" yang membuka Tiket saat ini di tab browser baru.

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

• Tindakan Terkelompok: Kode ini membuat sekelompok tombol yang tersembunyi di bawah menu tiga titik berlabel "Tambah". Mengklik "Buka Analisis Mingguan" atau "Buka Analisis Artikel" akan memicu fungsi onClick masing-masing (dijelaskan di tempat lain).

  const actions = [
    {
      group: 'Reports',
      hideLabel: true,
      items: [
        {
          label: 'Open Weekly Analysis',
          onClick: () => {},
        },
        {
          label: 'Open Articles Analytics',
          onClick: () => {},
        },
      ],
    },
    {
      group: 'Ticket',
      items: [
        {
          label: 'Create a new ticket',
          onClick: () => {},
        },
        // suggest some action other than open in fc
        {
          label: 'Open Customer Details',
          onClick: () => {},
        },
      ],
    },
  ]

• Tindakan yang Dikelompokkan dengan label: Kode ini membuat sekelompok tombol yang tersembunyi di bawah tombol tarik-turun berlabel "Laporan". Mengklik "Buka Analisis Mingguan" atau "Buka Analisis Artikel" akan memicu fungsi onClick masing-masing (didefinisikan di tempat lain).

  const actions = [{
        "buttonLabel": "Reports",
        "group": "Add",
        "hideLabel": true,
        "items": [
            {
              label: 'Open Weekly Analysis',
              onClick: () => {},
            },
            {
              label: 'Open Articles Analytics',
              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 Tiket saat ini. Anda dapat memanfaatkan konteks ini bersama berbagai fungsi untuk membuat tindakan kustom Anda:

• doc: Nilai bidang Tiket Akses (misalnya, doc.raised_by, doc.customer).
• $dialog: Membuka dialog konfirmasi dengan tindakan. (Anda dapat meneruskan judul, pesan, html & tindakan sebagai kunci saat membuat dialog)
• updateField: Memperbarui nilai bidang tertentu (misalnya, updateField('status', 'closed', callback)).
• router: Navigasi ke halaman lain menggunakan Vue Router.
• callMemanggil API dari sisi klien. Anda dapat menambahkan titik akhir sisi server dalam skrip server.
• createToast: Menampilkan pesan keberhasilan atau kesalahan.

Nilai Bidang dalam skrip Formulir HD doct

• Enabled: Aktifkan skrip, jika tidak ada opsi lain yang tiket, skrip akan diterapkan ke Tampilan Tiket Agen
• Apply to customer portal: : Skrip akan diterapkan ke Tampilan Tiket Pelanggan
• Apply on new page: : Skrip akan diterapkan pada pembuatan Tiket Baru

Dukungan Fungsi di berbagai halaman:

{| class="wikitable" style="text-align:center" |+ Daftar Fungsi dan Akses oleh Peran ! Fungsi ! Agen Tiket ! Pelanggan Tiket ! Tiket Baru |- | panggilan | ✓ | ✓

✓
perbaruiLapangan
✓
✓
✗
-
router
✓
✓
✓
-
$dialog
✓
✓
✓
-
buatRoti Panggang
✓
✓
✓
-
terapkanFilter
✗
✗
✓
}

Contoh: Tindakan Kustom untuk Manajemen Tiket

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

function setupForm({
  doc,
  updateField,
  call,
  router,
  $dialog,
  createToast,
}) {
  const actions = [
    {
      group: "Actions",
      hideLabel: true,
      items: [
        {
          label: "Open FC Info",
          onClick: () => {
            // Call API to get custom information
            call("show_custom_info", {
              ticket: doc.name,
              // Include relevant fields for fetching data
            }).then((data) => {
              if (data.name) {
                $dialog({
                  title: data?.title,
                  message: data?.message,
                  html: data?.html, // this field can be in HTML format
                  actions: [
                    {
                      label: "Open in FC",
                      variant: "solid",
                      onClick(close) {
                        let URL = `http://helpdesk:8010/app/hd-ticket/${doc?.name}`;
                        window.open(URL, "_blank");
                      },
                    },
                    //   add more actions
                  ],
                });
              }
            });
          },
        },
        {
          label: "Close this ticket",
          onClick: () => {
            $dialog({
              title: "Close this ticket?",
              message: "Are you sure you want to mark this close this ticket?",
              actions: [
                {
                  label: "Close",
                  theme: "red",
                  variant: "solid",
                  onClick(close) {
                    updateField("status", "Closed", () => {
                      createToast({
                        title: "Ticket has been closed",
                        icon: "alert-circle",
                      });
                      close();
                    });
                  },
                },
                {
                  label: "Cancel",
                  variant: "outline",
                  onClick(close) {
                    close();
                  },
                },
              ],
            });
          },
        },
      ],
    },
  ];
  if (doc.status !== "Closed") {
    actions.push({
      label: "Close the ticket",
      onClick: () => {
        $dialog({
          title: `Close ticket: ${doc.name}`,
          message: "Are you sure you want to close this ticket?",
          actions: [
            {
              label: "Close",
              theme: "red",
              variant: "solid",
              onClick(close) {
                updateField("status", "Closed", () => {});
                close();
              },
            },
            {
              label: "Cancel",
              variant: "outline",
              onClick(close) {
                close();
              },
            },
          ],
        });
      },
    });
  }

  return {
    actions,
  };
}