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

Các điều khiển Thẻ là các khối xây dựng của các điều khiển Chỉnh sửa biểu mẫu và Hiển thị biểu mẫu trong các ứ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ơ đó.

Tương tác dễ dàng với các thẻ ở khung bên phải sau khi chọn điều khiển biểu mẫu trong không gian 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ụ: hình ảnh bên dưới hiển thị một điều khiển Chỉnh sửa biểu mẫu trong một ứng dụng được xây dựng từ danh sách có tên Tài sản, nơi bạn có thể tùy chỉnh các trường để đáp ứng nhu cầu cụ thể của mình.

Bắt đầu với thẻ bằng cách đọc thêm biểu mẫu và hiểu biểu mẫu dữ liệu. Phần còn lại của bài viết này sẽ giải thích cách thức hoạt động của thẻ và cách tùy chỉnh hoặc tạo thẻ của riêng bạn.

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 kiểu dữ liệu khác, giúp bạn dễ dàng tùy chỉnh ứng dụng theo các yêu cầu dữ liệu cụ thể. Ở ngăn bên phải, bạn sẽ thấy các biến thể có sẵn và có thể thay đổi thẻ được sử dụng cho một trường:

Trong ví dụ này, một thẻ văn bản một dòng được chọn, nhưng văn bản URL dài hơn nội dung có thể chứa 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 trong 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 một trường bằng cách chọn hộp kiểm của trường đó. Ví dụ này cho thấy cách hiển thị trường Mã bảo mật .

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 vào điều khiển Nhập văn bản chuẩn mà bạn thêm từ tab Chèn .

Bài viết này hướng dẫn một ví dụ về cách thay đổi giao diện của thẻ bằng cách thao tác các nút điều khiển trong thẻ đó.

1. Đầu tiên, hãy quay lại thẻ được 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 chạm vào chính điều khiển nhập.

   

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

   

Thay đổi kích thước, di chuyển và thực hiện các sửa đổi khác cho các điều khiển trong thẻ, nhưng bạn không thể xóa thẻ nếu chưa 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ẻ cũng là các điều khiển có thuộc tính và công thức, cho phép tùy chỉnh nâng cao. Khi bạn chọn hiển thị một trường trên 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, giúp bạn tiết kiệm thời gian và công sức. Chúng ta có thể thấy các công thức này trong tab Nâng cao của ngăn bên phải:

Bạn sẽ 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 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.

Chọn biểu ngữ ở trên cùng để mở khóa thẻ để bạn có thể sửa đổi các thuộc tính sau:

Sửa đổi DisplayName để đặt một khoảng trắng giữa Asset 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ờ bạn đã kiểm soát được thẻ này và có thể sửa đổi nó thêm cho phù hợp với nhu cầu của mình. Nhưng bạn đã mất khả năng thay đổi thẻ từ dạng biểu diễn này sang dạng biểu 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ư trước đây. Bạn đã chuyển đổi thẻ được xác định trước thành "thẻ tùy chỉnh" mà bạn hiện có thể 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ừ trình đơn 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, hãy mở khóa thẻ ImageURL , sau đó thêm một điều khiển Image vào thẻ đó từ tab Insert :

Trên thanh công thức, đặt thuộc tính Image 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 chứa URL:

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

Chúng 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 chúng ta sử dụng điều khiển Hiển thị biểu mẫu để hiển thị thông tin chi tiết của bản ghi. Trong trường hợp này, chúng ta có thể muốn ẩn nhãn (đặt thuộc tính Có thể nhìn thấy của nhãn, không phải của 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ẻ đó.

Sau đây là hướng dẫn về cách điều khiển hoạt động với thẻ và cách thẻ hoạt động với biểu mẫu. Những hướng dẫn này giúp bạn hiểu cách tạo công thức tham chiếu đến các điều khiển khác, bao gồm thẻ và điều khiển trong thẻ. Hãy sáng tạo - bạn có thể xây dựng ứng dụng theo nhiều cách để phù hợp với nhu cầu cụ thể của mình.

Thuộc tính DataField

Thuộc tính quan trọng nhất trên thẻ là thuộc tính DataField . Thuộc tính này kiểm soát việc xác thực, xác định trường nào được cập nhật và quản lý các khía cạnh khác của thẻ.

Thông tin truyền vào

Với tư cách là một thùng chứa, biểu mẫu này làm cho ThisItem có sẵn cho tất cả các thẻ bên trong nó. 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 Default của mỗi thẻ phải được đặt thành ThisItem.FieldName. Trong một số trường hợp, bạn có thể chuyển đổi giá trị này khi có thông tin mới. 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ẻ phải tham chiếu đến Parent.Default để lấy giá trị của trường. Chiến lược này đóng gói thẻ, cho phép thuộc tính Mặc định của thẻ thay đổi mà không ảnh hưởng đến các công thức bên trong của nó.

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 mình, 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 sẽ lưu những thay đổi đó vào nguồn dữ liệu. Khi hàm đó chạy, điều khiển biểu mẫu sẽ đọc các giá trị của thuộc tính DataField của mỗi thẻ để biết trường nào cần thay đổi.

Bộ điều khiển biểu mẫu cũng đọc giá trị của thuộc tính Cập nhật của mỗi thẻ. Giá trị này được lưu trữ trong nguồn dữ liệu của trường này. Đây là nơi áp dụng một phép biến đổi khác, có thể là để đảo ngược phép biến đổi đã được áp dụng trong công thức Mặc định của thẻ.

Thuộc tính Hợp lệ đượ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 Trường dữ liệu . Nó cũng dựa trên thuộc tính Bắt buộc và liệu thuộc tính Cập nhật có chứa giá trị hay không. Nếu giá trị trên thuộc tính Cập nhật không hợp lệ, thuộc tính Lỗi 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à trống, thẻ sẽ hoạt động như một vùng chứa các điều khiển. Thuộc tính Hợp lệ và Cập nhật của nó không tham gia khi biểu mẫu được gửi.

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

Hãy cùng khám phá các nút đ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 nút điều khiển được tăng lên để hiển thị rõ hơn, giúp bạn hiểu cách từng thành phần đóng góp vào chức năng của thẻ:

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

Bốn nút điều khiển giúp thẻ hoạt động:

Tên	Loại	Description
Văn bảnYêu cầuSao	Kiểm soát nhãn	Hiển thị một ngôi sao, thường được sử dụng trên biểu mẫu nhập dữ liệu để chỉ ra rằng một trường là bắt buộc.
Tên hiển thị trường văn bản	Kiểm soát nhãn	Hiển thị tên trường dễ sử dụng. Tên này có thể khác với tên có trong lược đồ của nguồn dữ liệu.
Văn bản đầu vào	Nhập văn bản điều khiển	Hiển thị giá trị ban đầu của trường và cho phép người dùng thay đổi giá trị đó.
Tin nhắn lỗi văn bản	Kiểm soát nhãn	Hiển thị thông báo lỗi thân thiện với người dùng nếu có sự cố xảy ra khi xác thực. Nó cũng đảm bảo rằng trường này có giá trị nếu cần thiết.

Để điền dữ liệu vào các điều khiển này, các thuộc tính của chúng được điều khiển từ các thuộc tính của thẻ thông qua các công thức chính này. Công thức đề cập đế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.Có thể nhìn thấy	Cha mẹ.Yêu cầu	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.
Tên hiển thị trường văn bản. Văn bản	Cha mẹ.DisplayName	Hộp điều khiển văn bản hiển thị tên thân thiện với người dùng do bạn hoặc siêu dữ liệu của nguồn dữ liệu cung cấp và được đặt trên thuộc tính DisplayName của thẻ.
InputText.Mặc định	Parent.Mặc định	Đ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. Văn bản	Cha mẹ.Lỗi	Nếu xảy ra sự cố xác thực, thuộc tính Lỗi của thẻ sẽ 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ỉ xuất ra mà bạn không thể thiết lập bằng cách sử dụng công thức. Thuộc tính này không xuất hiện trong danh sách thuộc tính gần góc trên bên trái hoặc trong các tab Thuộc tính hoặc Nâng cao gần cạnh phải. Thanh công thức sẽ gợi ý thuộc tính này nếu bạn đang viết công thức tham chiếu đến thuộc tính đó.

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

Tên kiểm soát	Công thức	Description
DataCard. Trường dữ liệu	"Email của người phê duyệt"	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.Cập nhật	InputText. Văn bản	Giá trị để xác thực và đẩy trở lại nguồn dữ liệu khi SubmitForm chạy.