Hiểu thẻ dữ liệu trong ứng dụng canvas

Điều khiển Thẻ là các khối xây dựng nên điều khiển Chỉnh sửa biểu mẫu và Hiển thị biểu mẫu trong ứng dụng canvas. Biểu mẫu đại diện cho toàn bộ hồ sơ và mỗi thẻ đại diện cho một trường duy nhất của hồ sơ đó.

Bạn có thể tương tác với thẻ dễ dàng nhất trong ngăn bên phải sau khi bạn chọn điều khiển biểu mẫu trong không gian làm việc thiết kế. Trong ngăn đó, bạn có thể chọn trường để hiển thị, cách hiển thị từng trường và thứ tự hiển thị. Ví dụ này cho thấy kiểm soát Chỉnh sửa biểu mẫu trong ứng dụng được xây dựng từ danh sách có tên Tài sản.

Để bắt đầu với thẻ, hãy xem thêm biểu mẫu và hiểu về biểu mẫu dữ liệu. Phần còn lại của bài viết này đi sâu hơn vào cách hoạt động của thẻ và cách bạn có thể tùy chỉnh hoặc thậm chí tạo thẻ của riêng mình.

Thẻ được xác định trước

Power Apps cung cấp một bộ thẻ được xác định trước cho chuỗi, số và các loại dữ liệu khác. Trong ngăn bên phải, bạn có thể thấy các biến thể có sẵn và thay đổi thẻ được sử dụng cho một trường:

Trong ví dụ này, thẻ văn bản một dòng được chọn, nhưng văn bản của URL dài hơn có thể được hiển thị trên một dòng. Hãy thay đổi thẻ này thành thẻ văn bản nhiều dòng để cung cấp cho người dùng nhiều không gian chỉnh sửa hơn:

Một số trường của nguồn dữ liệu này không được hiển thị, nhưng bạn có thể hiển thị hoặc ẩn trường bằng cách chọn hộp kiểm của trường đó. Ví dụ này minh họa cách hiển thị trường SecurityCode.

Tùy chỉnh thẻ

Thẻ bao gồm các điều khiển khác. Trong điều khiển Chỉnh sửa biểu mẫu, người dùng nhập dữ liệu trong điều khiển Nhập văn bản tiêu chuẩn mà bạn thêm từ tab Chèn.

Chúng ta hãy xem qua một ví dụ về cách thay đổi giao diện của thẻ bằng cách thao tác các điều khiển trong đó.

1. Trước tiên, hãy quay lại thẻ mà ta đã chèn gần đây nhất, cho trường Mã bảo mật. Chọn thẻ này bằng cách nhấp hoặc nhấn vào thẻ một lần:

   

2. Chọn điều khiển Nhập văn bản bên trong thẻ bằng cách nhấp hoặc nhấn vào chính điều khiển đó.

   

3. Di chuyển điều khiển này trong thẻ bằng cách kéo hộp lựa chọn và thay đổi kích thước điều khiển bằng cách kéo tay cầm dọc theo cạnh của hộp chọn:

   

Bạn có thể thay đổi kích thước, di chuyển và thực hiện các sửa đổi khác đối với các điều khiển trong thẻ, nhưng bạn không thể xóa nó mà không mở khóa trước.

Mở khóa thẻ

Ngoài việc chứa các điều khiển, bản thân thẻ là các điều khiển có các thuộc tính và công thức giống như bất kỳ điều khiển nào khác. Khi bạn chọn hiển thị một trường trên một biểu mẫu, ngăn bên phải sẽ tự động tạo thẻ cho bạn và tạo các công thức cần thiết. Có thể thấy những công thức này trong tab Nâng cao của ngăn bên phải:

Ta thấy ngay một trong những thuộc tính quan trọng nhất của thẻ: thuộc tính DataField. Thuộc tính này cho biết trường nào của nguồn dữ liệu mà người dùng nhìn thấy và có thể chỉnh sửa trong thẻ này.

Trên tab Nâng cao, biểu ngữ ở trên cùng cho biết rằng các thuộc tính của thẻ này đã bị khóa. Biểu tượng khóa cũng xuất hiện bên cạnh các thuộc tính DataField, DisplayName và Required. Ngăn bên phải đã tạo ra các công thức này và khóa ngăn thay đổi vô tình đối với các thuộc tính này.

Nhấp hoặc nhấn vào biểu ngữ ở trên cùng để khóa thẻ và sửa đổi các thuộc tính này:

Hãy sửa đổi DisplayName để đặt một khoảng trống giữa Tài sản và ID. Như vậy nghĩa là chúng ta đã thay đổi những gì được tạo cho mình. Trong ngăn bên phải, thẻ này có một nhãn khác:

Bây giờ, ta đã kiểm soát thẻ này và có thể sửa đổi thêm cho phù hợp với nhu cầu. Nhưng chúng ta đã mất khả năng thay đổi thẻ từ đại diện này sang đại diện khác (ví dụ: văn bản một dòng thành văn bản nhiều dòng) như đã làm trước đây. Ta đã chuyển đổi thẻ được xác định trước thành "thẻ tùy chỉnh" mà ta đang kiểm soát.

Quan trọng

Bạn không thể khóa lại thẻ nếu bạn mở khóa. Để đưa thẻ trở lại trạng thái bị khóa, hãy xóa nó và lắp lại vào ngăn bên phải.

Bạn có thể thay đổi giao diện và hành vi của thẻ đã mở khóa bằng nhiều cách khác nhau, chẳng hạn như thêm và xóa các điều khiển bên trong. Ví dụ: bạn có thể thêm hình ngôi sao từ menu Biểu tượng trên tab Chèn.

Ngôi sao bây giờ là một phần của thẻ và sẽ đi cùng với nó, như khi bạn sắp xếp lại thẻ trong biểu mẫu.

Một ví dụ khác: mở khóa thẻ ImageURL rồi thêm tùy chọn điều khiển Hình ảnh vào đó từ tab Chèn:

Trong thanh công thức, đặt thuộc tính Hình ảnh của điều khiển này thành TextBox.Text, trong đó TextBox là tên của điều khiển Text input có chứa URL:

Và bây giờ chúng ta có thể xem hình ảnh và chỉnh sửa URL hình ảnh. Lưu ý rằng chúng ta có thể đã sử dụng Parent.Default làm thuộc tính Image nhưng nó sẽ không cập nhật nếu người dùng thay đổi URL.

Ta có thể làm điều tương tự trên màn hình thứ hai của ứng dụng này, nơi ta sử dụng điều khiển Biểu mẫu hiển thị để hiển thị chi tiết của bản ghi. Trong trường hợp này, ta có thể muốn ẩn nhãn (đặt thuộc tính Visible của nhãn, không phải thẻ, thành false) vì người dùng sẽ không chỉnh sửa URL trên màn hình đó:

Tương tác với biểu mẫu

Sau khi bạn mở khóa thẻ, bạn có thể thay đổi cách thẻ tương tác với biểu mẫu có chứa thẻ đó.

Dưới đây là một số hướng dẫn về cách các điều khiển nên hoạt động với thẻ của họ và cách thẻ hoạt động với biểu mẫu. Đây chỉ là hướng dẫn. Như với bất kỳ kiểm soát nào trong Power Apps, bạn có thể tạo các công thức tham chiếu đến bất kỳ điều khiển nào khác trong Power Apps và điều đó không kém phần chính xác đối với thẻ và điều khiển trong thẻ. Hãy sáng tạo: bạn có thể tạo một ứng dụng theo nhiều cách.

Thuộc tính DataField

Thuộc tính quan trọng nhất trên thẻ là DataField. Thuộc tính này thúc đẩy quá trình xác thực, trường nào được cập nhật và các khía cạnh khác của thẻ.

Thông tin truyền vào

Là một bộ chứa, biểu mẫu cung cấp ThisItem cho toàn bộ thẻ ở bên trong. Bản ghi này chứa tất cả các trường cho bản ghi quan tâm hiện tại.

Thuộc tính Mặc định của mọi thẻ phải được đặt thành ThisItem.FieldName. Trong một số trường hợp nhất định, bạn có thể muốn chuyển đổi giá trị này trên đường vào. Ví dụ: bạn có thể muốn định dạng một chuỗi hoặc dịch giá trị từ ngôn ngữ này sang ngôn ngữ khác.

Mỗi điều khiển trong thẻ nên tham chiếu Parent.Default để có được giá trị của trường. Chiến lược này cung cấp mức độ đóng gói cho thẻ sao cho thuộc tính Default của thẻ có thể thay đổi mà không thay đổi công thức bên trong của thẻ.

Theo mặc định, các thuộc tính DefaultValue và Required được lấy từ siêu dữ liệu của nguồn dữ liệu dựa trên thuộc tính DataField. Bạn có thể ghi đè các công thức này bằng logic của riêng bạn, tích hợp siêu dữ liệu của nguồn dữ liệu bằng cách sử dụng hàm DataSourceInfo.

Thông tin truyền ra

Sau khi người dùng sửa đổi bản ghi bằng cách sử dụng các điều khiển trong thẻ, hàm SubmitForm hãy lưu những thay đổi đó vào nguồn dữ liệu. Khi chức năng đó chạy, điều khiển biểu mẫu sẽ đọc giá trị của mỗi thuộc tính DataField của thẻ để biết trường cần thay đổi.

Điều khiển biểu mẫu cũng đọc giá trị thuộc tính Update của mỗi thẻ. Giá trị này sẽ được lưu trữ trong nguồn dữ liệu cho trường này. Đây là nơi để áp dụng một chuyển đổi khác, có lẽ để đảo ngược chuyển đổi được áp dụng trong công thức Default của thẻ.

Thuộc tính Valid được điều khiển từ siêu dữ liệu của nguồn dữ liệu, dựa trên thuộc tính DataField. Nó cũng dựa trên thuộc tính Required và liệu thuộc tính Update có chứa giá trị hay không. Nếu giá trị trên thuộc tính Update không hợp lệ, thuộc tính Error sẽ cung cấp thông báo lỗi thân thiện với người dùng.

Nếu thuộc tính DataField của thẻ là blank, thẻ chỉ là bộ chứa các tùy chọn điều khiển. Thuộc tính Valid và Update của nó sẽ không tham gia khi biểu mẫu được gửi.

Phân tích một ví dụ

Hãy xem các tùy chọn điều khiển tạo nên một thẻ nhập dữ liệu cơ bản. Khoảng cách giữa các điều khiển đã được tăng lên để hiển thị rõ hơn:

Trong đồ họa này, các điều khiển trong thẻ dữ liệu đã được dán nhãn:

Bốn điều khiển làm cho thẻ này hoạt động:

Tên	Loại	Mô tả
TextRequiredStar	công cụ điều khiển Label (Nhãn)	Hiển thị một ngôi sao, thường được sử dụng trên các biểu mẫu nhập dữ liệu để chỉ ra rằng một trường là bắt buộc.
TextFieldDisplayName	công cụ điều khiển Label (Nhãn)	Hiển thị tên trường này, thân thiện với người dùng. Tên này có thể khác với tên trong sơ đồ của nguồn dữ liệu.
InputText	công cụ điều khiển Input text (Nhập văn bản)	Hiển thị giá trị ban đầu của trường và cho phép người dùng thay đổi giá trị đó.
TextErrorMessage	công cụ điều khiển Label (Nhãn)	Hiển thị thông báo lỗi thân thiện với người dùng nếu người dùng gặp sự cố khi xác thực. Cũng đảm bảo rằng trường có giá trị nếu được yêu cầu.

Để điền dữ liệu vào các tùy chọn điều khiển này, các thuộc tính của chúng có thể được điều khiển từ thuộc tính của thẻ, thông qua những công thức chính này. Lưu ý rằng các công thức sẽ tham chiếu đến một trường cụ thể. Thay vào đó, tất cả thông tin đến từ thẻ.

Kiểm soát thuộc tính	Công thức	Mô tả
TextRequiredStar.Visible	Parent.Required	Ngôi sao chỉ xuất hiện nếu trường là bắt buộc. Required (Bắt buộc) là một công thức do bạn hoặc siêu dữ liệu của nguồn dữ liệu điều khiển.
TextFieldDisplayName.Text	Parent.DisplayName	Điều khiển hộp văn bản hiển thị tên thân thiện với người dùng mà siêu dữ liệu của bạn hoặc nguồn dữ liệu cung cấp và được đặt trên thuộc tính DisplayName của thẻ.
InputText.Default	Parent.Default	Điều khiển nhập văn bản ban đầu hiển thị giá trị của trường từ nguồn dữ liệu, như được cung cấp bởi giá trị mặc định của thẻ.
TextErrorMessage.Text	Parent.Error	Nếu xảy ra sự cố xác thực, thuộc tính Error của thẻ cung cấp thông báo lỗi phù hợp.

Lưu ý

Thuộc tính Parent.Error là thuộc tính chỉ nhập mà bạn không thể thiết lập bằng cách sử dụng công thức. Vì vậy, thuộc tính này sẽ không xuất hiện trong danh sách các thuộc tính gần góc trên bên trái hoặc trong tab Thuộc tính hoặc Nâng cao gần cạnh phải. Thanh công thức gợi ý thuộc tính này nếu bạn đang viết một công thức có thể tham chiếu thuộc tính.

Để lấy thông tin ra khỏi các điều khiển này và đẩy nó trở lại nguồn dữ liệu, ta có các công thức chính sau:

Tên kiểm soát	Công thức	Mô tả
DataCard.DataField	"ApproverEmail"	Tên của trường mà người dùng có thể hiển thị và chỉnh sửa trong thẻ này.
DataCard.Update	InputText.Text	Giá trị để xác thực và đẩy lại vào nguồn dữ liệu khi SubmitForm chạy.

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 khoản về quyền riêng tư).