CanvasApp: Sử dụng Horizontal Container để tạo layout tương tự như bootstrap grid
Vào tháng 11/2020, Microsoft vừa release 2 control mới cho Canvas App là horizontal container và vertical container. Các control mới này sẽ giúp developer thiết kế responsive layout một cách dễ dàng. Chi tiết xem tại: https://powerapps.microsoft.com/en-us/blog/new-layout-containers-in-canvas-apps-make-responsive-apps-easier/
Tại thời điểm viết bài, các control này vẫn đang ở dạng preview nên chúng ta cần enable trong app setting để có thể sử dụng. Chọn File > Settings > Advanced Settings > Layout containers
Để xây dựng layout ở dạng grid system như bootstrap, chúng ta sẽ sử dụng Horizontal Container. Vậy control này có đặc điểm gì cần lưu ý? Bên dưới là những thay đổi sẽ được áp dụng cho các control bên trong container
- Các control sẽ được sắp xếp liên tiếp nhau theo chiều ngang
- KHÔNG thể điều khiển vị trí của các control bằng thuộc tính X và Y
- Các Control nếu được đặt bên trong container sẽ phát sinh thêm một số thuộc tính (VD: AlignInContainer, LayoutMinWidth cho Horizontal Container và LayoutMinHeight cho Vertical Container)
Đầu tiên, chúng ta sẽ setup một số biến global. Trong App > OnStart khai báo các biến như sau:
// Định nghĩa grid system layout với 8 columns
Set(vGridSystemColumn, 8);
// Khoảng cách giữa các control trong container
Set(vGap, 5);
// Tính toán MinWidth cho mỗi control trong container
Set(vMinWith, App.Width/vGridSystemColumn - (vGridSystemColumn - 1) * vGap)Trong phần screen, tạo một Horizontal Container với các thuộc tính như sau (có thể update 1 số thuộc tính khác tùy theo yêu cầu)
// Khoảng cách giữa các contron trong container
LayoutGap = vGap
// Nếu tổng độ dài của các control vượt quá độ dài container thì các control tiếp theo sẽ được đặt ở dòng kế tiếp
LayoutWrap = true
// Config độ dài và chiều cao của container
Width = Parent.Width
Height = Parent.Height (hoặc fix tùy yêu cầu)
Setup cho các control nằm trong container với các thuộc tính như sau (Nếu chỉnh bằng giao diện Properties thì bật Flexible width = On trước)
// Khai báo control này chiếm bao nhiêu cột trong tổng số 8 columns (tương tự như colspan trong html)
FillPortions = 1
// MinWith của control (đã được tính trên phần App - OnStart)
LayoutMinWidth = vMinWith
Để hoàn thành được layout dạng grid, chúng ta cần lưu ý một số yêu cầu bắt buộc như sau:
- Tổng các FillPortions của các control trên 1 dòng phải bằng số lượng column (trong ví dụ này là vGridSystemColumn = 8)
- Nếu có control nào cần chiếm hơn 1 column thì sẽ thay đổi thuộc tính FillPortions phù hợp, tuy nhiên không được vượt quá vGridSystemColumn
- Nếu muốn sang dòng kế tiếp, chúng ta phải tạo 1 line ẩn như line break (tạo 1 Rectangle với Height = 0, FillPortions = 0, Width = Parent.Width)
- Nếu muốn đặt control như offset column (tức là xuất hiện ở vị trí column thứ 2 trở đi), cần tạo 1 label không chứa text trước control đó và chỉnh thuộc tính Fill = RGBA(0, 0, 0, 0)
Tuy nhiên, với cách design layout như trên thì có một nhược điểm là nếu chúng ta điều chỉnh thuộc tính Visible = False cho bất kỳ control nào nằm trong container thì layout sẽ không hiển thị đúng như mong muốn
Bên dưới là một ví dụ cho một màn hình nhập thông tin cá nhân sử dụng cách design này
