Tạo biểu mẫu tóm tắt trong ứng dụng canvas

Bài viết
03/14/2023

Làm theo các hướng dẫn từng bước để tạo một biểu mẫu tóm tắt trong ứng dụng canvas để quản lý dữ liệu giả tưởng trong cơ sở dữ liệu của Northwind Traders. Chủ đề này là một phần của loạt bài giải thích cách xây dựng ứng dụng kinh doanh trên dữ liệu quan hệ trong Microsoft Dataverse. Để có kết quả tốt nhất, hãy khám phá các chủ đề trong chuỗi này:

Tạo một thư viện đơn hàng.
Tạo một mẫu tóm tắt (chủ đề này).
Tạo một thư viện chi tiết.

Định nghĩa vùng màn hình.

Điều kiện tiên quyết

Cài đặt cơ sở dữ liệu và ứng dụng Northwind Traders.
Xem lại tổng quan về ứng dụng canvas cho Northwind Traders.
Tạo thư viện đơn hàng hoặc mở ứng dụng Northwind Orders (Canvas) - Begin Part 2 đã chứa thư viện đó.

Thêm thanh tiêu đề

Trên đầu ứng dụng, tạo một thanh tiêu đề, sẽ giữ các nút hành động vào cuối chủ đề này.

Trong ngăn Dạng xem cây, chọn Screen1 để đảm bảo rằng bạn không vô tình thêm một điều khiển vào thư viện đơn hàng:
Trên tab Chèn, chọn Nhãn để chèn một điều khiển Nhãn:

Nhãn mới chỉ xuất hiện một lần, phía trên thư viện. Nếu nó xuất hiện trong mỗi mục của thư viện, hãy xóa phiên bản đầu tiên của nhãn, đảm bảo rằng màn hình được chọn (như bước trước mô tả), sau đó chèn lại nhãn.
Di chuyển và thay đổi kích thước nhãn mới để trải dài trên cùng của màn hình:
Nhấp đúp vào văn bản của nhãn mới, sau đó nhập Đơn hàng Northwind.

Hoặc sửa đổi thuộc tính Văn bản trong thanh công thức để đạt được kết quả tương tự:
Trên tab Trang chủ, định dạng nhãn:
- Tăng kích cỡ phông chữ thành 24 điểm.
- In đậm văn bản.
- Chọn màu trắng cho văn bản.
- Chỉnh văn bản vào giữa.
- Phủ màu xanh đậm vào nền.

Thêm một điều khiển Chỉnh sửa biểu mẫu

Trong phần này, bạn sẽ thêm các điều khiển để hiển thị tóm tắt về bất kỳ đơn hàng nào mà người dùng chọn trong thư viện.

Trên tab Chèn, chèn một điều khiển Chỉnh sửa biểu mẫu:

Theo mặc định, biểu mẫu xuất hiện ở góc trên bên trái, nơi các điều khiển khác có thể gây khó khăn cho việc tìm kiếm:
Di chuyển và thay đổi kích thước biểu mẫu để che góc trên bên phải của màn hình dưới thanh tiêu đề:
Trong ngăn Thuộc tính, chọn danh sách thả xuống Nguồn dữ liệu.
Chọn nguồn dữ liệu Đơn hàng.

Thêm và sắp xếp các trường

Trong tab Thuộc tính gần mép phải, hãy chọn Chỉnh sửa trường để mở ngăn Trường.
Nếu ngăn Trường không trống, hãy loại bỏ các trường đã được chèn.
Sau khi danh sách trường trống, chọn Thêm trường và sau đó chọn các hộp kiểm cho Khách hàng và Nhân viên.
Cuộn xuống cho đến khi các trường này xuất hiện, và sau đó chọn hộp kiểm của chúng:
- Ghi chú
- Ngày đặt hàng
- Số đơn hàng
- Trạng thái đơn hàng
- Ngày thanh toán
Ở cuối ngăn Trường, chọn Thêm rồi đóng ngăn Trường.

Biểu mẫu hiển thị bảy trường, có thể theo thứ tự khác nhau:
Lưu ý

Nếu bất kỳ trường nào hiển thị biểu tượng lỗi màu đỏ, sự cố có thể xảy ra khi dữ liệu được lấy từ nguồn. Để khắc phục lỗi, hãy làm mới dữ liệu:
1. Trên tab Dạng xem, chọn Nguồn dữ liệu.
2. Trong ngăn Dữ liệu, chọn Nguồn dữ liệu.
3. Bên cạnh Đơn hàng, chọn dấu chấm lửng (...), chọn Làm mới rồi đóng ngăn Dữ liệu.
Nếu hộp tổ hợp cho tên khách hàng hoặc nhân viên vẫn hiển thị lỗi, hãy kiểm tra Văn bản chính và Trường tìm kiếm của mỗi hộp bằng cách chọn nó và sau đó mở ngăn Dữ liệu. Đối với hộp khách hàng, cả hai trường phải được đặt thành nwind_company. Đối với hộp nhân viên, cả hai trường phải được đặt thành nwind_lastname.
Với biểu mẫu đã chọn, thay đổi số lượng cột trong biểu mẫu từ 3 thành 12 trong tab Thuộc tính gần cạnh phải.

Bước này thêm khả năng linh hoạt khi bạn sắp xếp các trường:

Nhiều thiết kế UI dựa trên bố cục 12 cột vì chúng có thể chứa đồng đều các hàng gồm 1, 2, 3, 4, 6 và 12 điều khiển. Trong chủ đề này, bạn sẽ tạo các hàng chứa 1, 2 hoặc 4 điều khiển.
Di chuyển và thay đổi kích thước các trường bằng cách kéo thanh điều chỉnh của chúng, giống như bất kỳ điều khiển nào khác, sao cho mỗi hàng chứa các thẻ dữ liệu này theo thứ tự được chỉ định:
- Hàng đầu tiên: Số thứ tự, Tình trạng đặt hàng, Ngày đặt hàng và Ngày thanh toán
- Hàng thứ hai: khách hàng và Nhân viên
- Hàng thứ ba: Ghi chú
Lưu ý

Bạn có thể thấy dễ mở rộng thẻ dữ liệu Ghi chú, khách hàng và Nhân viên trước khi bạn sắp xếp chúng.

Thông tin thêm về cách sắp xếp các trường trong một biểu mẫu: Hiểu bố cục biểu mẫu dữ liệu cho các ứng dụng canvas.

Ẩn điều khiển thời gian

Trong ví dụ này, bạn không cần các phần thời gian của các trường ngày vì mức độ chi tiết đó có thể khiến người dùng mất tập trung. Nếu bạn xóa chúng, bạn có thể gây ra sự cố trong các công thức dựa trên các điều khiển đó để cập nhật giá trị ngày hoặc xác định vị trí của điều khiển khác trong thẻ dữ liệu. Thay vào đó, bạn sẽ ẩn các điều khiển thời gian bằng cách đặt thuộc tính Hiển thị.

Trong ngăn Dạng xem cây, chọn thẻ dữ liệu Ngày đặt hàng.

Thẻ có thể có một tên khác, nhưng nó chứa Ngày đặt hàng.
Trong khi giữ phím Shift, chọn các điều khiển giờ, phút và dấu hai chấm phân tách trong thẻ dữ liệu Ngày đặt hàng.
Đặt thuộc tính Hiển thị của điều khiển thành false.

Tất cả các điều khiển được chọn biến mất khỏi biểu mẫu:
Thay đổi kích thước điều khiển Bộ chọn ngày để hiển thị ngày hoàn thành:

Tiếp theo, bạn sẽ lặp lại một vài bước cuối cùng cho trường Ngày thanh toán.
Trong ngăn Dạng xem cây, hãy chọn điều khiển thời gian trong thẻ dữ liệu Ngày thanh toán:
Đặt thuộc tính Hiển thị của điều khiển đã chọn thành false:
Thay đổi kích thước bộ chọn ngày trong thẻ Ngày thanh toán:

Kết nối thư viện đơn hàng

Trong ngăn Dạng xem cây, thu gọn biểu mẫu để dễ dàng tìm tên của thư viện đơn hàng rồi đổi tên thành Gallery1 nếu cần.
Đặt thuộc tính Mục của biểu mẫu tóm tắt thành biểu thức sau:
```
Gallery1.Selected
```
Biểu mẫu hiển thị tóm tắt về bất kỳ đơn hàng nào mà người dùng ứng dụng chọn trong danh sách.

Thay thế thẻ dữ liệu

Số đơn hàng là một mã định danh mà Dataverse gán tự động khi bạn tạo một bản ghi. Trường này có một điều khiển Nhập văn bản theo mặc định, nhưng bạn sẽ thay thế nó bằng nhãn để người dùng không thể chỉnh sửa trường này.

Chọn biểu mẫu, chọn Chỉnh sửa các trường trong tab Thuộc tính gần cạnh phải, và sau đó chọn trường Số đơn hàng:
Mở danh sách Loại điều khiển:
Chọn thẻ dữ liệu Xem văn bản:
Đóng ngăn Trường.

Người dùng không còn có thể thay đổi số đơn hàng:
Trên tab Trang chủ, đổi kích thước phông chữ của số đơn hàng thành 20 điểm để dễ tìm trường hơn:

Dùng mối quan hệ nhiều - một

Bảng Đơn hàng có mối quan hệ nhiều-một với bảng Nhân viên: mỗi nhân viên có thể tạo nhiều đơn hàng, nhưng mỗi đơn hàng chỉ được giao cho một nhân viên. Khi người dùng chọn một nhân viên trong hộp điều khiển Hộp kết hợp , thuộc tính Đã chọn của nó cung cấp toàn bộ hồ sơ của nhân viên đó từ bảng Nhân viên . Kết quả là, bạn có thể đặt cấu hình một điều khiển Hình ảnh để hiển thị hình ảnh của bất kỳ nhân viên nào mà người dùng chọn trong hộp tổ hợp.

Chọn thẻ dữ liệu Nhân viên:
Trong tab Nâng cao gần cạnh phải, mở khóa thẻ dữ liệu để bạn có thể chỉnh sửa công thứ ở chế độ chỉ đọc:
Trong thẻ dữ liệu, giảm chiều rộng của hộp tổ hợp để nhường chỗ cho hình ảnh nhân viên:
Trên tab Chèn, hãy chọn Tệp phương tiện > Hình ảnh:

Một hình ảnh xuất hiện trong thẻ dữ liệu, mở rộng để chứa hình ảnh:
Thay đổi kích thước hình ảnh và di chuyển nó sang bên phải của hộp tổ hợp:
Đặt thuộc tính Hình ảnh của hình ảnh theo công thức này, thay thế số ở cuối DataCardValue nếu cần:
```
DataCardValue7.Selected.Picture
```
Hình ảnh của nhân viên được chọn xuất hiện.
Trong khi giữ phím Alt, chọn một nhân viên khác trong hộp tổ hợp để xác nhận rằng hình ảnh cũng thay đổi.

Thêm biểu tượng Lưu

Trong ngăn Dạng xem cây, chọn Screen1, rồi chọn Chèn > Biểu tượng > Kiểm tra:

Theo mặc định, biểu tượng Dấu kiểm xuất hiện ở góc trên bên trái, nơi các điều khiển khác có thể gây khó khăn cho việc tìm kiếm biểu tượng:
Trên tab Trang chủ, thay đổi thuộc tính Màu sắc của biểu tượng thành màu trắng, thay đổi kích thước biểu tượng và di chuyển nó gần cạnh phải của thanh tiêu đề:
Trong ngăn Dạng xem cây, xác nhận rằng tên của biểu mẫu là Hình thức 1 và sau đó đặt thuộc tính OnSelect của biểu tượng thành công thức này:
```
SubmitForm( Form1 )
```
Khi người dùng chọn biểu tượng này, hàm SubmitForm sẽ tập hợp bất kỳ giá trị thay đổi nào trong biểu mẫu và gửi chúng đến nguồn dữ liệu. Các dấu chấm trên đầu màn hình khi dữ liệu được gửi và thư viện đơn hàng phản ánh các thay đổi sau khi quá trình kết thúc.
Đặt thuộc tính DisplayMode của biểu tượng thành công thức sau:
```
If( Form1.Unsaved, DisplayMode.Edit, DisplayMode.Disabled )
```
Nếu tất cả các thay đổi trong biểu mẫu đã được lưu, biểu tượng sẽ bị tắt và xuất hiện trong DisableColor mà bạn sẽ đặt tiếp theo.
Đặt thuộc tính DisplayedColor của biểu tượng thành giá trị sau:
```
Gray
```
Người dùng có thể lưu các thay đổi vào một đơn hàng bằng cách chọn biểu tượng Kiểm tra, sau đó bị vô hiệu hóa và mờ đi cho đến khi người dùng thực hiện một thay đổi khác:

Thêm biểu tượng Hủy

Trên tab Chèn, hãy chọn Biểu tượng > Hủy:

Theo mặc định, biểu tượng này xuất hiện ở góc trên bên trái, nơi các điều khiển khác có thể gây khó khăn cho việc tìm kiếm biểu tượng:
Trên tab Trang chủ, thay đổi thuộc tính Màu sắc của biểu tượng thành màu trắng, thay đổi kích thước biểu tượng và di chuyển nó sang bên trái của biểu tượng Kiểm tra:
Đặt thuộc tính OnSelect của biểu tượng Hủy thành công thức sau:
```
ResetForm( Form1 )
```
Hàm ResetForm loại bỏ tất cả các thay đổi trong biểu mẫu, đưa nó trở về trạng thái ban đầu.
Đặt thuộc tính DisplayMode của biểu tượng Hủy thành công thức sau:
```
If( Form1.Unsaved Or Form1.Mode = FormMode.New, DisplayMode.Edit, DisplayMode.Disabled )
```
Công thức này hơi khác so với công thức cho biểu tượng Kiểm tra. Biểu tượng Hủy bị tắt nếu tất cả các thay đổi trong biểu mẫu đã được lưu hoặc biểu mẫu ở chế độ Mới mà bạn sẽ bật tiếp theo. Trong trường hợp đó, ResetForm loại bỏ bản ghi mới.
Đặt thuộc tính DisabledColor của biểu tượng Hủy thành giá trị sau:
```
Gray
```
Người dùng có thể hủy các thay đổi đối với một đơn hàng và các biểu tượng Kiểm tra và Hủy bị tắt và mờ đi nếu tất cả các thay đổi đã được lưu:

Thêm biểu tượng thêm

Trên tab Chèn, hãy chọn Biểu tượng > Thêm.

Theo mặc định, biểu tượng Thêm xuất hiện ở góc trên bên trái, nơi các điều khiển khác có thể gây khó khăn cho việc tìm kiếm biểu tượng:
Trên tab Trang chủ, đặt thuộc tính Màu sắc của biểu tượng Thêm thành màu trắng, thay đổi kích thước biểu tượng và di chuyển nó sang bên trái của biểu tượng Hủy:
Đặt thuộc tính OnSelect của biểu tượng Thêm thành công thức sau:
```
NewForm( Form1 )
```
Hàm NewForm hiển thị một bản ghi trống trong mẫu.
Đặt thuộc tính DisplayMode của biểu tượng Thêm thành công thức sau:
```
If( Form1.Unsaved Or Form1.Mode = FormMode.New, DisplayMode.Disabled, DisplayMode.Edit )
```
Công thức vô hiệu hóa biểu tượng Thêm trong các điều kiện sau:
- Người dùng thực hiện các thay đổi nhưng không lưu hoặc hủy chúng, đó là hành vi ngược với các biểu tượng Kiểm tra và Hủy.
- Người dùng chọn biểu tượng Thêm nhưng không thay đổi.
Đặt thuộc tính DisabledColor của biểu tượng Thêm thành giá trị sau:
```
Gray
```
Người dùng có thể tạo một đơn hàng nếu họ không thực hiện thay đổi hoặc họ lưu hoặc hủy bất kỳ thay đổi nào họ đã thực hiện. (Nếu người dùng chọn biểu tượng này, họ không thể chọn lại cho đến khi họ thực hiện một hoặc nhiều thay đổi và sau đó lưu hoặc hủy các thay đổi đó):

Lưu ý

Nếu bạn tạo và lưu một đơn hàng, bạn có thể cần phải cuộn xuống trong thư viện đơn hàng để hiển thị đơn hàng mới của bạn. Nó sẽ không có tổng giá vì bạn chưa thêm bất kỳ chi tiết đặt hàng nào.

Thêm biểu tượng thùng rác

Trên tab Chèn, hãy chọn Biểu tượng > Thùng rác.

Theo mặc định, biểu tượng Thùng rác xuất hiện ở góc trên bên trái, nơi các điều khiển khác có thể gây khó khăn cho việc tìm kiếm biểu tượng:
Trên tab Trang chủ, thay đổi thuộc tính Màu sắc của biểu tượng Thùng rác thành màu trắng, thay đổi kích thước biểu tượng và di chuyển nó sang bên trái của biểu tượng Thêm:
Đặt thuộc tính OnSelect của biểu tượng Thùng rác thành công thức sau:
```
Remove( Orders, Gallery1.Selected )
```
Hàm Xóa sẽ xóa bản ghi khỏi nguồn dữ liệu. Trong công thức này, hàm sẽ loại bỏ bản ghi được chọn trong thư viện đơn hàng. Biểu tượng Thùng rác xuất hiện gần biểu mẫu tóm tắt (không phải thư viện đơn hàng) vì biểu mẫu hiển thị thêm chi tiết về bản ghi, vì vậy người dùng có thể dễ dàng xác định bản ghi mà công thức sẽ xóa.
Đặt thuộc tính DisplayMode của biểu tượng Thùng rác thành công thức sau:
```
If( Form1.Mode = FormMode.New, DisplayMode.Disabled, DisplayMode.Edit )
```
Công thức này vô hiệu hóa biểu tượng Thùng rác nếu người dùng đang tạo bản ghi. Cho đến khi người dùng lưu bản ghi, hàm Xóa không có bản ghi để xóa.
Đặt thuộc tính DisabledColor của biểu tượng Thùng rác thành giá trị sau:
```
Gray
```
Người dùng có thể xóa một đơn đặt hàng.

Tóm lược

Tóm lại, bạn đã thêm một biểu mẫu trong đó người dùng có thể hiển thị và chỉnh sửa tóm tắt của từng đơn hàng và bạn đã sử dụng các yếu tố sau:

Một biểu mẫu hiển thị dữ liệu từ bảng Đơn hàng: Form1.DataSource =Orders
Một kết nối giữa biểu mẫu và thư viện đơn hàng: Form1.Item = Gallery1.Selected
Một điều khiển thay thế cho trường Số đơn hàng: Xem văn bản
Một mối quan hệ nhiều-một để hiển thị hình ảnh của nhân viên trong thẻ dữ liệu Nhân viên: DataCardValue1.Selected.Picture
Một biểu tượng để lưu các thay đổi cho một đơn đặt hàng: SubmitForm( Form1 )
Một biểu tượng để hủy các thay đổi cho một đơn đặt hàng: ResetForm( Form1 )
Một biểu tượng để tạo đơn hàng: NewForm( Form1 )
Một biểu tượng để xóa đơn hàng: Remove( Orders, Gallery1.Selected )

Bước tiếp theo

Trong chủ đề tiếp theo, bạn sẽ thêm một thư viện khác để hiển thị các sản phẩm theo từng đơn hàng và bạn sẽ thay đổi các chi tiết đó bằng cách sử dụng hàm Vá.

Tạo một thư viện chi tiết