Kadang-kadang, kita ingin mengakses Lookup Table menggunakan Ajax. Sebagai contoh, setelah Pengguna Akhir memasukkan data ke sebuah field, kita ingin mengotomatiskan field lain terisi datanya. Untuk itu, maka kita dapat menggunakan API dan Client Scripts untuk mengimplementasikannya.
Supaya Auto fill bisa dijalankan lewat kode yang kita tulis, maka pastikan untuk tidak mengaktifkan fitur built-in Auto-Fill di table Lookup Table.
Katakanlah, jika kita ingin memasukkan Product Price ketika kita memilih sebuah ProductID (dengan menggunakan table products sebagai lookup table) ketika sedang mengisi record baru, Anda dapat mengotomatiskan pengisian ProductPrice di table orderdetails, apakah secara asynchronous atau synchronous dengan kode.
Contoh pertama, kita bisa menggunakan Auto-Fill asynchronously dengan action API view.
Cukup dengan menulis kode Javascript di bagian Startup Script dari halaman Add milik table orderdetails, untuk melampirkan event onchange dan mendapatkan data dari table lain (dalam hal ini products) dengan action API yang bernama “view”.
$("#x_ProductID").change(function() {
$.get(ew.getApiUrl(["view", "products", $(this).val()]), function(res) { // Get response from API
if (res && res.success) {
var row = res["products"];
$("#x_UnitPrice").val(row["UnitPrice"]); // isi hasil ke field target
} else {
ew.alert(res.failureMessage);
}
});
});
Dalam contoh ini, kita menggunakan Lookup API, sehingga tidak perlu menulis kode di sisi server.
Jika action = view, kita akan mendapatkan sebuah record dengan melewatkan Primary Key di URL. Jika Primary Key lebih dari satu, maka pisahkan dengan karakter pemisah composite key (nilai default-nya adalah karakter koma). Hasilnya adalah satu record.
Sedangkan jika action = list, kita akan mendapatkan beberapa record (object array), dengan melewatkan parameter pencarian di URL. Contohnya bisa dilihat dari URL di halaman List setelah melakukan proses pencarian. Hasilnya adalah array record.
Jika User ID dan/atau User Level diaktifkan, record-record dan/atau halaman akan tetap diproteksi. Jadi, jika misalnya Pengguna tidak memiliki hak akses ke halaman View, maka action view tadi (misalnya) tidak diijinkan.
Nilai yang dikembalikan adalah nilai asli dari Database. Tentu saja kita bisa mem-format-nya terlebih dulu sesuai dengan kebutuhan, sebelum ditampilkan ke field target.
Contoh kedua, kita bisa menggunakan Auto-Fill synchronously lewat ew.ajax().
Cukup dengan menuliskan kode Javascript ke bagian Startup Script milik halaman Add, untuk melampirkan event onchange.
$("#x_ProductID").change(function() {
var object = "products", data = { "action": "view", "object": object, "ProductID": encodeURIComponent($(this).val()) };
var res = ew.ajax(data);
if (res && res.success) {
var row = res[object];
$("#x_UnitPrice").val(row["UnitPrice"]); // isi hasil ke field target
}
});
Perlu diingat bahwa fungsi built-in ew.ajax() menggunakan API halaman View. Jadi, dalam hal ini kita tidak perlu menentukan URL.
Contoh ketiga, kita menggunakan Auto-Fill asynchronously melalui ew.ajax().
Cukup dengan menulis kode Javascript di bagian Startup Script milik halaman Add, dengan melampirkan event onchange. Sama seperti contoh 2 di atas.
$("#x_ProductID").change(function() {
var object = "products", data = { "action": "view", "object": object, "ProductID": encodeURIComponent($(this).val()) };
ew.ajax(data, function(res) { // Lewatkan fungsi callback sebagai parameter kedua ew.ajax()
if (res && res.success) {
var row = res[object];
$("#x_UnitPrice").val(row["UnitPrice"]); // isi hasil ke field target
}
});
});
Contoh keempat, kita menggunakan Auto-Fill asynchronously lewat custom API action dan Client Script.
Pastikan untuk menulis API handler terlebih dulu, katakanlah “getUnitPriceByProductID”, dan tempatkan di bagian Global Code untuk mengembalikan nilai yang dibutuhkan. Dalam contoh ini, hanya nilai tunggal yang dibutuhkan, jadi ExecuteScalar() yang kita gunakan.
$API_ACTIONS["getUnitPriceByProductID"] = function(Request $request, Response $response) {
$productId = Param("ProductID"); // Get the input value from $_GET or $_POST
if ($productId !== NULL)
Write(ExecuteScalar("SELECT UnitPrice FROM products WHERE ProductID = " . AdjustSql($productId))); // Output field value as string
};
Jika kita ingin mengembalikan seluruh baris dengan JSON, maka kita dapat menggunakan WriteJson() yang dikombinasikan dengan ExecuteRow().
WriteJson(ExecuteRow("SELECT * FROM products WHERE ProductID = " . AdjustSql($productId))); // Output the row (array) as JSON
Selanjutnya tulis kode Javascript di bagian Startup Script milik halaman Add untuk melampirkan event onchange:
$("#x_ProductID").change(function() {
var url = ew.API_URL, action = "getUnitPriceByProductID", id = encodeURIComponent($(this).val());
//$.get(url + "/" + action + "?ProductID=" + id, function(res) { // URL format if URL Rewrite enabled
$.get(url + "?action=" + action + "&ProductID=" + id, function(res) { // Get response from custom API action
if (res)
$("#x_UnitPrice").val(res); // isi hasil ke field target
});
});
Betapa mudahnya, bukan?
Bang Masino, apakah AutoFill dengan metode ini bisa untuk menampilkan Field dalam bentuk gambar ?
Mengingat secara default dari dalam project PHPMaker belum bisa (sejauh yang saya tau)
Jadi misal AutoFill Input NIM, bisa muncul Nama, Alamat , foto (dalam bentuk gambar)
Tidak bisa.
Hi Massino,
I have used the example to be able to dynamically fill a combobox when selecting an employee from a lookup but I get the following error in the browser:
api/?action=cPeriodoVacacionPendiente&emplecodigo=EMP00186:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
This is my code in Client Script->Table-Specific->Add/Copy Page->Startup Script
$(document).ready(function() { $("#x_emplecodigo").change(function() { var url = ew.API_URL, action = "cPeriodoVacacionPendiente", emplecodigo = encodeURIComponent($(this).val()); //$.get(url + "/" + action + "?ProductID=" + id, function(res) { // URL format if URL Rewrite enabled $.get(url + "?action=" + action + "&emplecodigo=" + emplecodigo, function(res) { // Get response from custom API action if (res) $("#x_periodo").val(res); // isi hasil ke field target }); }); });This is my code in Global Code :
//Ejemplo Autofill Periodo $API_ACTIONS["cPeriodoVacacionPendiente"] = function(Request $request, Response $response) { $codigo = Param("emplecodigo"); // Get the input value from $_GET or $_POST alert($codigo); if ($codigo !== NULL) WriteJson(ExecuteRow("SELECT * FROM vvacacion_dias_periodo WHERE emplecodigo = " . AdjustSql($codigo))); // Output field value as string };Could you tell me what I have to do for it to function?
In the first execution the combo loads correctly, but if I change the employee code, the Client Script is executed but it does not load the combo again, it stays with the same data.
Thanks and regards.
For such case, then you should use Dynamic Selection List. Please read Tutorial – Dynamic Selection List.
Hii Pak Masino..
Bagaimana menggunakan auto fill untuk case realisasi produk di penjualan dari produk yang ada order penjualan?
Tabel info
Order :
Order_id
Order_detail :
Order_id
Produk_id
Sales :
Sales_id
ORDER_ID => COMBO BOX (ORDER TABLE)
Sales_detail :
Sales_id
Produk_id
* pada saat di sales (master detail), setelah order id dipilih, maka produk id terisi otomatis dari order_detail dengan nomor order yang sama
Salam
Sudah coba fitur Auto Fill di PHPMaker?
sudah dan berhasil kalo untuk satu tabel.
saya coba dengan case, pilih id_barang, auto fill untuk nama dan harga (sperti di demo produk).
pak masino tanya untuk kode yang ini:
$("#x_ProductID").change(function() { $.get(ew.getApiUrl(["view", "products", $(this).val()]), function(res) { // Get response from API if (res && res.success) { var row = res["products"]; $("#x_UnitPrice").val(row["UnitPrice"]); // isi hasil ke field target } else { ew.alert(res.failureMessage); } }); });bagaimana caranya kalau yang saya ambil kode_produknya bukan id produknya.
jadi di field nya ada
idproduk, kodeproduk, namaproduk, hargaproduk
Kalau API untuk view bawaan PHPMaker sepertinya tidak bisa.
Solusinya, kita bisa mendefinisikan API kita sendiri lewat server event Api_Action supaya berdasarkan field kode_produk-nya, lalu memanggil API-nya seperti cara di kode yang Anda berikan tadi.
saya coba api_action tapi muncul error token
$API_ACTIONS[“ambildata”] = function(Request $request, Response $response) {
^
ERROR: Unexpected token name -½$request-+, expected punc -½,-+
ada cara untuk masalah ini tidak
ini script nya untuk di global code nya
$API_ACTIONS[“ambildata”] = function(Request $request, Response $response) {
$id_anggota = Param(“id_anggota”); // Get the input value from $_GET or $_POST
if ($id_anggota !== NULL)
Write(ExecuteScalar(“SELECT anggota FROM products WHERE nomor_anggota = ” . AdjustSql($id_anggota))); // Output field value as string
};
yang ini startup script di add
$(“#x_id_anggota”).change(function() {
var url = ew.API_URL, action = “ambildata”, id = encodeURIComponent($(this).val());
//$.get(url + “/” + action + “?ProductID=” + id, function(res) { // URL format if URL Rewrite enabled
$.get(url + “?action=” + action + “&id_anggota=” + id, function(res) { // Get response from custom API action
if (res)
$(“#x_nama_lengkap”).val(res); // isi hasil ke field target
});
});
Coba ikuti dokumentasi ini.
selamat pagi pak masino, adakah solving masalah dropdown, lookup yang datanya tidak muncul di versi 2024?
Coba cek permission Lookup-nya, apakah sudah diberikan?