Alternatif Cara Mengeset Tooltip Lewat Custom Attribute di PHPMaker 2021

Benar-benar gila ini PHPMaker! Ada saja setiap hari ilmu yang bisa kita dapatkan saat menggunakan PHPMaker untuk membangun Aplikasi Web. Seperti yang satu ini, kita akan belajar bagaimana cara mengeset Tooltip lewat Custom Attribute di PHPMaker 2021.

Selain itu, kita juga akan belajar bagaimana cara membuat Tooltip yang bisa mendukung penggunaan multi bahasa. Hal ini sangat bermanfaat jika Aplikasi Web yang kita bangun dengan PHPMaker 2021 menggunakan lebih dari satu bahasa.

Kalau Anda sudah pernah membaca artikel Mudahnya Mengubah Teks Tooltip Secara Dinamis di Aplikasi Web dari PHPMaker 2021 yang saya tulis dua hari lalu, maka tulisan ini merupakan alternatif cara untuk mengeset Tooltip lewat Custom Attribute di Fields setup.

Fitur ini terdapat masing-masing di panel View Tag (untuk halaman List/View) dan Edit Tag (untuk halaman Add/Edit) di bawah pengaturan Fields pada project PHPMaker 2021.

Seperti namanya, Custom Attribute berarti attribute yang bersifat kostum yang dapat kita tambahkan tanpa harus mengedit secara langsung file script yang sudah di-generate oleh PHPMaker. Kita cukup menambahkannya melalui kedua panel di atas tadi.

Contoh, kita ingin menambahkan Tooltip pada field Model milik table models dari project demo2021 yang bisa kita download dan coba di localhost.

Pertama, jika kita ingin menambahkannya pada halaman List dan View, klik panel View Tag, lalu masukkan sebaris kode berikut ke bagian Custom Attribute:

["class" => "ew-tooltip", "title" => $Language->phrase("MyModelTooltip")]

Kedua, jika kita ingin menambahkannya pada halaman Add dan Edit, klik panel Edit Tag, lalu masukkan juga sebaris kode berikut ke bagian Custom Attribute:

["class" => "form-control ew-tooltip", "title" => $Language->phrase("MyModelTooltip")]

Dari kedua kode tersebut, kita melihat ada sedikit perbedaan antara kode di panel View Tag dan Edit Tag. Khusus untuk panel Edit Tag, kita wajib menambahkan class form-control sebelum class ew-tooltip. Jika tidak, maka class yang digunakan oleh control di field Model tadi menjadi tidak sama dengan class yang digunakan oleh control lainnya pada form tersebut.

Ketiga, jangan lupa untuk menambahkan kode berikut ke dalam server event Language_Load yang terdapat di bawah lokasi Server Events -> Global -> All Pages:

if (CurrentLanguageID() == "en") {
    $this->setPhrase("MyModelTooltip", "This is new tooltip for Model in English");
} elseif (CurrentLanguageID() == "id") {
    $this->setPhrase("MyModelTooltip", "Ini tooltip baru untuk Model bahasa Indonesia");
} elseif (CurrentLanguageID() == "ar") {
    $this->setPhrase("MyModelTooltip", "This is new tooltip for Model in Arabic");
}

Kode yang barusan ini bertujuan untuk membuat teks atau tulisan di Tooltip tadi mendukung multi bahasa. Kita cukup mengeset phrase baru yang bernama MyModelTooltip. Dengan kata lain, phrase ini tidak harus didefinisikan terlebih dulu di dalam file language yang berekstensi .xml.

Terakhir, pastikan untuk men-generate ulang semua file script dengan menggunakan PHPMaker 2021 seperti biasa. Setelah itu jalankan Aplikasi Web dari browser, login dengan username admin dan password master, lalu klik menu Models.

Di halaman List dan View, ketika kita geser kursor mouse ke atas field Model, maka akan muncul Tooltip sesuai dengan bahasa yang sedang terpilih di Aplikasi Web tersebut. Demikian juga hal yang sama terjadi pada halaman Add dan Edit.

Betapa mudah dan cepatnya bukan? Kode yang kita tambahkan sedikit banget, karena selebihnya sudah ditangani oleh PHPMaker 2021.