Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021

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?