Geekly articles weekly

Kami sedang membangun antarmuka untuk memasukkan dokumen melalui seleksi

gambar

Dalam berbagai aplikasi bisnis, tugas input dokumen sering muncul. Biasanya, dokumen terdiri dari judul dan beberapa baris, yang masing-masingnya mengacu pada beberapa objek (misalnya, produk). Paling sering, tabel biasa digunakan untuk memasukkan catatan ke dalam dokumen, di mana pengguna dapat menambah dan menghapus baris, serta mengubah isinya.

Namun, dalam beberapa kasus, skema seperti itu tidak selalu nyaman bagi pengguna. Pada artikel ini saya akan memberi tahu Anda cara membangun antarmuka pengguna yang nyaman menggunakan teknik memilih produk.

Tantangan


Sebagai aturan, saat memasukkan dokumen untuk pengguna, ada batasan pada set objek yang dapat ditambahkan padanya. Dalam hal ini, adalah logis bagi pengguna untuk menunjukkan daftar objek tersebut dengan kemampuan untuk dengan cepat memasukkan (dan mengecualikan) mereka dalam dokumen. Dalam kolom, untuk masing-masing objek, juga nyaman untuk menunjukkan data yang diperlukan untuk membuat keputusan tentang perlunya memasukkannya ke dalam dokumen. Dan akhirnya, bersama dengan objek, sering ada kebutuhan untuk memasukkan jumlahnya.

Mari kita perhatikan tiga jenis dokumen yang sering ditemukan dalam aplikasi bisnis:

  1. Pesanan pembelian . Dalam dokumen tersebut, adalah logis bagi pengguna untuk menunjukkan daftar semua barang yang tersedia untuk dipesan dari pemasok. Di kolom itu, nyaman untuk menunjukkan saldo saat ini, penjualan untuk interval tertentu, jumlah yang dipesan untuk pembelian dan penjualan.
  2. Pesanan penjualan . Di sini, paling sering, daftar barang yang ada di saldo gudang yang dipilih dan tersedia untuk dijual kepada pelanggan yang dipilih ditampilkan. Harga saat ini juga harus ditampilkan.
  3. Ubah saldo . Dokumen ini digunakan untuk menyesuaikan saldo saat ini jika ada perbedaan dengan jumlah aktual. Semua produk biasanya ditampilkan dalam pemilihan, dengan kemampuan untuk memasukkan saldo aktual untuk salah satu dari mereka. Pada saat yang sama, suatu produk ditambahkan ke dokumen dengan jumlah yang sama dengan perbedaan antara saldo aktual dan saat ini.

Solusi


Selanjutnya, saya akan menunjukkan cara mengimplementasikan logika ini dengan cepat dan mudah berdasarkan platform lsFusion yang terbuka dan gratis. Sebagai contoh, mari kita buat logika untuk memasukkan pesanan pembelian.

Untuk memulai, tambahkan panduan produk melalui antarmuka CRUD standar:
CLASS Product '' ;
name '' = DATA STRING [ 50 ] (Product);

FORM product ''
OBJECTS p = Product PANEL
PROPERTIES (p) name

EDIT Product OBJECT p //
;

FORM products ''
OBJECTS p = Product
PROPERTIES (p) READONLY name
PROPERTIES (p) NEWSESSION NEW , EDIT , DELETE

LIST Product OBJECT p // ,
;

NAVIGATOR {
NEW products;
}

Kami menciptakan konsep pemasok, dan dalam bentuk penyuntingan kami memberikan kesempatan untuk memilih produk yang digunakannya:
CLASS Supplier '' ;
name '' = DATA STRING [ 50 ] (Supplier);

in '' = DATA BOOLEAN (Supplier, Product); // TRUE,

FORM supplier ''
OBJECTS s = Supplier PANEL
PROPERTIES (s) name

OBJECTS p = Product //
PROPERTIES in(s, p), name(p) READONLY //

EDIT Supplier OBJECT s
;

FORM suppliers ''
OBJECTS s = Supplier
PROPERTIES (s) READONLY name
PROPERTIES (s) NEWSESSION NEW , EDIT , DELETE

LIST Supplier OBJECT s
;

NAVIGATOR {
NEW suppliers;
}

Nyatakan logika pesanan dengan garis:
CLASS Order '' ;
date '' = DATA DATE (Order);
number '' = DATA INTEGER (Order);

supplier '' = DATA Supplier (Order);
nameSupplier '' (Order o) = name(supplier(o));

CLASS OrderDetail ' ' ;
order '' = DATA Order (OrderDetail) NONULL DELETE ;

Tambahkan produk dan jumlah ke garis:
product '' = DATA Product (OrderDetail);
nameProduct '' (OrderDetail d) = name(product(d));

quantity '-' = DATA NUMERIC [ 14 , 3 ] (OrderDetail);

Kami melanjutkan langsung ke konstruksi formulir pengeditan pesanan yang kami butuhkan. Pertama, tambahkan pesanan itu sendiri dan garis-garisnya ke sana:
FORM order ''
OBJECTS o = Order PANEL
PROPERTIES (o) date, number, nameSupplier

OBJECTS d = OrderDetail
PROPERTIES (d) nameProduct, quantity, NEW , DELETE
FILTERS order(d) = o

EDIT Order OBJECT o
;

Dengan demikian, kami mendapatkan antarmuka standar untuk bekerja dengan jalur pemesanan melalui penambahan dan penghapusan.
Selanjutnya kita menambahkan fungsi seleksi yang kita butuhkan ke formulir ini. Untuk melakukan ini, pertama-tama buat objek pada formulir dengan daftar semua barang, di mana kami hanya memfilter yang diizinkan memesan dari pemasok yang dipilih:
EXTEND FORM order
OBJECTS p = Product
PROPERTIES name(p) READONLY
FILTERS in(supplier(o), p) //
;

Kami menyiapkan desain sehingga garis pesanan dan pilihan ditampilkan sebagai tab dari satu wadah:
DESIGN order {
OBJECTS {
NEW pane { //
fill = 1 ; //
type = TABBED ; // ,
MOVE BOX (d); //
MOVE BOX (p) { //
caption = '' ;
}
}
}
}

Kami membangun properti bantu untuk menampilkan dan memasukkan kuantitas oleh pengguna di kolom yang sesuai:
quantity '-' (Order o, Product p) =
GROUP SUM quantity(OrderDetail d) BY order(d), product(d);
lastOrderDetail ' ' (Order o, Product p) =
GROUP LAST OrderDetail d ORDER d BY order(d), product(d);

Properti pertama mempertimbangkan kuantitas untuk pesanan dan produk ini dalam dokumen ini. Yang kedua menemukan baris terakhir (pengguna dapat memasukkan beberapa baris dengan satu produk).
Selanjutnya, kami membuat tindakan yang akan memproses pengguna memasukkan nilai di kolom yang sesuai di tab pilihan:
changeQuantity ' -' (Order o, Product p) {
INPUT q = NUMERIC [ 14 , 3 ] DO { //
IF lastOrderDetail(o, p) THEN { // ,
IF q THEN //
quantity(OrderDetail d) <- q IF d = lastOrderDetail(o, p)
WHERE order(d) = o AND product(d) = p; //
ELSE // -
DELETE OrderDetail d WHERE order(d) = o AND product(d) == p;
} ELSE
IF q THEN
NEW d = OrderDetail { //
order(d) <- o;
product(d) <- p;
quantity(d) <- q;
}
}
}

Terakhir, kami menambahkan kolom ke formulir, menunjukkan tindakan yang harus dilakukan ketika pengguna mencoba mengubah nilainya:
EXTEND FORM order
PROPERTIES (o, p) quantity ON CHANGE changeQuantity(o, p)
;

Tinggal menggambar formulir dengan daftar pesanan dan menambahkannya ke navigator:
FORM orders ''
OBJECTS o = Order
PROPERTIES (o) READONLY date, number
PROPERTIES (o) NEWSESSION NEW , EDIT , DELETE
;

NAVIGATOR {
NEW orders;
}

Bentuk yang dihasilkan akan terlihat seperti ini:

gambar

Setiap perubahan yang dilakukan pada salah satu tab akan secara otomatis tercermin ke yang lain.

Dalam sistem ERP nyata, secara signifikan lebih banyak kolom dan elemen lainnya ditambahkan ke formulir. Misalnya, dalam salah satu implementasi ini , terlihat seperti ini:

gambar


Mari kita lihat bagaimana fungsi ini diimplementasikan dalam aplikasi bisnis lainnya.

1C


Dalam konfigurasi 1C yang berbeda, logika pemilihan memiliki perbedaan tertentu, tetapi prinsipnya kurang lebih sama. Ada tombol Pilih pada formulir pengeditan dokumen, yang memunculkan dialog dengan pilihan barang:

gambar

Dalam dialog ini, Anda dapat memilih barang sebagai berikut:

gambar

Setidaknya ada dua ketidaknyamanan dalam mekanisme ini.

Pertama, untuk menambahkan jumlah produk ke dokumen (dan paling sering pengguna sudah tahu jumlah yang ingin ditambahkan), Anda harus mengklik dua kali pada produk, menambahkannya ke garis, dan kemudian mengubah kuantitas dalam garis. Selain itu, pengguna tidak melihat dalam daftar produk apakah produk ini telah ditambahkan dan dengan jumlah berapa. Selain itu, skema seperti itu "memakan" ruang tambahan, karena Anda harus menampilkan dua tabel pada satu layar, bukan satu.

Kedua, setelah baris ditambahkan langsung ke dokumen, jika Anda mengklik tombol Pilih lagi, pemilihan akan dimulai "dari awal". Tidak akan muncul baris di tabel paling bawah, dan pada saat pemilihan ulang tidak akan jelas apa yang sudah ada dalam dokumen dan apa yang tidak. Itu juga melanggar salah satu aturan penting ketika membangun antarmuka: jika pengguna salah, maka dia perlu diberi kesempatan untuk kembali dan memperbaiki kesalahan. Di sini ternyata dia tidak akan dapat kembali ke pemilihan barang yang memiliki data yang sama seperti sebelum menekan tombol tambah ke dokumen.

Namun, dimungkinkan dalam 1C Anda dapat mengimplementasikan skema di atas, tetapi untuk beberapa alasan, dalam konfigurasi khas yang tersedia di situs dengan demo, yang lain digunakan.

Microsoft Dynamics 365


Sebagai solusi, saya mengambil Retail (hanya di dalamnya saya menemukan fungsionalitas serupa dari tersedia di https://trials.dynamics.com ). Di dalamnya, Anda dapat memanggil pilihan pada formulir pesanan Pembelian dengan dua cara:

gambar

Tombol pertama diimplementasikan sesuai dengan skema 1C (meskipun ada lebih sedikit kolom), jadi saya tidak akan memikirkannya.

Tombol kedua menampilkan dialog dengan daftar produk yang jumlahnya sudah dapat dimasukkan ke dalam kolom. Tetapi ini dilakukan dengan cara yang sangat aneh.

Pertama, secara default, hanya kode produk yang ditampilkan di sana (bahkan tanpa nama). Tentu saja, saya mengerti bahwa Anda dapat membuat ekstensi dan menyertakan kolom lain di sana, tetapi melihat perilaku ini dalam versi dasar agak aneh.

Kedua, Microsoft rupanya begitu terbawa oleh desain sehingga untuk beberapa alasan mereka memberi skor pada pemrosesan normal data gulir, trik pemrosesan dan acara. Itu terlihat seperti ini:

gambar

Selama operasi keyboard normal, seri saat ini secara konstan beralih ketika membaca kembali data. Pada saat yang sama, Anda dapat mulai masuk hanya setelah menunggu semua pemrosesan acara, jika tidak kuantitasnya tidak dimasukkan sama sekali, atau dimasukkan dalam seri yang salah. Bagaimana pengguna nyata bekerja dengan ini tetap menjadi misteri bagi saya. Tampaknya, beberapa orang menggunakan fungsi ini secara khusus. Baik, atau itu adalah keterbatasan demo, tetapi dalam operasi semuanya bekerja dengan baik.

Kesimpulan


Skema input dokumen yang dijelaskan melalui tab pilihan terpisah sangat dihargai oleh pengguna kami.

Dalam praktiknya, konsep ini bisa rumit dengan berbagai cara. Misalnya, alih-alih daftar produk, tampilkan daftar artikel dengan kemampuan untuk memasukkan jumlah yang berbeda untuk karakteristik individu. Atau dalam salah satu dokumen ada gudang di baris, dan diharuskan untuk mengatur jumlah untuk masing-masing gudang ini di kolom.

Skema semacam itu dapat diimplementasikan, misalnya, dalam Bereaksi yang sama, menggunakan baris dokumen saat ini sebagai keadaan dan menampilkannya dengan dua komponen dalam dua tab yang berbeda. Tetapi harus diingat bahwa ada banyak entri dalam tabel dengan barang, dan Anda harus menerapkan apa yang disebut "gulir tak terbatas". Selain itu, disarankan untuk menambahkan kepada pengguna kemampuan untuk mengurutkan dan memfilter produk dalam daftar ini (dan ini harus dilakukan di server, dan bukan pada klien, agar tidak menyeret data tambahan di sana). Semua ini menjadi tugas yang agak sepele untuk pengembang.

Di platform lsFusion, fungsi ini diterapkan di luar kotak dan hanya membutuhkan kode yang dijelaskan di atas. Anda dapat mencoba cara kerjanya, dan jika mau, Anda dapat memodifikasi kode online di halaman yang sesuai. Berikut ini seluruh kode sumber, yang dapat dimasukkan pada tab Platform dan kemudian dengan mengklik Play:

Kode sumber
CLASS Product '' ;
name '' = DATA STRING [ 50 ] (Product);

FORM product ''
OBJECTS p = Product PANEL
PROPERTIES (p) name

EDIT Product OBJECT p //
;

FORM products ''
OBJECTS p = Product
PROPERTIES (p) READONLY name
PROPERTIES (p) NEWSESSION NEW , EDIT , DELETE

LIST Product OBJECT p // ,
;

NAVIGATOR {
NEW products;
}

CLASS Supplier '' ;
name '' = DATA STRING [ 50 ] (Supplier);

in '' = DATA BOOLEAN (Supplier, Product); // TRUE,

FORM supplier ''
OBJECTS s = Supplier PANEL
PROPERTIES (s) name

OBJECTS p = Product //
PROPERTIES in(s, p), name(p) READONLY //

EDIT Supplier OBJECT s
;

FORM suppliers ''
OBJECTS s = Supplier
PROPERTIES (s) READONLY name
PROPERTIES (s) NEWSESSION NEW , EDIT , DELETE

LIST Supplier OBJECT s
;

NAVIGATOR {
NEW suppliers;
}

CLASS Order '' ;
date '' = DATA DATE (Order);
number '' = DATA INTEGER (Order);

supplier '' = DATA Supplier (Order);
nameSupplier '' (Order o) = name(supplier(o));

CLASS OrderDetail ' ' ;
order '' = DATA Order (OrderDetail) NONULL DELETE ;

product '' = DATA Product (OrderDetail);
nameProduct '' (OrderDetail d) = name(product(d));

quantity '-' = DATA NUMERIC [ 14 , 3 ] (OrderDetail);

FORM order ''
OBJECTS o = Order PANEL
PROPERTIES (o) date, number, nameSupplier

OBJECTS d = OrderDetail
PROPERTIES (d) nameProduct, quantity, NEW , DELETE
FILTERS order(d) = o

EDIT Order OBJECT o
;

EXTEND FORM order
OBJECTS p = Product
PROPERTIES name(p) READONLY
FILTERS in(supplier(o), p) //
;

DESIGN order {
OBJECTS {
NEW pane { //
fill = 1 ; //
type = TABBED ; // ,
MOVE BOX (d); //
MOVE BOX (p) { //
caption = '' ;
}
}
}
}

quantity '-' (Order o, Product p) =
GROUP SUM quantity(OrderDetail d) BY order(d), product(d);
lastOrderDetail ' ' (Order o, Product p) =
GROUP LAST OrderDetail d ORDER d BY order(d), product(d);

changeQuantity ' -' (Order o, Product p) {
INPUT q = NUMERIC [ 14 , 3 ] DO { //
IF lastOrderDetail(o, p) THEN { // ,
IF q THEN //
quantity(OrderDetail d) <- q IF d = lastOrderDetail(o, p)
WHERE order(d) = o AND product(d) = p; //
ELSE // -
DELETE OrderDetail d WHERE order(d) = o AND product(d) == p;
} ELSE
IF q THEN
NEW d = OrderDetail { //
order(d) <- o;
product(d) <- p;
quantity(d) <- q;
}
}
}

EXTEND FORM order
PROPERTIES (o, p) quantity ON CHANGE changeQuantity(o, p)
;

FORM orders ''
OBJECTS o = Order
PROPERTIES (o) READONLY date, number
PROPERTIES (o) NEWSESSION NEW , EDIT , DELETE
;

NAVIGATOR {
NEW orders;
}

Source: https://habr.com/ru/post/id464487/

More articles:


All Articles