- Tubelator AI
- >
- Videos
- >
- Science & Technology
- >
- Power Apps Responsive Gallery Design | Mobile and Desktop Experience (2025)
Power Apps Responsive Gallery Design | Mobile and Desktop Experience (2025)
In today's video we look at some decisions you need to make when creating a responsive gallery experience. There are three main avenues to display tabular data that developers utilize:
1. Allow the user to scroll horizontally on a mobile device. This can have a user scrolling and losing track of which row they are viewing.
2. Wrap the contents of the row so that it stays within the width of the user’s screen. This provides a “randomized” wrapping of controls depending on their width.
3. Fork the mobile and desktop experiences into two separate experiences. In Power Apps, we can do this by using separate containers and a flexible height gallery to accommodate varying container heights. On a desktop experience we can have a table-like view, while on a mobile device we can have a card view.
Timestamps:
00:00 Intro
00:49 Building a Flexible Height Gallery
06:49 Design Choice #1
10:43 Design Choice #2
13:16 Design Choice #3
Install Tubelator On Chrome
Video Summary & Chapters
No chapters for this video generated yet.
Video Transcript
Điều khiển phòng trưng bày là một cách linh hoạt để hiển thị dữ liệu trong PowerApps.
Nó cũng là một trong những lĩnh vực mà chúng ta có thể thực hiện những cải tiến thiết kế lớn nhất về mặt người dùng
Vì vậy, bạn có một bộ sưu tập hiển thị dữ liệu bảng, có lẽ trong danh sách khách hàng hoặc
dự án hoặc nhiệm vụ, và trên máy tính để bàn bạn có đủ không gian để xem đó. nhưng khi bạn nhìn
trên thiết bị di động hoặc thiết bị màn hình nhỏ hơn, văn bản được cắt và người dùng
kinh nghiệm đau khổ. Vì vậy, làm thế nào chúng tôi sửa chữa điều này? Trong video này chúng tôi sẽ xem xét các lựa chọn thiết kế
chúng tôi có thể làm khi cố gắng hiển thị dữ liệu bảng trong phòng trưng bày của chúng tôi và chúng tôi sẽ đi qua
Những thay đổi đơn giản nhất mà chúng ta có thể thực hiện
tất cả các cách để thiết kế một bộ sưu tập thay đổi hành vi của nó tùy thuộc vào kích thước màn hình
rằng người dùng đang trên. Vì vậy, chúng ta hãy xem xét. Sự lựa chọn đầu tiên chúng ta phải thực hiện khi xây dựng một
thư viện phản ứng là loại thư viện để sử dụng. Bây giờ tôi là một fan hâm mộ lớn của việc sử dụng Flexible
Phòng trưng bày cao như tùy chọn này cho chúng ta một dòng phòng trưng bày năng động có thể mở rộng đến chiều cao của nó
Nội dung. Các loại phòng trưng bày khác có thể hoạt động tùy thuộc vào trường hợp sử dụng, nhưng cho một thực sự đáp ứng
kinh nghiệm, bộ sưu tập cao linh hoạt là tốt nhất. Đối với các mặt hàng của bộ sưu tập này, tôi sẽ chỉ đi trước
và đặt điều này vào một danh sách Mẹo và thủ thuật mà tôi đã lưu trữ trong SharePoint. chúng tôi sẽ sửa đổi một số khác
thuộc tính của bộ sưu tập sau này, nhưng cho bây giờ chúng ta chỉ cần đi trước và đặt Template Padding lên 0.
Nói chung, khi tôi thiết lập một bộ sưu tập có nghĩa là đáp ứng, tôi thích bắt đầu bằng cách
Đặt một container ngang vào phòng trưng bày. Điều này cho phép chúng tôi không phải lo lắng về mặt hàng
đặt quá nhiều bên trong phòng trưng bày, và chúng ta có thể lo lắng về việc chỉ hiển thị dữ liệu.
Chúng tôi muốn các giá trị x và y cho container này được đặt thành 0,
và chúng tôi sẽ đặt chiều rộng thành parent.templateWidth và chiều cao lên 40 cho bây giờ.
Tôi cũng thích tập trung theo chiều dọc nội dung của container và loại bỏ bóng giọt.
Cuối cùng, chúng tôi sẽ cung cấp cho điều này một khoảng cách bố trí của 8. bên trong container ngang mới của chúng tôi,
chúng tôi chỉ cần thêm một vài nhãn văn bản. tôi sẽ chọn tất cả những và
chúng tôi sẽ làm một số định dạng. chúng tôi sẽ đi trước và thiết lập sự sắp xếp dọc cho những
đến giữa và chúng tôi sẽ mở rộng chiều rộng của chúng. chúng tôi cũng sẽ thêm một số trái và phải
bấm vào những điều này vì vậy chúng tôi sẽ đặt đó lên 8 cho cả hai. Đối với nhãn đầu tiên trong chúng tôi
gallery chúng tôi sẽ thiết lập trọng lượng phông chữ để bán bóng. Đối với tài sản văn bản của nó
một. Chúng tôi sẽ đặt điều này cho tên điểm mục này. Chúng tôi sẽ đi trước và điền vào một số giá trị cho các
các nhãn khác cũng cho mô tả, thể loại, và chúng tôi có một số hoặc một tiền tệ
trường từ danh sách này cũng vậy. Đối với tất cả các điều khiển văn bản này, chúng tôi cũng sẽ tiến về phía trước và kích hoạt
tài sản cao tự động. Bạn có thể thấy mọi thứ đang trông hơi thở tại thời điểm này
nhưng chúng tôi sẽ sửa chữa điều đó khá sớm. Tiếp theo chúng tôi sẽ tạo tiêu đề của chúng tôi cho bảng của chúng tôi. Vì vậy chúng tôi sẽ sao chép
container ngang từ phòng trưng bày của chúng tôi, và chúng tôi sẽ dán đó bên trong container mẹ
của gallery của chúng tôi.
Tôi sẽ chỉ đi trước và sắp xếp lại điều này để nó ở phía trên bộ sưu tập của chúng tôi, và chúng tôi sẽ làm một số
Thay đổi điều này để định dạng nó.
Chúng tôi sẽ tắt tùy chọn chiều cao linh hoạt, và chúng tôi sẽ xử lý những lỗi này bằng cách thay thế
các tham chiếu đến mục này với văn bản thực tế mà chúng tôi muốn hiển thị như tiêu đề của chúng tôi.
Đối với thuộc tính chiều rộng, thay vì tham chiếu parent.templateWidth, chúng tôi sẽ chỉ thiết lập điều này
để parent.width. Điều tiếp theo chúng tôi muốn làm là kích hoạt độ cao tự động trên các nhãn bên trong
Vì vậy, bây giờ chúng tôi có một bảng cơ bản hiển thị dữ liệu của chúng tôi từ danh sách SharePoint của chúng tôi.
Chúng tôi có thể thấy bằng cách nhìn vào bảng của chúng tôi rằng trường mô tả của chúng tôi chứa nhiều thông tin nhất.
Vì vậy, trong trường hợp này chúng tôi sẽ muốn cung cấp cả lĩnh vực mô tả và tiêu đề của nó một số hơn
không gian. Trong khi lĩnh vực mô tả của chúng tôi là lớn nhất, nó vẫn còn rất nhiều thông tin trong
một trường để hiển thị mà không có thông tin được cắt bỏ. Vì vậy, những gì chúng ta có thể làm bây giờ là điều chỉnh
chiều cao của container của chúng tôi trong phòng trưng bày của chúng tôi để chiều cao của nó được thiết lập cho chiều cao tối đa của bất kỳ
của các nhãn của chúng tôi bên trong phòng trưng bày. Vì vậy chúng tôi sẽ chọn container của chúng tôi và chúng tôi sẽ đi đến sở hữu cao.
Thay vì 40, chúng tôi muốn điều này là giá trị tối đa của chiều cao của tất cả các điều khiển văn bản của chúng tôi.
Và chúng tôi sẽ tiếp tục và thêm 4 vào điều này chỉ vì một số padding thêm.
