Hiểu các biểu mẫu ứng dụng canvas

Thêm ba loại điều khiển vào ứng dụng canvas để người dùng có thể duyệt tìm bản ghi, hiển thị chi tiết về bản ghi đó và chỉnh sửa hoặc tạo bản ghi:

Hoạt động Điều khiển Mô tả
Duyệt bản ghi Công cụ điều khiển Thư viện Lọc, sắp xếp, tìm kiếm và cuộn qua các bản ghi trong nguồn dữ liệu và chọn một bản ghi cụ thể. Chỉ hiển thị một vài trường từ mỗi bản ghi để hiển thị nhiều bản ghi một lúc, ngay cả trên màn hình nhỏ.
Hiển thị chi tiết của bản ghi Điều khiển Biểu mẫu hiển thị Đối với một bản ghi, hiển thị nhiều hoặc tất cả các trường trong bản ghi đó.
Chỉnh sửa hoặc tạo bản ghi Điều khiển Chỉnh sửa biểu mẫu Cập nhật một hoặc nhiều trường trong một bản ghi (hoặc tạo bản ghi bắt đầu bằng các giá trị mặc định) và lưu các thay đổi đó trở lại nguồn dữ liệu cơ bản.

Đặt mỗi điều khiển trên một màn hình khác nhau để dễ phân biệt hơn:

Duyệt, xem và chỉnh sửa bản ghi trên ba màn hình.

Như chủ đề này mô tả, kết hợp các điều khiển này với công thức để tạo ra trải nghiệm người dùng tổng thể.

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

Khám phá ứng dụng được tạo

Power Apps có thể tự động tạo một ứng dụng dựa trên nguồn dữ liệu mà bạn chỉ định. Mỗi ứng dụng chứa 3 màn hình với các điều khiển được mô tả trước đó và các công thức kết nối chúng. Chạy các ứng dụng này ngay lập tức, tùy chỉnh chúng cho các mục tiêu cụ thể của bạn hoặc kiểm tra cách chúng hoạt động để bạn có thể tìm hiểu các khái niệm hữu ích áp dụng cho các ứng dụng của riêng bạn. Trong các phần sau, hãy kiểm tra màn hình, tùy chọn điều khiển và công thức điều khiển ứng dụng được tạo.

Màn hình duyệt

Màn hình duyệt xem.

Màn hình này có các công thức chính sau đây:

Control Hành vi được hỗ trợ Công thức
BrowseGallery1 Hiển thị bản ghi từ nguồn dữ liệu Tài sản. Thuộc tính Mục của bộ sưu tập được đặt thành một công thức dựa trên nguồn dữ liệuTài sản.
ImageNewItem1 Hiển thị màn hình Chỉnh sửa và tạo với mỗi trường được đặt thành một giá trị mặc định, để người dùng có thể dễ dàng tạo bản ghi. Thuộc tính OnSelect của hình ảnh được đặt thành công thức sau:
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NextArrow1 (trong bộ sưu tập) Hiển thị màn hình Chi tiết để xem nhiều hoặc tất cả các trường của bản ghi hiện được chọn. Thuộc tính OnSelect của mũi tên được đặt thành công thức sau:
Navigate( DetailScreen1, None )

Điều khiển chính trên màn hình này, BrowseGallery1 bao phủ hầu hết màn hình. Người dùng có thể cuộn qua bộ sưu tập và tìm một bản ghi cụ thể để hiển thị nhiều trường hơn hoặc để cập nhật.

Đặt thuộc tính Mục của bộ sưu tập để hiển thị các bản ghi từ một nguồn dữ liệu trong đó. Ví dụ: đặt thuộc tính đó thành Tài sản để hiển thị các bản ghi từ một nguồn dữ liệu của tên đó.

Lưu ý

Trong một ứng dụng được tạo, Mục được đặt thành một công thức phức tạp hơn nhiều theo mặc định để người dùng có thể sắp xếp và tìm kiếm bản ghi. Bạn sẽ học cách xây dựng công thức đó ở phần sau trong chủ đề này; bây giờ chỉ cần phiên bản đơn giản là đủ.

Thay vì tìm bản ghi để hiển thị hoặc chỉnh sửa, người dùng có thể tạo bản ghi bằng cách chọn biểu tượng "+" phía trên bộ sưu tập. Tạo hiệu ứng này bằng cách thêm tùy chọn điều khiển Hình ảnh, hiển thị biểu tượng "+" trong đó và đặt thuộc tính OnSelect thành công thức sau đây:
NewForm( EditForm1 ); Navigate( EditScreen1, None )

Công thức này mở ra màn hình Chỉnh sửa và tạo, trong đó có tùy chọn điều khiển Chỉnh sửa biểu mẫu mang tên EditForm1. Công thức cũng chuyển đổi biểu thức đó thành chế độ Mới, trong đó biểu mẫu hiển thị các giá trị mặc định từ nguồn dữ liệu để người dùng có thể dễ dàng tạo bản ghi từ đầu.

Để kiểm tra bất kỳ tùy chọn điều khiển nào xuất hiện trong BrowseGallery1, hãy chọn điều khiển đó trong phần đầu tiên của thư viện đó, đóng vai trò như một mẫu cho tất cả các phần khác. Ví dụ: chọn điều khiển Nhãn ở giữa trên cạnh trái:

Duyệt xem tùy chọn điều khiển màn hình.

Trong ví dụ này, thuộc tính Văn bản được đặt thành ThisItem.AssignedTo, đó là một trường trong nguồn dữ liệu Tài sản. Thuộc tính Văn bản của 3 điều khiển Nhãn còn lại trong bộ sưu tập được đặt thành các công thức tương tự và mỗi điều khiển hiển thị một trường khác nhau trong nguồn dữ liệu.

Chọn điều khiển Hình dạng(mũi tên) và xác nhận rằng thuộc tính OnSelect của nó được đặt theo công thức sau đây:
Navigate( DetailScreen1, None )

Nếu người dùng tìm thấy một bản ghi trong BrowseGallery1, người dùng có thể chọn mũi tên cho bản ghi đó để hiển thị thêm thông tin về nó trong DetailScreen1. Bằng cách chọn một mũi tên, người dùng thay đổi giá trị của thuộc tính Đã chọn thành BrowseGallery1. Trong ứng dụng này, thuộc tính đó xác định bản ghi nào xuất hiện không chỉ trong DetailScreen1 mà còn trên màn hình Chỉnh sửa và tạo (nếu người dùng quyết định cập nhật bản ghi).

Màn hình chi tiết

Tùy chọn điều khiển màn hình chi tiết.

Màn hình này có các công thức chính sau đây:

Control Hành vi được hỗ trợ Công thức
DetailForm1 Hiển thị bản ghi từ nguồn dữ liệu Tài sản Đặt thuộc tính Nguồn dữ liệu thành Tài sản.
DetailForm1 Xác định bản ghi nào sẽ hiển thị. Trong một ứng dụng được tạo, hiển thị bản ghi mà người dùng đã chọn trong bộ sưu tập. Đặt thuộc tính Mục của tùy chọn điều khiển này thành giá trị sau đây:
BrowseGallery1.Selected
Tùy chọn điều khiển Thẻ Trong tùy chọn điều khiển Hiển thị biểu mẫu, hiển thị một trường duy nhất trong một bản ghi. Đặt thuộc tính Trường dữ liệu thành tên trường, đặt trong dấu ngoặc kép (ví dụ: "Tên").
ImageBackArrow1 Khi người dùng chọn điều khiển này, sẽ mở BrowseScreen1. Đặt thuộc tính OnSelect của biểu tượng thành công thức sau:
Back()
ImageDelete1 Khi người dùng chọn điều khiển này, xóa một bản ghi. Đặt thuộc tính OnSelect của biểu tượng thành công thức sau:
Remove( Assets, BrowseGallery1.Selected )
ImageEdit1 Khi người dùng chọn điều khiển này, sẽ mở màn hình Chỉnh sửa và tạo bản ghi hiện tại. Đặt thuộc tính OnSelect của biểu tượng thành công thức sau:
Navigate( EditScreen1, None )

Ở đầu màn hình, 3 hình ảnh nằm bên ngoài DetailForm1 và hoạt động như các nút, phối hợp giữa 3 màn hình của ứng dụng.

DetailForm1 thống trị màn hình này và hiển thị bản ghi mà người dùng đã chọn trong bộ sưu tập (vì thuộc tính Mục được đặt thành BrowseGallery1.Selected). Thuộc tính Nguồn dữ liệu của biểu mẫu cũng cung cấp siêu dữ liệu về nguồn dữ liệu, chẳng hạn như tên hiển thị thân thiện với người dùng cho từng trường.

DetailForm1 chứa một số điều khiển Thẻ. Bạn có thể chọn một trong hai điều khiển Thẻ hoặc điều khiển trong đó để tìm hiểu thêm thông tin.

Thẻ chi tiết và điều khiển thẻ được chọn trong trải nghiệm biên soạn.

Thuộc tính Trường dữ liệu của điều khiển Thẻ xác định các trường mà thẻ hiển thị. Trong trường hợp này, thuộc tính đó được đặt thành ID tài sản. Thẻ chứa tùy chọn điều khiển Nhãn mà thuộc tính Văn bản được đặt thành Parent.Default. Tùy chọn điều khiển này hiển thị giá trị Mặc định cho thẻ, được đặt thông qua thuộc tính Trường dữ liệu.

Trong một ứng dụng được tạo, tùy chọn điều khiển Thẻ bị khóa theo mặc định. Khi thẻ bị khóa, bạn không thể sửa đổi một số thuộc tính, chẳng hạn như Trường dữ liệu và thanh công thức không có sẵn cho các thuộc tính đó. Hạn chế này giúp đảm bảo rằng các tùy chỉnh của bạn không làm gián đoạn chức năng cơ bản của ứng dụng được tạo. Tuy nhiên, bạn có thể thay đổi một số thuộc tính của thẻ và các điều khiển của thẻ trong ngăn bên phải:

Màn hình chi tiết với ngăn tùy chọn mở.

Trong ngăn bên phải, bạn có thể chọn trường hiển thị và loại điều khiển mà mỗi trường hiển thị.

Màn hình Chỉnh sửa/Tạo

Chỉnh sửa điều khiển màn hình.

Màn hình này có các công thức chính sau đây:

Control Hành vi được hỗ trợ Công thức
EditForm1 Hiển thị bản ghi từ nguồn dữ liệu Tài sản. Đặt thuộc tính Nguồn dữ liệu thành Tài sản.
EditForm1 Xác định bản ghi nào sẽ hiển thị. Trong một ứng dụng được tạo, hiển thị bản ghi mà người dùng đã chọn trong BrowseScreen1. Đặt thuộc tính Mục thành giá trị sau:
BrowseGallery1.Selected
Tùy chọn điều khiển Thẻ Trong tùy chọn điều khiển Chỉnh sửa biểu mẫu, cung cấp các điều khiển để người dùng có thể chỉnh sửa một hoặc nhiều trường trong một bản ghi. Đặt thuộc tính Trường dữ liệu thành tên trường, đặt trong dấu ngoặc kép (ví dụ: "Tên").
ImageCancel1 Khi người dùng chọn điều khiển này, loại bỏ mọi thay đổi đang diễn ra và mở màn hình Chi tiết. Đặt thuộc tính OnSelect của biểu tượng thành công thức sau:
ResetForm( EditForm1 ); Back()
ImageAccept1 Khi người dùng chọn điều khiển này, gửi các thay đổi cho nguồn dữ liệu. Đặt thuộc tính OnSelect của biểu tượng thành công thức sau:
SubmitForm( EditForm1 )
EditForm1 Nếu thay đổi được chấp nhận, trở lại màn hình trước. Đặt thuộc tính OnSuccess thành công thức sau:
Back()
EditForm1 Nếu thay đổi không được chấp nhận, vẫn ở trên màn hình hiện tại để người dùng có thể khắc phục mọi sự cố và thử gửi lại. Rời khỏi mục trống của thuộc tính OnFailure.
LblFormError1 Nếu thay đổi không được chấp nhận, hiển thị thông báo lỗi. Đặt thuộc tính Văn bản thành giá trị sau:
EditForm1.Error

Như trong màn hình Chi tiết, một điều khiển biểu mẫu có tên EditForm1 sẽ chiếm màn hình Chỉnh sửa và tạo. Ngoài ra, thuộc tính Mục của EditForm1 được đặt thành BrowseGallery1.Selected, vì vậy biểu mẫu sẽ hiển thị bản ghi mà người dùng chọn trong BrowseScreen1. Trong khi màn hình Chi tiết hiển thị từng trường ở dạng chỉ đọc, người dùng có thể cập nhật giá trị của một hoặc nhiều trường bằng cách sử dụng các điều khiển trong EditForm1. Nó cũng sử dụng thuộc tính Nguồn dữ liệu để truy cập siêu dữ liệu về nguồn dữ liệu này, chẳng hạn như tên hiển thị thân thiện với người dùng cho từng trường và vị trí cần lưu thay đổi.

Nếu người dùng chọn biểu tượng "X" để hủy cập nhật, thì hàm ResetForm sẽ loại bỏ mọi thay đổi chưa được lưu và hàm Back sẽ mở màn hình Chi tiết. Cả màn hình Chi tiết và màn hình Chỉnh sửa và tạo đều hiển thị cùng một bản ghi cho đến khi người dùng chọn một bản khác trên BrowseScreen1. Các trường trong bản ghi đó vẫn được đặt thành các giá trị được lưu gần đây nhất, không có bất kỳ thay đổi nào mà người dùng thực hiện và sau đó bị bỏ đi.

Nếu người dùng thay đổi một hoặc nhiều giá trị trong biểu mẫu và sau đó chọn biểu tượng "đánh dấu", hàm SubmitForm sẽ gửi các thay đổi của người dùng đến nguồn dữ liệu.

  • Nếu các thay đổi được lưu thành công, công thức OnSuccess của biểu mẫu sẽ chạy và hàm Back() sẽ mở màn hình chi tiết để hiển thị bản ghi cập nhật.
  • Nếu các thay đổi không được lưu thành công, công thức OnFailure của biểu mẫu sẽ chạy nhưng không thay đổi điều gì vì đó là mục trống. Màn hình Chỉnh sửa và tạo vẫn mở để người dùng có thể hủy các thay đổi hoặc sửa lỗi. LblFormError1hiển thị thông báo lỗi thân thiện với người dùng, trong đó thuộc tính Lỗi của biểu mẫu được đặt.

Như với tùy chọn điều khiển Hiển thị biểu mẫu, một tùy chọn điều khiển Chỉnh sửa biểu mẫu có chứa tùy chọn điều khiển Thẻ, trong đó có chứa các điều khiển khác hiển thị các trường khác nhau trong hồ sơ:

Tùy chọn điều khiển Chỉnh sửa thẻ và thẻ được chọn trong trải nghiệm biên soạn.

Trong hình ảnh trước đó, thẻ đã chọn hiển thị trường ID tài sản và chứa tùy chọn điều khiển Nhập văn bản để người dùng có thể chỉnh sửa giá trị của trường đó. (Ngược lại, màn hình chi tiết hiển thị cùng một trường trong tùy chọn điều khiển Nhãn, tức là chỉ đọc). Tùy chọn điều khiển Nhập văn bản có thuộc tính Mặc định, được đặt thành Parent.Default. Nếu người dùng đang tạo thay vì chỉnh sửa hồ sơ, tùy chọn điều khiển đó sẽ hiển thị giá trị ban đầu mà người dùng có thể thay đổi cho hồ sơ mới.

Trong ngăn bên phải, bạn có thể hiển thị hoặc ẩn từng thẻ, sắp xếp lại chúng hoặc định cấu hình chúng để hiển thị các trường trong các loại điều khiển khác nhau.

Chỉnh sửa màn hình chi tiết với ngăn tùy chọn mở.

Phát triển ứng dụng từ đầu

Qua việc hiểu cách Power Apps tạo ứng dụng, bạn có thể tự xây dựng một ứng dụng sử dụng cùng các khối và công thức xây dựng được thảo luận trước đó trong chủ đề này.

Xác định dữ liệu thử nghiệm

Để tận dụng tối đa chủ đề này, hãy bắt đầu với nguồn dữ liệu mà bạn có thể thử nghiệm. Nguồn dữ liệu nên chứa dữ liệu thử nghiệm mà bạn có thể đọc và cập nhật mà không cần quan tâm.

Lưu ý

Nếu bạn sử dụng danh sách được tạo bằng Microsoft Lists, thư viện SharePoint hoặc bảng Excel có chưa tên cột kèm theo khoảng trống là nguồn dữ liệu, Power Apps sẽ thay thế khoảng trống bằng "_x0020_". Ví dụ: "Tên cột" trong SharePoint hoặc Excel sẽ xuất hiện dưới dạng "Cột_x0020_Name" trong Power Apps khi được hiển thị trong bố cục dữ liệu hoặc dùng trong công thức.

Để theo dõi chính xác phần còn lại của chủ đề này, tạo một danh sách có tên là "Kem" và chứa dữ liệu sau:

Danh sách kem.

  • Tạo một ứng dụng từ đầu dành cho điện thoại và kết nối với nguồn dữ liệu của bạn.

    Lưu ý

    Các ứng dụng máy tính bảng rất giống nhau, nhưng bạn có thể muốn một bố cục màn hình khác biệt để tận dụng tối đa không gian màn hình bổ sung.

    Các ví dụ trong phần còn lại của chủ đề được dựa trên nguồn dữ liệu có tên Ice Cream.

Duyệt bản ghi

Nhận một phần thông tin nhanh chóng từ một bản ghi bằng cách tìm bản ghi trong bộ sưu tập trên màn hình duyệt.

  1. Thêm bộ sưu tập Dọc và thay đổi bố cục thành chỉ Tiêu đề.

    Thêm bộ sưu tập dọc.

  2. Đặt thuộc tính Mục của thư viện thành Ice Cream.

  3. Đặt thuộc tính Văn bản của nhãn đầu tiên trong bộ sưu tập thành ThisItem.Title nếu nó được đặt thành nội dung khác.

    Nhãn bây giờ sẽ hiển thị giá trị trong trường Tiêu đề cho từng bản ghi.

    Đã cập nhật nhãn.

  4. Thay đổi kích thước bộ sưu tập để lấp đầy màn hình và đặt thuộc tính TemplateSize thành 60.

    Màn hình giống với ví dụ này, hiển thị tất cả các bản ghi trong nguồn dữ liệu:

    Bộ sưu tập kết nối với Nguồn dữ liệu Ice Cream.

Xem chi tiết

Nếu thư viện không hiển thị thông tin bạn muốn, hãy chọn mũi tên cho bản ghi để mở màn hình chi tiết. Điều khiển Hiển thị biểu mẫu trên màn hình đó hiển thị nhiều hơn, có thể là tất cả các trường cho bản ghi mà bạn đã chọn.

Tùy chọn điều khiển Hiển thị biểu mẫu sử dụng hai thuộc tính để hiển thị bản ghi:

  • Thuộc tính Nguồn dữ liệu. Tên của nguồn dữ liệu chứa bản ghi. Thuộc tính này điền vào bảng điều khiển bên phải với các trường và xác định tên hiển thị và loại dữ liệu (chuỗi, số, ngày, v.v.) của từng trường.
  • Thuộc tính Mục. Bản ghi sẽ hiển thị. Thuộc tính này thường được kết nối với thuộc tính Đã chọn của điều khiển Bộ sưu tập để người dùng có thể chọn một bản ghi trong điều khiển Bộ sưu tập rồi đi sâu vào bản ghi đó.

Khi thuộc tính Nguồn dữ liệu được đặt, bạn có thể thêm và xóa các trường thông qua ngăn bên phải và thay đổi cách chúng được hiển thị.

Trên màn hình này, người dùng không thể cố ý hoặc vô tình thay đổi bất kỳ giá trị nào của bản ghi. Điều khiển Hiển thị biểu mẫu là điều khiển chỉ đọc, vì vậy nó sẽ không sửa đổi bản ghi.

Để thêm điều khiển Hiển thị biểu mẫu:

  1. Thêm màn hình và sau đó thêm điều khiển Hiển thị biểu mẫu vào đó
  2. Đặt thuộc tính DataSource của điều khiển biểu mẫu thành 'Ice Cream'.

Trong ngăn bên phải, bạn có thể chọn các trường để hiển thị trên màn hình của mình và loại thẻ nào sẽ hiển thị cho từng trường. Khi bạn thực hiện thay đổi trong khung bên phải, thuộc tính DataField trên mỗi tùy chọn điều khiển Thẻ sẽ được đặt thành trường mà người dùng sẽ tương tác. Màn hình của bạn sẽ giống như ví dụ sau:

Màn hình mới Ice Cream.

Cuối cùng, chúng ta cần kết nối điều khiển Hiển thị biểu mẫu vào điều khiển Bộ sưu tập để có thể xem chi tiết cho một bản ghi cụ thể. Ngay sau khi hoàn thành thiết lập thuộc tính Mục, bản ghi đầu tiên từ bộ sưu tập sẽ xuất hiện trong biểu mẫu.

  • Đặt thuộc tính Mục của điều khiển Hiển thị biểu mẫu thành Gallery1.Selected.

    Các chi tiết cho mục được chọn xuất hiện trong mẫu.

    Biểu mẫu hiển thị cho nguồn dữ liệu Ice Cream, được kết nối với điều khiển bộ sưu tập.

Tốt lắm! Bây giờ chúng ta chuyển sang điều hướng: cách người dùng mở màn hình chi tiết từ màn hình bộ sưu tập và mở màn hình bộ sưu tập từ màn hình chi tiết.

  • Thêm điều khiển Nút vào màn hình, đặt thuộc tính Text của nút thành Back, rồi đặt thuộc tính OnSelect của nút thành Back().

    Công thức này đưa người dùng trở lại bộ sưu tập khi họ xem xong chi tiết.

    Biểu mẫu hiển thị cho nguồn dữ liệu với nút quay lại.

Bây giờ, hãy trở lại điều khiển Bộ sưu tập và thêm một số điều hướng vào màn hình chi tiết của chúng tôi.

  1. Chuyển sang màn hình đầu tiên đang lưu trữ Bộ sưu tập và chọn mũi tên trong mục đầu tiên trong bộ sưu tập.

  2. Đặt thuộc tính OnSelect của hình dạng thành công thức sau:
    Navigate( Screen2, None )

    Biểu mẫu hiển thị cho nguồn dữ liệu Ice Cream có nút quay lại với cập nhật Điều hướng.

  3. Nhấn F5, sau đó chọn một mũi tên trong bộ sưu tập để hiển thị chi tiết cho một mục.

  4. Chọn nút Back để trở về bộ sưu tập các sản phẩm, sau đó nhấn Esc.

Chỉnh sửa chi tiết

Cuối cùng, hoạt động cốt lõi cuối cùng của chúng tôi là thay đổi nội dung của bản ghi mà người dùng thực hiện trong điều khiển Chỉnh sửa biểu mẫu.

Tùy chọn điều khiển Chỉnh sửa biểu mẫu sử dụng hai thuộc tính để hiển thị và chỉnh sửa bản ghi:

  • Thuộc tính Nguồn dữ liệu. Tên của nguồn dữ liệu chứa bản ghi. Cũng như với điều khiển Hiển thị biểu mẫu, thuộc tính này điền vào bảng điều khiển bên phải với các trường và xác định tên hiển thị và loại dữ liệu (chuỗi, số, ngày, v.v.) cho từng trường. Thuộc tính này cũng xác định xem giá trị của mỗi trường có hợp lệ hay không trước khi gửi nó tới nguồn dữ liệu cơ sở.
  • Thuộc tính Mục. Bản ghi để chỉnh sửa, thường được kết nối với thuộc tính Đã chọn của điều khiển Bộ sưu tập. Bằng cách đó, bạn có thể chọn một bản ghi trong điều khiển Bộ sưu tập, hiển thị nó trong màn hình chi tiết và chỉnh sửa trong màn hình Chỉnh sửa và tạo.

Để thêm điều khiển Chỉnh sửa biểu mẫu:

  1. Thêm màn hình, thêm điều khiển Chỉnh sửa biểu mẫu và sau đó thiết lập thuộc tính DataSource của biểu mẫu thành 'Ice Cream'.
  2. Đặt thuộc tính Mục thành Gallery1.Selected.

Bây giờ bạn có thể chọn các trường để hiển thị trên màn hình của bạn. Bạn cũng có thể chọn loại thẻ sẽ hiển thị cho từng trường. Khi bạn thực hiện thay đổi trong khung bên phải, thuộc tính DataField trên mỗi tùy chọn điều khiển Thẻ sẽ được đặt thành trường mà người dùng của bạn sẽ tương tác. Màn hình của bạn sẽ giống như ví dụ sau:

Hiển thị biểu mẫu cho nguồn dữ liệu Ice Cream.

Hai thuộc tính này giống như các thuộc tính trên điều khiển Hiển thị biểu mẫu. Và chỉ với những thứ này, chúng ta có thể hiển thị các chi tiết của một bản ghi.

Điều khiển Chỉnh sửa biểu mẫu đi xa hơn bằng cách cung cấp hàm SubmitForm để ghi lại các thay đổi đối với nguồn dữ liệu. Bạn sử dụng hàm này với một nút hoặc điều khiển hình ảnh để lưu các thay đổi của người dùng.

  • Thêm tùy chọn kiểm soát Nút, đặt thuộc tính Text của nút thành Save, rồi đặt thuộc tính OnSelect của nút thành công thức sau:
    SubmitForm( Form1 )

Chỉnh sửa biểu mẫu cho nguồn dữ liệu Ice Cream.

Để thêm điều hướng đến và từ màn hình này:

  1. Thêm Nút khác, đặt thuộc tính Text của nút thành Cancel, rồi đặt thuộc tính OnSelect của nút thành công thức sau:
    ResetForm( Form1 ); Back()

    Công thức này loại bỏ mọi chỉnh sửa chưa được lưu và mở màn hình trước đó.

    Màn hình đã cập nhật.

  2. Đặt thuộc tính OnSuccess của mẫu thành Back().

    Khi các bản cập nhật được lưu thành công, màn hình trước đó (trong trường hợp này là màn hình chi tiết) sẽ tự động mở ra.

    Chỉnh sửa biểu mẫu có thêm quy tắc "OnSuccess"

  3. Trên màn hình Hiển thị, thêm nút, đặt thuộc tính Text của nút thành Edit, rồi đặt thuộc tính OnSelect của nút thành công thức sau:
    Navigate( Screen3, None )

    Thuộc tính văn bản đã cập nhật.

Bạn đã xây dựng một ứng dụng cơ bản với 3 màn hình để xem và nhập dữ liệu. Để dùng thử, hiển thị màn hình bộ sưu tập, sau đó nhấn F5 (hoặc chọn nút "Xem trước" dạng mũi tên tiến ở gần góc trên bên trái của màn hình). Dấu chấm màu hồng cho biết nơi người dùng nhấp hoặc chạm vào màn hình ở mỗi bước.

Dùng thử ứng dụng ice cream.

Tạo bản ghi

Người dùng tương tác với cùng biểu mẫu Chỉnh sửa cập nhật và tạo bản ghi. Khi người dùng muốn tạo bản ghi, hàm NewForm sẽ chuyển biểu mẫu thành chế độ Mới.

Khi biểu mẫu ở chế độ Mới, giá trị của từng trường được đặt thành mặc định của nguồn dữ liệu. Bản ghi được cung cấp cho thuộc tính Item của biểu mẫu bị bỏ qua.

Khi người dùng sẵn sàng lưu bản ghi mới, SubmitForm sẽ chạy. Sau khi biểu mẫu được gửi thành công, biểu mẫu được chuyển trở lại EditMode.

Trên màn hình đầu tiên, bạn sẽ thêm nút Mới:

  1. Trên màn hình với bộ sưu tập, thêm điều khiển Nút.

  2. Đặt thuộc tính Text của nút thành New và thuộc tính OnSelect thành công thức sau:
    NewForm( Form1 ); Navigate( Screen3, None )

    Công thức này chuyển đổi điều khiển Chỉnh sửa biểu mẫu trên Screen3 thành chế độ New và mở màn hình đó để người dùng có thể điền vào.

Chỉnh sửa biểu mẫu đã cập nhật.

Khi màn hình Chỉnh sửa và Tạo mở ra, biểu mẫu trống, sẵn sàng cho người dùng thêm một mục. Khi người dùng chọn nút Save, hàm SubmitForm đảm bảo rằng một bản ghi được tạo thay vì được cập nhật. Nếu người dùng chọn nút Hủy, hàm ResetForm sẽ chuyển mẫu trở lại chế độ Edit và hàm Back sẽ mở màn hình để duyệt bộ sưu tập.

Xóa bản ghi

  1. Trên màn hình Hiển thị, thêm nút và đặt thuộc tính Text thành Delete.

  2. Đặt thuộc tính OnSelect của nút thành công thức sau:
    Remove( 'Ice Cream', Gallery1.Selected ); Back()

    Xóa bản ghi.

Xử lý lỗi

Trong ứng dụng này, lỗi xảy ra khi giá trị của một trường không hợp lệ, trường bắt buộc trống, bạn bị ngắt kết nối mạng hoặc bất kỳ vấn đề nào khác xuất hiện.

Nếu SubmitForm không thành công vì bất kỳ lý do gì, thuộc tính Error của điều khiển Chỉnh sửa biểu mẫu có chứa một thông báo lỗi để hiển thị người dùng. Với thông tin này, người dùng sẽ có thể sửa lỗi và gửi lại thay đổi hoặc họ có thể hủy cập nhật.

  1. Trên màn hình Chỉnh sửa và Tạo, thêm điều khiển Nhãn và di chuyển nó ngay bên dưới nút Lưu. Bất kỳ lỗi nào cũng sẽ dễ dàng nhận thấy sau khi người dùng chọn điều khiển này để lưu các thay đổi.

  2. Đặt thuộc tính Text (Văn bản) của công cụ điều khiển Label (Nhãn) thành Form1.Error.

    Hiển thị biểu mẫu có thêm nút "Chỉnh sửa"

Trong ứng dụng mà Power Apps tạo từ dữ liệu, thuộc tính AutoHeight của điều khiển này được đặt thành true để không chiếm không gian khi có lỗi xảy ra. Thuộc tính HeightY của điều khiển Chỉnh sửa biểu mẫu cũng được điều chỉnh linh hoạt để giải thích cho điều khiển này tăng lên khi có lỗi xảy ra. Để biết thêm chi tiết, hãy tạo một ứng dụng từ dữ liệu hiện có và kiểm tra các thuộc tính này. Điều khiển hộp văn bản cho các lỗi rất ngắn khi không có lỗi xảy ra, bạn có thể cần phải mở dạng xem Nâng cao (có sẵn trên tab Xem) để chọn điều khiển này.

Ứng dụng từ biểu mẫu chỉnh sửa dữ liệu với điều khiển văn bản lỗi được chọn.

Ứng dụng từ biểu mẫu chỉnh sửa dữ liệu với điều khiển biểu mẫu được chọn.

Làm mới dữ liệu

Nguồn dữ liệu được làm mới mỗi khi người dùng mở ứng dụng, nhưng người dùng có thể muốn làm mới các bản ghi trong thư viện mà không cần đóng ứng dụng. Thêm nút Làm mới để người dùng có thể chọn để tự làm mới dữ liệu:

  1. Trên màn hình điều khiển Bộ sưu tập, hãy thêm điều khiển Nút và đặt thuộc tính Text thành Refresh.

  2. Đặt thuộc tính OnSelect của công cụ điều khiển này theo công thức sau:
    Refresh( 'Ice Cream' )

    Làm mới nguồn dữ liệu.

Trong ứng dụng mà Power Apps tạo từ dữ liệu, ta đã bỏ qua việc thảo luận về hai điều khiển ở đầu màn hình Duyệt. Bằng cách sử dụng các điều khiển này, người dùng có thể tìm kiếm một hoặc nhiều bản ghi, sắp xếp danh sách các bản ghi theo thứ tự tăng dần hoặc giảm dần hoặc cả hai.

Điều khiển sắp xếp và tìm kiếm trên màn hình duyệt.

Khi người dùng chọn nút sắp xếp, thứ tự sắp xếp của thư viện sẽ đảo ngược. Để tạo hành vi này, chúng tôi sử dụng biến ngữ cảnh để theo dõi hướng mà thư viện được sắp xếp. Khi người dùng chọn nút, biến được cập nhật và hướng sẽ đảo ngược. Thuộc tính OnSelect của nút sắp xếp được đặt thành công thức sau: UpdateContext( {SortDescending1: !SortDescending1} )

Hàm UpdateContext tạo ra biến ngữ cảnh SortDescending1 nếu nó không tồn tại. Hàm sẽ đọc giá trị của biến và đặt nó ngược lại bằng cách sử dụng toán tử ! . Nếu giá trị là true, nó sẽ chuyển thành false. Nếu giá trị là false, nó sẽ chuyển thành true.

Công thức cho thuộc tính Items của điều khiển Bộ sưu tập sử dụng biến ngữ cảnh này cùng với văn bản trong điều khiển TextSearchBox1:

Sort( 
    If( IsBlank(TextSearchBox1.Text),
        Assets,
        Filter( Assets, TextSearchBox1.Text in Text(ApproverEmail) ) 
    ),
    ApproverEmail,
    If(SortDescending1, Descending, Ascending) 
)

Hãy phân tích điều này:

  • Ở bên ngoài, chúng ta có hàm Sort, có ba đối số: bảng, trường để sắp xếp và hướng để sắp xếp.

    • Hướng sắp xếp được lấy từ biến bối cảnh sẽ chuyển đổi khi người dùng chọn điều khiển ImageSortUpDown1. Giá trị true/false được dịch thành hằng số DescendingAscending.
    • Trường để sắp xếp được cố định thành ApproverEmail. Nếu bạn thay đổi các trường xuất hiện trong bộ sưu tập, bạn cũng cần thay đổi đối số này.
  • Ở bên trong, chúng ta có hàm Filter, lấy một bảng làm đối số và biểu thức để đánh giá cho mỗi bản ghi.

    • Bảng là nguồn dữ liệu Tài sản, tức là điểm bắt đầu trước khi lọc hoặc sắp xếp.
    • Biểu thức tìm kiếm phiên bản của chuỗi trong TextSearchBox1 trong trường ApproverEmail. Một lần nữa, nếu bạn thay đổi các trường xuất hiện trong bộ sưu tập, bạn cũng cần cập nhật đối số này.
    • Nếu TextSearchBox1 còn trống, người dùng muốn hiển thị tất cả các bản ghi và hàm Filter bị bỏ qua.

Đây chỉ là một ví dụ; bạn có thể tự tạo công thức cho thuộc tính Items, tùy thuộc vào nhu cầu của ứng dụng của bạn, bằng cách soạn Filter, Sort và các chức năng và toán tử khác cùng nhau.

Thiết kế màn hình

Chúng ta chưa thảo luận về các cách khác để phân phối điều khiển trên các màn hình. Đó là bởi vì bạn có nhiều tùy chọn và lựa chọn tốt nhất phụ thuộc vào nhu cầu ứng dụng cụ thể của bạn.

Vì không gian trên màn hình điện thoại rất hạn chế, bạn có thể muốn duyệt, hiển thị và chỉnh sửa/tạo trên các màn hình khác. Trong chủ đề này, hàm NavigateBack mở từng màn hình.

Trên máy tính bảng, bạn có thể duyệt, hiển thị và chỉnh sửa/tạo trên hai hoặc thậm chí một màn hình. Đối với vế sau, không cần hàm Navigate hoặc Back.

Nếu người dùng đang làm việc trên cùng một màn hình, bạn cần cẩn thận rằng người dùng không thể thay đổi lựa chọn trong Bộ sưu tập và có khả năng mất các chỉnh sửa trong điều khiển Chỉnh sửa biểu mẫu. Để ngăn người dùng chọn bản ghi khi chưa thay đổi bản ghi khác, hãy đặt thuộc tính Disabled của bộ sưu tập theo công thức này:
EditForm.Unsaved

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ư).