Tạo thư viện chi tiế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 thư viện chi tiế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 biểu mẫu tóm tắt.
Tạo thư viện chi tiết (chủ đề này).

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

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

Trước khi bắt đầu chủ đề này, bạn phải cài đặt cơ sở dữ liệu như được mô tả trước đó trong chủ đề này. Sau đó, bạn phải tạo thư viện đơn hàng và biểu mẫu tóm tắt hoặc mở ứng dụng Northwind Orders (Canvas) - Begin Part 3 đã chứa thư viện và biểu mẫu đó.

Tạo một thanh tiêu đề khác

Ở đầu màn hình, chọn Nhãn hoạt động như một thanh tiêu đề, sao chép nhãn bằng cách nhấn Ctrl-C, sau đó dán nhãn bằng cách nhấn Ctrl-V:
Thay đổi kích thước và di chuyển bản sao để bản sao xuất hiện ngay dưới biểu mẫu tóm tắt.
Xóa văn bản khỏi bản sao theo một trong các cách sau:
- Nhấp đúp vào văn bản để chọn văn bản đó, sau đó nhấn Xóa.
- Đặt thuộc tính Văn bản của nhãn thành một chuỗi trống ("").

Thêm một thư viện

Chèn một Thư viện với bố cục Trống theo chiều dọc:

Thư viện mới, sẽ hiển thị chi tiết đơn hàng, xuất hiện ở góc trên bên trái.
Đóng hộp thoại nguồn dữ liệu, sau đó thay đổi kích thước và di chuyển thư viện chi tiết sang góc dưới bên phải, bên dưới thanh tiêu đề mới:
Đặt thuộc tính Mục của thư viện chi tiết thành công thức sau:
```
Gallery1.Selected.'Order Details'
```
Nếu một lỗi xuất hiện, hãy xác nhận rằng thư viện đặt hàng được đặt tên là Thư viện 1 (trong ngăn Dạng xem cây gần cạnh trái). Nếu thư viện đó có tên khác, hãy đổi tên thành Thư viện 1.

Bạn vừa liên kết hai thư viện. Khi người dùng chọn một đơn hàng trong thư viện đơn hàng, lựa chọn đó xác định một bản ghi trong bảng Đơn hàng. Nếu đơn hàng đó chứa một hoặc nhiều chi tiết đơn hàng, thì bản ghi trong bảng Đơn hàng được liên kết với một hoặc nhiều bản ghi trong bảng Chi tiết đơn hàng và dữ liệu từ các bản ghi đó xuất hiện trong thư viện chi tiết. Hành vi này phản ánh mối quan hệ một-nhiều được tạo ra cho bạn giữa hai bảng Đơn hàng và Chi tiết đơn hàng. Công thức mà bạn đã chỉ định "bỏ qua" mối quan hệ đó bằng cách sử dụng ký hiệu dấu chấm:

Hiển thị tên sản phẩm

Trong thư viện chi tiết, hãy chọn Thêm một mục từ tab Chèn để chọn mẫu của thư viện:

Đảm bảo rằng bạn đã chọn mẫu thư viện chứ không phải chọn thư viện. Hộp giới hạn phải nằm bên trong phạm vi của thư viện và có thể ngắn hơn chiều cao của thư viện. Khi bạn chèn các điều khiển vào mẫu này, chúng sẽ được lặp lại cho từng mục trong thư viện.
Trên tab Chèn, hãy chèn nhãn vào thư viện chi tiết.

Nhãn sẽ xuất hiện trong thư viện; nếu không, hãy thử lại, nhưng đảm bảo chọn mẫu của thư viện trước khi bạn chèn nhãn.
Đặt thuộc tính Văn bản của nhãn mới thành công thức sau:
```
ThisItem.Product.'Product Name'
```
Nếu không có văn bản xuất hiện, hãy chọn mũi tên cho Đơn hàng 0901 ở gần dưới cùng của thư viện đơn hàng.
Thay đổi kích thước nhãn để toàn bộ văn bản xuất hiện:

Biểu thức này đến từ một bản ghi trong bảng Chi tiết đơn hàng. Bản ghi này được giữ trong ThisItem đến bảng Sản phẩm trên đơn hàng thông qua mối quan hệ nhiều-một:

Cột Tên sản phẩm (và các cột khác mà bạn sắp sử dụng) được trích xuất:

Hiển thị hình ảnh sản phẩm

Trên tab Chèn, chèn một nút điều chỉnh Hình ảnh vào thư viện chi tiết:
Thay đổi kích thước và di chuyển hình ảnh và nhãn sao cho song song với nhau.

Mẹo

Để kiểm soát chi tiết về kích thước và vị trí của nút điều chỉnh, hãy bắt đầu thay đổi kích thước hoặc di chuyển ảnh mà không cần nhấn phím Alt, sau đó tiếp tục thay đổi kích thước hoặc di chuyển nút điều chỉnh trong khi bạn giữ phím Alt:
Đặt thuộc tính Hình ảnh của hình ảnh thành công thức sau:
```
ThisItem.Product.Picture
```
Một lần nữa, biểu thức tham chiếu một sản phẩm được liên kết với chi tiết đơn hàng này và trích xuất trường Hình ảnh để hiển thị.
Giảm chiều cao của mẫu trong thư viện để có nhiều bản ghi Chi tiết đơn hàng xuất hiện tại một thời điểm:

Hiển thị số lượng và giá thành sản phẩm

Trên tab Chèn, hãy chèn nhãn khác vào thư viện chi tiết, sau đó thay đổi kích thước và di chuyển nhãn mới sang bên phải thông tin sản phẩm.
Đặt thuộc tính Văn bản của nhãn mới thành biểu thức sau:
```
ThisItem.Quantity
```
Công thức này lấy thông tin trực tiếp từ bảng Chi tiết đơn hàng (không yêu cầu mối quan hệ).
Trên tab Trang chủ, hãy thay đổi căn chỉnh của nút điều chỉnh này thành Phải:
Trên tab Chèn, hãy chèn nhãn khác vào thư viện chi tiết, sau đó thay đổi kích thước và di chuyển nhãn sang bên phải của nhãn số lượng.
Đặt thuộc tính Văn bản của nhãn mới thành công thức sau:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Nếu bạn không bao gồm thẻ ngôn ngữ ([$-en-US]), thì thẻ sẽ được thêm cho bạn dựa trên ngôn ngữ và khu vực của bạn. Nếu sử dụng thẻ ngôn ngữ khác, thì bạn có thể xóa $ ngay sau ngoặc vuông đóng (]), và sau đó thêm ký hiệu tiền tệ của riêng bạn vào vị trí đó.
Trên tab Trang chủ, hãy thay đổi căn chỉnh của nút điều chỉnh này thành Phải:
Trên tab Chèn, hãy chèn nút điều chỉnh nhãn khác vào thư viện chi tiết, sau đó thay đổi kích thước và di chuyển nhãn mới sang bên phải phần đơn giá.
Đặt thuộc tính Văn bản của nhãn mới thành công thức sau:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Một lần nữa, nếu bạn không bao gồm thẻ ngôn ngữ ([$-en-US]), thì thẻ sẽ được thêm cho bạn dựa trên ngôn ngữ và khu vực của bạn. Nếu thẻ khác, bạn có thể sử dụng ký hiệu tiền tệ của riêng mình thay vì $ ngay sau ngoặc vuông đóng (]).
Trên tab Trang chủ, hãy thay đổi căn chỉnh của nút điều chỉnh này thành Phải:

Bây giờ bạn đã hoàn tất việc thêm các điều khiển vào thư viện chi tiết.
Trong ngăn Dạng xem cây, hãy chọn Screen1 để đảm bảo rằng thư viện chi tiết không được chọn nữa.

Thêm văn bản vào thanh tiêu đề mới

Trên tab Chèn, hãy chèn nhãn khác vào màn hình:
Thay đổi kích thước và di chuyển nhãn mới ở phía trên hình ảnh của các sản phẩm trong thanh tiêu đề thứ hai, sau đó thay đổi màu của văn bản thành màu trắng trên tab Trang chủ.
Nhấp đúp vào văn bản của nhãn, sau đó nhập Sản phẩm:
Sao chép và dán nhãn sản phẩm, sau đó thay đổi kích thước và di chuyển bản sao lên phía trên cột số lượng.
Nhấp đúp vào văn bản của nhãn mới, sau đó nhập Số lượng:
Sao chép và dán nhãn số lượng, sau đó thay đổi kích thước và di chuyển bản sao lên phía trên cột đơn giá.
Nhấp đúp vào văn bản của nhãn mới, sau đó nhập Đơn giá:
Sao chép và dán nhãn đơn giá, sau đó thay đổi kích thước và di chuyển bản sao lên phía trên cột giá mở rộng.
Nhấp đúp vào văn bản của nhãn mới, sau đó nhập Mở rộng:

Hiển thị tổng đơn hàng

Giảm chiều cao của thư viện chi tiết để nhường chỗ cho tổng số đơn hàng ở cuối màn hình:
Sao chép và dán thanh tiêu đề ở giữa màn hình, sau đó di chuyển bản sao xuống cuối màn hình:
Sao chép và dán nhãn sản phẩm từ thanh tiêu đề ở giữa, sau đó di chuyển bản sao xuống thanh tiêu đề dưới cùng, ngay bên trái của cột Số lượng.
Nhấp đúp vào văn bản của nhãn mới, sau đó nhập văn bản này:
Tổng số đơn hàng:
Sao chép và dán nhãn tổng số đơn hàng, sau đó thay đổi kích thước và di chuyển bản sao sang bên phải của nhãn tổng đơn hàng.
Đặt thuộc tính Văn bản của nhãn mới thành công thức sau:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Công thức này hiển thị cảnh báo ủy quyền, nhưng bạn có thể bỏ qua vì không một đơn hàng nào sẽ chứa hơn 500 sản phẩm.
Trên tab Trang chủ, hãy đặt căn chỉnh văn bản của nhãn mới thành Phải:
Sao chép và dán nút điều chỉnh nhãn này, sau đó thay đổi kích thước và di chuyển bản sao xuống cột Mở rộng.
Đặt thuộc tính Văn bản của bản sao thành công thức sau:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Công thức này hiển thị cảnh báo ủy quyền, nhưng bạn có thể bỏ qua vì không một đơn hàng nào sẽ chứa hơn 500 sản phẩm.

Thêm không gian cho các chi tiết mới

Trong bất kỳ thư viện nào, bạn có thể hiển thị dữ liệu, nhưng bạn không thể cập nhật hoặc thêm hồ sơ. Trong thư viện chi tiết, bạn sẽ thêm một khu vực nơi người dùng có thể định cấu hình bản ghi trong bảng Chi tiết đơn hàng và chèn bản ghi đó vào một đơn hàng.

Giảm chiều cao của thư viện chi tiết đủ cho không gian chỉnh sửa một mục trong thư viện đó.

Trong không gian này, bạn sẽ thêm các nút điều chỉnh để người dùng có thể thêm chi tiết đơn hàng:
Trên tab Chèn, chèn một nhãn, sau đó thay đổi kích thước và di chuyển nó dưới thư viện chi tiết.
Nhấp đúp vào văn bản của nhãn mới, sau đó nhấn Xóa.
Trên tab Trang chủ, hãy đặt màu Phủ của nhãn thành LightBlue:

Chọn sản phẩm

Trên tab Chèn, chọn Nút điều chỉnh > Hộp tổ hợp:

Nút điều chỉnh Hộp tổ hợp xuất hiện ở góc trên bên trái.
Trong hộp thoại hiện lên, chọn nguồn dữ liệu Sản phẩm trên đơn hàng:
Trong tab Thuộc tính cho hộp tổ hợp, hãy chọn Chỉnh sửa (bên cạnh Trường) để mở ngăn Dữ liệu. Đảm bảo rằng Văn bản chính và Trường tìm kiếm được đặt thành nwind_productname.

Bạn chỉ định tên logic vì ngăn Dữ liệu không hỗ trợ tên hiển thị trong trường hợp này:
Đóng ngăn Dữ liệu.
Trong tab Thuộc tính gần cạnh phải, cuộn xuống, tắt Cho phép nhiều lựa chọn và đảm bảo rằng Cho phép tìm kiếm đã bật:
Thay đổi kích thước và di chuyển hộp tổ hợp sang khu vực màu xanh nhạt, ngay dưới cột tên sản phẩm trong thư viện chi tiết:

Trong hộp tổ hợp này, người dùng sẽ chỉ định một bản ghi trong bảng Sản phẩm cho bản ghi Chi tiết đơn hàng mà ứng dụng sẽ tạo.
Trong khi giữ phím Alt, hãy chọn mũi tên xuống của hộp tổ hợp.

Mẹo

Bằng cách giữ phím Alt, bạn có thể tương tác với các nút điều khiển trong Power Apps Studio mà không mở chế độ Xem trước.
Trong danh sách các sản phẩm xuất hiện, chọn một sản phẩm:

Hình ảnh sản phẩm

Trên tab Chèn, hãy chọn Tệp phương tiện > Hình ảnh:

Nút điều chỉnh Hình ảnh xuất hiện ở góc trên bên trái:
Thay đổi kích thước và di chuyển hình ảnh đến khu vực màu xanh nhạt dưới các hình ảnh sản phẩm khác và bên cạnh hộp tổ hợp.
Đặt thuộc tính Hình ảnh của hình ảnh thành:
```
ComboBox1.Selected.Picture
```
Bạn đang sử dụng thủ thuật giống như bạn đã sử dụng để hiển thị hình ảnh nhân viên trong biểu mẫu tóm tắt. Thuộc tính Đã chọn của hộp tổ hợp trả về toàn bộ bản ghi của bất kỳ sản phẩm nào mà người dùng chọn, bao gồm cả trường Hình ảnh.

Thêm một hộp số lượng

Trên tab Chèn, chọn Văn bản > Nhập văn bản:

Nút điều chỉnh Nhập văn bản xuất hiện ở góc trên bên trái:
Thay đổi kích thước và di chuyển hộp nhập văn bản sang bên phải của hộp tổ hợp, ngay dưới cột số lượng trong thư viện chi tiết:

Bằng cách sử dụng hộp nhập văn bản này, người dùng sẽ chỉ định trường Số lượng của bản ghi Chi tiết đặt hàng.
Đặt thuộc tính Mặc định của điều khiển này thành "":
Trên tab Trang chủ, đặt căn chỉnh văn bản của nút điều chỉnh này thành Phải:

Hiển thị đơn vị và giá mở rộng

Trên tab Chèn, chèn một điều chỉnh Nhãn.

Nhãn xuất hiện ở góc trên bên trái của màn hình:
Thay đổi kích thước và di chuyển nhãn sang bên phải của điều khiển nhập văn bản và đặt thuộc tính Văn bản của nhãn thành công thức này:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Điều khiển này hiển thị Bảng giá từ bảng Sản phẩm trên đơn hàng. Giá trị này sẽ xác định trường Đơn giá trong bản ghi Chi tiết đơn hàng.

Lưu ý

Đối với trường hợp này, giá trị là chỉ đọc, nhưng các trường hợp khác có thể yêu cầu người dùng ứng dụng sửa đổi nó. Trong trường hợp đó, hãy sử dụng một điều chỉnh Nhập văn bản và đặt tính Mặc định thành Bảng giá.
Trên tab Trang chủ, đặt căn chỉnh văn bản của nhãn bảng giá thành Phải:
Sao chép và dán nhãn bảng giá, sau đó thay đổi kích thước và di chuyển bản sao sang bên phải của nhãn bảng giá.
Đặt thuộc tính Văn bản của nhãn mới thành công thức sau:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Kiểm soát này hiển thị giá mở rộng dựa trên số lượng mà người dùng ứng dụng đã chỉ định và giá niêm yết của sản phẩm mà người dùng ứng dụng đã chọn. Đó hoàn toàn là thông tin cho người dùng ứng dụng.
Nhấp đúp vào nút điều khiển nhập văn bản cho số lượng, sau đó nhập một số.

Nhãn giá mở rộng tính toán lại để hiển thị giá trị mới:

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

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

Biểu tượng xuất hiện ở góc trên bên trái của màn hình.
Thay đổi kích thước và di chuyển biểu tượng này sang cạnh phải của vùng màu xanh nhạt, sau đó đặt thuộc tính OnSelect của biểu tượng thành công thức này:
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
Nói chung, hàm Vá sẽ cập nhật và tạo các bản ghi còn các đối số cụ thể trong công thức này xác định các thay đổi chính xác mà hàm sẽ thực hiện.
- Đối số đầu tiên chỉ định nguồn dữ liệu (trong trường hợp này, bảng Chi tiết đơn hàng) trong đó hàm sẽ cập nhật hoặc tạo bản ghi.
- Đối số thứ hai chỉ định rằng hàm sẽ tạo một bản ghi với các giá trị mặc định cho bảng Chi tiết đơn hàng trừ khi được chỉ định khác trong đối số thứ ba.
- Đối số thứ ba chỉ định rằng bốn cột trong bản ghi mới sẽ chứa các giá trị từ người dùng.
  - Cột Đơn hàng sẽ chứa số đơn hàng mà người dùng đã chọn trong thư viện đơn hàng.
  - Cột Sản phẩm sẽ chứa tên của sản phẩm mà người dùng đã chọn trong hộp tổ hợp hiển thị sản phẩm.
  - Cột Số lượng sẽ chứa giá trị mà người dùng chỉ định trong hộp nhập văn bản.
  - Cột Đơn giá sẽ chứa giá niêm yết của sản phẩm mà người dùng đã chọn cho chi tiết đơn hàng này.
Lưu ý

Bạn có thể tạo công thức sử dụng dữ liệu từ bất kỳ cột nào (trong bảng Sản phẩm trên đơn hàng) cho bất kỳ sản phẩm nào mà người dùng ứng dụng chọn trong hộp tổ hợp hiển thị các sản phẩm. Khi người dùng chọn một bản ghi trong bảng Sản phẩm trên đơn hàng, không chỉ tên sản phẩm xuất hiện trong hộp tổ hợp đó mà đơn giá của sản phẩm cũng xuất hiện trong nhãn. Mỗi giá trị tra cứu trong ứng dụng canvas tham chiếu toàn bộ bản ghi, không chỉ là khóa chính.

Hàm Refresh đảm bảo rằng bảng Đơn hàng phản ánh bản ghi mà bạn vừa thêm vào bảng Chi tiết đơn hàng. Hàm Đặt lại xóa dữ liệu sản phẩm, số lượng và đơn giá để người dùng có thể dễ dàng tạo chi tiết đơn hàng khác cho cùng đơn hàng.
Nhấn F5, sau đó chọn biểu tượng Thêm.

Đơn hàng phản ánh thông tin mà bạn đã chỉ định:
(tùy chọn) Thêm một mục khác vào đơn hàng.
Nhấn Esc để đóng chế độ xem trước.

Xóa một chi tiết đơn hàng

Ở giữa màn hình, hãy chọn mẫu của thư viện chi tiết:
Trên tab Chèn, hãy chọn Biểu tượng > Thùng rác:

Biểu tượng Thùng rác xuất hiện ở góc trên bên trái của mẫu thư viện.
Thay đổi kích thước và di chuyển biểu tượng Thùng rác sang cạnh phải của mẫu thư viện chi tiết, sau đó đặt thuộc tính OnSelect của biểu tượng thành công thức này:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
Kể từ văn bản này, bạn không thể xóa trực tiếp bản ghi khỏi một mối quan hệ, nên hàm Remove sẽ xóa trực tiếp bản ghi khỏi bảng liên quan. ThisItem chỉ định bản ghi cần xóa, được lấy từ cùng một bản ghi trong thư viện chi tiết nơi biểu tượng Thùng rác xuất hiện.

Một lần nữa, hoạt động sử dụng dữ liệu được lưu vào bộ đệm ẩn, vì vậy hàm Refresh thông báo cho bảng Đơn hàng rằng ứng dụng đã thay đổi một trong các bảng liên quan của nó.
Nhấn F5 để mở chế độ Xem trước, sau đó chọn biểu tượng Thùng rác bên cạnh mỗi bản ghi Chi tiết đặt hàng mà bạn muốn loại bỏ khỏi đơn đặt hàng.
Hãy thử thêm và xóa các chi tiết đơn hàng khác nhau khỏi đơn hàng của bạn:

Kết luận

Tóm lại, bạn đã thêm một thư viện khác để hiển thị chi tiết đơn hàng và nút kiểm soát việc thêm và xóa chi tiết đơn hàng trong ứng dụng. Bạn đã sử dụng các yếu tố sau:

Điều khiển thư viện thứ hai, được liên kết với thư viện đơn hàng thông qua mối quan hệ một - nhiều: Gallery2.Items = Gallery1.Selected.'Order Details'
Mối quan hệ nhiều-một từ bảng Chi tiết đơn hàng tới bảng Sản phẩm trên đơn hàng: ThisItem.Product.'Product Name' và ThisItem.Product.Picture
Hàm Lựa chọn để có được một danh sách các sản phẩm: Choices( 'Order Details'.Product' )
Thuộc tính Đã chọn của hộp tổ hợp dưới dạng bản ghi liên quan nhiều đến một: ComboBox1.Selected.Picture và ComboBox1.Selected.'List Price'
Hàm Vá tạo một bản ghi Chi tiết đặt hàng: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
Hàm Loại bỏ xóa bản ghi Chi tiết đặt hàng: Remove( 'Order Details', ThisItem )

Loạt chủ đề này là một hướng dẫn nhanh về việc sử dụng các mối quan hệ và lựa chọn Dataverse trong ứng dụng canvas cho mục đích giáo dục. Trước khi phát hành bất kỳ ứng dụng nào vào khâu sản xuất, bạn nên xem xét xác thực trường, xử lý lỗi và nhiều yếu tố khác.

Lưu ý

Bạn có thể cho chúng tôi biết bạn thích dùng ngôn ngữ nào cho tài liệu không? Làm một cuộc khảo sát ngắn. (xin lưu ý, khảo sát này bằng tiếng Anh)

Cuộc khảo sát sẽ mất khoảng bảy phút. Không có dữ liệu cá nhân nào được thu thập (điều khoản về quyền riêng tư).

Chia sẻ qua