Xây dựng kho lưu trữ Node.js và ứng dụng thanh toán hóa đơn: Hướng dẫn

Khi điều hành một doanh nghiệp ngày nay, điều quan trọng là phải có quyền truy cập vào đơn đặt hàng, khoảng không quảng cáo và dữ liệu tài chính của bạn, bất kể vị trí. Đó là lý do tại sao điều cần thiết là phải có các báo cáo trên màn hình linh hoạt và tương tác, cũng như có thể thích ứng với nhiều độ phân giải màn hình khác nhau.

Làm như vậy cho phép bạn luôn cập nhật hiệu suất kinh doanh của mình và đưa ra quyết định sáng suốt bất cứ khi nào và bất cứ nơi nào bạn cần.

ActiveReportsJS cho phép bạn xây dựng các ứng dụng web đáp ứng với khả năng báo cáo tương tác cao hoạt động trong mọi trình duyệt và hỗ trợ máy tính để bàn cũng như thiết bị di động.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách xây dựng hệ thống quản lý khoảng không quảng cáo Node.js đáp ứng, cho phép người dùng theo dõi báo cáo đơn hàng bằng ActiveReportsJS. Chúng tôi sẽ đề cập đến các chủ đề sau:

• Thiết kế tiêu đề báo cáo

• Xác định quyền truy cập dữ liệu trong Node.js

• Sử dụng các trường được tính toán

• Thêm điều khiển biểu đồ

• Thêm điều khiển bảng

• Xác định bảng phụ

• Thêm chức năng Drill-Down

• Thêm cột sắp xếp vào bảng

• Tạo ứng dụng hóa đơn Node.js

  
  

Nếu bạn muốn theo dõi báo cáo và ứng dụng đã hoàn thành, bạn có thể tìm thấy kho lưu trữ tại đây .

Xây dựng báo cáo bán hàng dựa trên web

Đối với kịch bản của chúng tôi, chúng tôi có một khách hàng tên là ACME Inc. đã ký hợp đồng với chúng tôi để xây dựng báo cáo bán hàng cho họ. Yêu cầu đi kèm với một bản mô phỏng của báo cáo, có dạng như sau:

Để tạo báo cáo cấp doanh nghiệp như báo cáo ở trên, GrapeCity cung cấp Trình thiết kế ActiveReportsJS. Công cụ trực quan này giúp bạn định cấu hình báo cáo của mình để tìm nạp dữ liệu và hiển thị báo cáo bằng cách sử dụng các phần tử trực quan như bảng, biểu đồ thanh, biểu đồ hình tròn, v.v.

ActiveReportsJS Designer lưu trữ các định nghĩa báo cáo ở định dạng JSON đặc biệt và lưu chúng trong các tệp có phần mở rộng .rdlx-json .

Thiết kế tiêu đề báo cáo

Để tạo báo cáo mới, trong Trình thiết kế, hãy mở menu Tệp trên thanh công cụ Trình thiết kế và chọn tùy chọn báo cáo Bố cục Trang Liên tục :

Bây giờ chúng tôi có một báo cáo mới, nhấp vào nút bánh hamburger ở bên trái sẽ mở rộng bảng điều khiển. Từ đây, bạn có thể kéo và thả các điều khiển vào canvas báo cáo của mình để đưa chúng vào báo cáo:

Đối với báo cáo của chúng tôi, chúng tôi sẽ có một vùng chứa ở trên cùng chứa hình ảnh biểu trưng và nhãn. Kéo và thả điều khiển vùng chứa từ bảng điều khiển vào khung báo cáo; sau đó kéo và thả điều khiển hình ảnh và hộp văn bản vào điều khiển vùng chứa trên canvas báo cáo.

Để liên kết hình ảnh với điều khiển hình ảnh, bạn có thể kéo hình ảnh từ nguồn bên ngoài, chẳng hạn như URL hoặc cơ sở dữ liệu hoặc nhúng hình ảnh từ tệp cục bộ. Hình ảnh của chúng tôi sẽ là logo của ACME Inc.

Đối với hộp văn bản, bạn có thể tùy chỉnh phông chữ, kích thước và màu sắc khi bạn thấy phù hợp. Đối với văn bản tiêu đề, chúng tôi sẽ đặt phần này thành Đơn đặt hàng hàng tháng .

Khi hoàn thành, tiêu đề của bạn sẽ giống như thế này:

Xác định quyền truy cập dữ liệu trong Node.js

ActiveReportsJS Designer quản lý các kết nối dữ liệu thông qua hai loại thực thể: nguồn dữ liệu và tập dữ liệu.

Nguồn dữ liệu hoạt động như một kết nối với bộ lưu trữ dữ liệu bên ngoài, chẳng hạn như tệp URI hoặc JSON hoặc tài liệu JSON có thể được nhúng trong báo cáo.

Tập dữ liệu là một thành phần trung gian lấy dữ liệu từ nguồn dữ liệu và liên kết dữ liệu đó với các trường trong mô hình dữ liệu báo cáo. Bạn cũng có thể xác định các trường được tính toán để biến đổi dữ liệu nguồn bằng các biểu thức. Sau đó, các trường tập dữ liệu có thể được sử dụng bởi các điều khiển báo cáo.

Phần mềm hóa đơn hàng tồn kho của chúng tôi sẽ truy cập dữ liệu thông qua một API bên ngoài đặt tại một dịch vụ HTTP, trả về kết quả ở định dạng JSON. Báo cáo sẽ hiển thị nhiều thông tin đặt hàng dựa trên dữ liệu “trực tiếp” từ dịch vụ đó.

Để xác định quyền truy cập vào dữ liệu khách hàng trong báo cáo của bạn, hãy bắt đầu bằng cách chọn tab Nguồn dữ liệu và nhấp vào nút Thêm trong phần “Nguồn dữ liệu”:

Thao tác này sẽ hiển thị cửa sổ Nguồn dữ liệu mới :

Cửa sổ này đặt tên cho nguồn dữ liệu, đặt nhà cung cấp dữ liệu và thêm bất kỳ tham số hoặc tiêu đề HTTP bổ sung nào được yêu cầu.

Khi thêm nhà cung cấp dữ liệu của mình, bạn có thể chọn giữa JSON từ xa hoặc nhúng JSON của mình vào báo cáo qua tệp cục bộ. Chúng tôi sẽ tải dữ liệu của mình cho ứng dụng hóa đơn hàng tồn kho này từ một nguồn từ xa. Khi mọi thứ được thêm vào, hãy nhấp vào nút Lưu để lưu nguồn dữ liệu của bạn.

Lưu ý: Nguồn dữ liệu là một cấu hình kết nối đơn giản; chưa có yêu cầu nào được đưa ra.

Bây giờ chúng ta đã tạo một nguồn dữ liệu, chúng ta cần tạo một tập dữ liệu sử dụng nguồn đó để truy xuất dữ liệu. Để tạo tập dữ liệu, hãy nhấp vào nút Dấu cộng xuất hiện bên cạnh nguồn dữ liệu của chúng tôi:

Thao tác này sẽ hiển thị cửa sổ Tập dữ liệu mới :

Chúng ta thường cần đặt hai thuộc tính ở đây: Uri/path và JSON Path . Đường dẫn/Uri cho ActiveReportsJS biết nơi tìm tệp JSON sau khi đến điểm cuối API và Đường dẫn Json được sử dụng để báo cho ứng dụng hóa đơn Node.js của chúng tôi biết phần nào của JSON mà chúng tôi muốn lấy.

Đối với Uri/path, chúng tôi sẽ sử dụng /Customers để trả về dữ liệu về khách hàng của chúng tôi. Trong trường hợp của chúng tôi, chúng tôi muốn lấy tất cả các mục nhập, vì vậy chúng tôi sẽ chuyển $.* làm đường dẫn JSON.

Cuối cùng, chúng ta cần xác thực nguồn dữ liệu để ActiveReportsJS có thể xác nhận rằng nó có thể truy xuất dữ liệu. Bạn sẽ biết rằng nguồn dữ liệu của mình đã được xác thực nếu bạn thấy rằng mảng Trường cơ sở dữ liệu được điền các giá trị:

Chúng tôi sẽ cần một nguồn dữ liệu khác cho ứng dụng của mình, chúng tôi sẽ sử dụng nguồn dữ liệu này để truy xuất dữ liệu về các đơn đặt hàng được đặt thông qua ứng dụng hóa đơn node.js. Nguồn dữ liệu thứ hai của bạn sẽ giống như sau:

Chúng tôi sẽ cần thêm hai bộ dữ liệu: một bộ dựa trên nguồn dữ liệu NWAPI, sử dụng /Sản phẩm làm Uri/đường dẫn và bộ kia dựa trên nguồn NWOData, sử dụng /Orders làm Uri/đường dẫn. Đối với tập dữ liệu Đơn hàng , cũng đặt đường dẫn Json thành $.value[*] .

Khi thiết lập, bảng dữ liệu sẽ trông giống như sau:

Sử dụng các trường được tính toán

Đôi khi, bạn sẽ cần chuyển đổi một hoặc nhiều trường nguồn thành trường được tính toán mới để sử dụng trong báo cáo. ActiveReportsJS cung cấp một ngôn ngữ biểu thức với các chức năng tích hợp phong phú để đáp ứng nhu cầu này.

Trong ví dụ này, hãy chuyển đổi trường OrderDate thành định dạng “tháng/năm”. Bạn phải thêm một trường tùy chỉnh vào danh sách các trường cơ sở dữ liệu được liên kết tự động để đạt được điều này.

Chỉnh sửa tập dữ liệu Đơn hàng và mở rộng phần Trường được Tính toán ; đây là nơi chúng tôi có thể thêm trường được tính toán mới của mình. Đặt tên cho trường là MonthYear và đặt giá trị là {DateTime.Parse(OrderDate).ToString("MM/yyyy")} :

Tạo tập dữ liệu mới có tên OrderDetails dựa trên nguồn NWOData; đặt Uri/path thành /OrderDetails và đường dẫn Json thành $.value[*] .

Lưu ý rằng tập dữ liệu OrderDetails không bao gồm trường cho tổng giá trị mỗi mặt hàng. Giá trị này có thể được yêu cầu nhiều lần trong báo cáo của bạn. Do đó, bạn sẽ phải tính toán giá trị này mỗi khi cần hoặc tạo một trường được tính toán mới. Tùy chọn thứ hai là cách hiệu quả hơn.

Mở rộng phần Trường được tính toán của tập dữ liệu OrderDetails, đặt tên cho trường là Tổng phụ và đặt giá trị là {Round(100 * (UnitPrice - UnitPrice * Chiết khấu) * Số lượng) / 100} .

Thêm điều khiển biểu đồ

Bây giờ chúng tôi đã thiết lập một số nguồn dữ liệu, đã đến lúc kết hợp chúng vào báo cáo; để làm như vậy, chúng tôi sẽ thêm một biểu đồ. Kéo và thả điều khiển biểu đồ từ bảng điều khiển vào báo cáo sẽ hiển thị trình hướng dẫn biểu đồ:

Đảm bảo tập dữ liệu được đặt để sử dụng tập OrderDetails của chúng tôi và nhấp vào nút Tiếp theo .

Bây giờ chúng ta có thể đặt các trường dữ liệu và danh mục của mình. Đối với “Giá trị dữ liệu”, hãy thêm một trường mới. Đặt tên thành {Subtotal} và tổng thành Sum . Sau đó, đối với “Danh mục dữ liệu”, hãy đặt trường thành {Lookup(OrderId, OrderId, MonthYear, “Orders”)} . Nó sẽ giống như vậy:

Nhấp vào Tiếp theo, sau đó nhấp vào Kết thúc . Điều cuối cùng cần làm, trước khi chúng ta xem biểu đồ, là thực hiện một số thay đổi cuối cùng đối với các thuộc tính trên các thành phần khác nhau của biểu đồ.

Để sửa đổi các thành phần của biểu đồ, bạn chỉ cần đảm bảo rằng mình đang xem cửa sổ thuộc tính thay vì cửa sổ dữ liệu, rồi bấm vào một thành phần của biểu đồ.

Cửa sổ thuộc tính sẽ cập nhật để hiển thị tất cả các thuộc tính của phần tử hiện được chọn. Xác định các thuộc tính biểu đồ như sau:

Khi hoàn thành, báo cáo của bạn sẽ trông giống như sau:

Nhấp vào Xem trước sẽ hiển thị cho chúng tôi báo cáo với dữ liệu được tải:

Thêm điều khiển bảng

Ngoài biểu đồ, chúng tôi muốn cho phép người dùng xem thêm dữ liệu trong ứng dụng hóa đơn Node.js của chúng tôi. Hãy tạo một chế độ xem dạng bảng về khối lượng đặt hàng theo từng tháng. Kéo và thả điều khiển bảng từ bảng điều khiển vào báo cáo bên dưới biểu đồ:

Theo mặc định, bảng ActiveReportsJS được tạo với ba cột và ba hàng. Hàng trên cùng đóng vai trò là hàng tiêu đề, hàng ở giữa là hàng chi tiết và chứa dữ liệu của chúng tôi và hàng dưới cùng là hàng chân trang.

Tác giả báo cáo có thể thay đổi kích thước bảng, thêm hoặc xóa hàng và cột, xác định nhiều đầu trang và chân trang, v.v.

Bây giờ, chọn bảng, điều hướng đến bảng thuộc tính và xác định các thuộc tính như sau:

Sau đó xóa các hàng đầu trang và chân trang của bảng vì chúng không cần thiết. Điều này được thực hiện bằng cách nhấp chuột phải vào một ô trong hàng mà bạn muốn xóa, chọn tùy chọn Row và nhấp vào Delete Row :

Bây giờ, hợp nhất các ô cho hàng chi tiết. Điều này được thực hiện bằng cách chọn các ô mà bạn muốn hợp nhất, nhấp chuột phải vào một trong các ô đã chọn, chọn tùy chọn Ô từ trình đơn và nhấp vào Hợp nhất các ô :

Bây giờ, chọn ô mới được hợp nhất, đặt tên hộp văn bản của nó thành txtMonth và đặt giá trị của nó thành {MonthName(Month(OrderDate))}/{Year(OrderDate)} :

Cuối cùng, bạn phải xác định nhóm bảng. Điều này có thể được thực hiện bằng cách chọn ô và chọn <Nhóm chi tiết> từ menu bật lên.

Đặt cấp độ đầu tiên của nhóm với công thức {Year(OrderDate)} và cấp độ thứ hai là {Month(OrderDate)} :

Bảng mới hiển thị mức dữ liệu đầu tiên trong phần dạng bảng:

Bây giờ, chúng tôi sẽ bắt đầu thêm nhiều cấp độ dữ liệu hơn. Tạo một hàng mới bên dưới hàng hiện tại của chúng tôi, xóa các hàng đầu trang và chân trang, hợp nhất hàng chi tiết, sau đó kéo và thả một điều khiển bảng khác vào ô lớn mới.

Xác định các thuộc tính của bảng mới như sau:

Bây giờ, hãy chọn ô mới được hợp nhất, đặt tên hộp văn bản của nó thành txtOrderId và đặt giá trị của nó thành ID Đơn hàng: {OrderId} . Khi điều này được thiết lập, hãy xem trước báo cáo để xem kết quả:

Lưu ý rằng bảng tableOrders nằm ở cấp độ thứ hai trong báo cáo của bạn; nó nêu chi tiết các đơn đặt hàng được đặt trong một tháng cụ thể.

Xác định bảng phụ

Bây giờ chúng tôi đang hiển thị các đơn đặt hàng theo tháng, đã đến lúc thêm phần chi tiết đơn đặt hàng cho mỗi đơn đặt hàng thông qua ứng dụng hóa đơn hàng tồn kho của chúng tôi.

Thêm một hàng chi tiết mới bên dưới hàng chi tiết OrderId , hợp nhất các ô và đặt một bảng khác trong hàng chi tiết đó. Lần này, thay vì xóa hàng đầu trang và chân trang, hãy xóa hàng chi tiết và chân trang, để lại hàng đầu trang.

Tiếp theo, thay vì hợp nhất cả ba ô thành một, hãy hợp nhất ô ở giữa và bên phải thành một và để ô bên trái là ô của chính nó.

Xác định công thức ô bên trái là Tổng: Đối với ô được hợp nhất, hãy sử dụng bảng thuộc tính để đặt Căn chỉnh Ô thành Trái và thuộc tính định dạng của nó thành Tiền tệ và đặt công thức ô được hợp nhất là {SUM(Subtotal)} :

Chọn bảng tableOrderTotal trong Explorer và mở rộng thuộc tính Bộ lọc . Nhấp vào Thêm mục và thêm tiêu chí lọc mới với các trường sau:

Như bạn có thể thấy, bảng tableOrderTotals mới dựa trên tập dữ liệu OrderDetails. Tổng giá trị có được bằng cách lọc chi tiết đơn hàng theo OrderId của hàng Thứ tự trong bảng và bằng cách tính tổng các giá trị trường Tổng phụ.

Nhấp vào Xem trước sẽ hiển thị bảng cập nhật:

Cuối cùng, chúng tôi sẽ tạo một bảng đại diện cho các mặt hàng đặt hàng cho hóa đơn của chúng tôi.

Tạo một hàng chi tiết mới trong bảng tableOrders, sau đó tạo một bảng mới bên trong hàng chi tiết mới có tên là tableOrderDetails . Cấu hình bảng như sau:

Khi hoàn thành, bảng sẽ trông giống như sau:

Nhấp vào Xem trước sẽ hiển thị bảng mới:

Trước khi tiếp tục, chúng ta sẽ thực hiện một chút kiểu dáng để cải thiện giao diện của bảng. Đây là phiên bản hoàn thành trông như thế nào:

Thêm chức năng Drill-Down

Bây giờ, hãy thêm chức năng truy sâu vào báo cáo, cho phép chúng tôi giữ các bảng tableOrders và tableOrderDetails được thu gọn cho đến khi người dùng mở rộng chúng.

Chọn bảngOrders và thay đổi các thuộc tính Hidden và Toggle Item như sau:

Chọn bảng tableOrderDetails và làm cho nó có thể thu gọn được:

Bây giờ, chúng ta có thể mở rộng và thu gọn các mức chi tiết bằng cách nhấp vào biểu tượng +/-:

Tiếp theo, hãy thêm một số chi tiết vào báo cáo của ứng dụng hóa đơn Node.js của chúng tôi.

Thêm bốn hàng mới phía trên hàng tiêu đề hiện có trong bảngOrderDetails bảng. Trên cùng và dưới cùng của bốn hàng này sẽ đóng vai trò là bộ đệm và hai hàng ở giữa sẽ chứa dữ liệu chúng tôi muốn hiển thị.

Trong các hàng thứ hai và thứ ba đã được thêm vào, hãy để riêng ô ngoài cùng bên trái của mỗi hàng và hợp nhất các ô còn lại cho mỗi hàng. Sau đó, điền vào các hàng như sau:

Nhấp vào Xem trước và bạn có thể thấy tên và ngày đặt hàng của khách hàng được thêm vào hóa đơn:

Thêm cột sắp xếp vào bảng

Điều cuối cùng chúng tôi sẽ thêm vào báo cáo là khả năng sắp xếp các cột chi tiết đơn đặt hàng.

Chọn từng ô tiêu đề và điền vào trường Biểu thức sắp xếp trong phần Sắp xếp người dùng với các công thức sau:

Nhấp vào Xem trước và bây giờ bạn có thể thấy các biểu tượng sắp xếp bên cạnh tiêu đề cột; sắp xếp các mục đặt hàng theo Số lượng:

Sắp xếp thứ tự theo Tổng giá:

Tạo ứng dụng hóa đơn Node.JS

Bây giờ với báo cáo được xác định, chúng tôi có thể tạo ứng dụng hóa đơn hàng tồn kho của mình. Ứng dụng này sẽ cần một màn hình web phản hồi trông đẹp mắt trên cả máy tính để bàn và thiết bị di động. ActiveReportsJS cung cấp khả năng này theo mặc định.

Ứng dụng mẫu sẽ sử dụng Node.js, môi trường thời gian chạy JavaScript, để thực thi ứng dụng web ở phía máy chủ.

Để bắt đầu, hãy tạo một thư mục mới có tên là InventoryInvoice và mở thư mục đó trong IDE ưa thích của bạn. Sau đó, trong dòng lệnh, hãy chạy:

 npm init

Thao tác này sẽ giúp bạn thiết lập tệp pack.json , tệp này sẽ được sử dụng để xây dựng ứng dụng của bạn. Khi tệp của bạn đã được tạo, hãy chạy hai lệnh sau:

 npm install express npm install @grapecity/activereports

Thao tác này sẽ cài đặt Express, một khung cho Node.js và ActiveReports mà chúng tôi sẽ sử dụng để hiển thị hóa đơn.

Bây giờ chúng tôi đã cài đặt Express, chúng tôi cần đưa nó vào sử dụng. Tạo một tệp mới trong thư mục InventoryInvoice có tên index.js . Tệp này sẽ sử dụng Express để phục vụ ứng dụng hóa đơn hàng tồn kho Node.js của chúng tôi.

Bên trong tệp index.js, thêm đoạn mã sau:

 const express = require('express'); //import Express.js module const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname))); app.listen(3000, () => { console.log(`Example app listening on port 3000`) })

Bây giờ, đã đến lúc giải thích nhanh về những gì chúng ta đang làm ở đây:

• Hai dòng mã đầu tiên bao gồm Express trong máy chủ của chúng tôi và cung cấp cho chúng tôi một biến để sử dụng để tham chiếu các phương thức và thuộc tính của Express.

• Dòng thứ ba tạo một biến dẫn đến đường dẫn tương đối của thư mục và dòng thứ tư cho Express biết rằng chúng tôi muốn sử dụng đường dẫn này làm đường dẫn tĩnh cho ứng dụng của mình.

• Các dòng từ sáu đến tám sử dụng Express để khởi động ứng dụng; ở đây, chúng tôi yêu cầu nó chạy trên cổng 3000 và khi nó bắt đầu chạy, chúng tôi ghi một thông báo vào thiết bị đầu cuối.

Và đó là Express ở mức rất cơ bản! Bây giờ chúng tôi có một máy chủ mà chúng tôi có thể bắt đầu khởi chạy phần mềm hóa đơn hàng tồn kho, đã đến lúc tạo một trang để phục vụ người dùng.

Tạo một tệp mới trong thư mục InventoryInvoice và đặt tên là index.html . Sau khi tạo, hãy chèn đoạn mã sau:

 <html> <head> <meta charset="utf-8" /> <title>ActiveReportsJS Viewer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-ui.css" /> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" /> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script> <style> #arjs-viewer { width: 100%; height: 100vh; } </style> </head> <body onload="load()"> <div id="arjs-viewer"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#arjs-viewer'); viewer.open('MonthlyOrders.rdlx-json'); } </script> </body> </html>

Có một vài điều để đi qua đây. Đầu tiên, chúng tôi bao gồm bốn tệp trong tệp HTML của mình; ar-js-ui.css , ar-js-viewer.css , ar-js-core.js và ar-js-viewer.js . Các tệp CSS là tệp CSS cốt lõi cho ActiveReportsJS và tệp CSS được sử dụng để tạo kiểu cho trình xem.

Các tệp JS đều giống nhau; một tệp JS lõi và một tệp JS cho trình xem.

Thứ hai, đối với HTML, chúng ta chỉ sử dụng một dòng duy nhất để tạo ActiveReportsJS Viewer. Tất cả những gì chúng ta cần là một div có ID mà chúng ta có thể sử dụng để liên kết người xem với div.

Thứ ba, trong JavaScript, sau khi tải trang, chúng ta sẽ tạo một điều khiển ActiveReports.Viewer mới, liên kết điều khiển đó với div của chúng ta và sau đó yêu cầu điều khiển đó mở báo cáo của chúng ta.

Cuối cùng, chúng tôi đưa vào một lượng nhỏ CSS để trình xem chiếm toàn bộ màn hình.

Khi điều này được thực hiện, tất cả những gì bạn cần làm là di chuyển báo cáo của mình vào thư mục InventoryInvoice và chạy lệnh sau để bắt đầu ứng dụng hóa đơn hàng tồn kho Node.js của bạn:

 node index.js

Điều hướng đến localhost:3000, bạn sẽ thấy và có thể tương tác với báo cáo mà bạn đã tạo:

Thành phần Trình xem ActiveReportsJS cũng phản hồi nhanh; nó được hiển thị phù hợp trên nhiều thiết bị khác nhau với nhiều kích cỡ màn hình. Bạn có thể sử dụng các công cụ dành cho nhà phát triển có sẵn trong trình duyệt web của mình để mô phỏng nhanh các thiết bị di động, kích thước màn hình và hướng trang khác nhau:

Ghi chú cuối cùng

Và với điều đó, chúng ta đã hoàn thành! Bài viết này cung cấp cách tiếp cận thực tế để tạo báo cáo hóa đơn hàng tồn kho hàng tháng bằng Trình thiết kế ActiveReportsJS của GrapeCity.

Chúng tôi đã giới thiệu cách tổng hợp thông tin để tạo biểu đồ bán hàng được nhóm theo tháng, cũng như báo cáo dạng bảng, tương tác với chức năng đi sâu tổng hợp doanh số bán hàng theo tháng và ID đơn đặt hàng.

Nếu bạn muốn xem ứng dụng và báo cáo đã hoàn thành, bạn có thể tìm thấy nó ở đây . Chúc mừng mã hóa!