CanvasApp: Pack và Unpack tool – Teamwork hiệu quả hơn nếu CanvasApp ở dạng source code files
Microsoft vừa release một công cụ mới vào 01/2021 cho phép developer có thể xem CavasApp dưới dang các file source code. Chi tiết xem tại https://powerapps.microsoft.com/en-us/blog/source-code-files-for-canvas-apps/
Trước đây chúng ta chỉ có thể download App dưới dạng 1 file duy nhất *.msapp. Nhưng đối với công cụ mới này, chúng ta có thể dễ dàng làm việc teamwork và quản lý version source code trên git, TFS hay SVN
- Cài đặt .Net Core 3.1.x (x64) tại đây
- Clone repo hoặc download source code từ github
- Mở source code và chạy file build.cmd
- Kiểm tra trong folder bin\Debug\PASopa, chúng ta sẽ thấy có file PASopa.exe. File này sẽ được dùng để pack/unpack canvas app
Trước khi đi vào nội dung chính là pack/unpack CanvasApp, chúng ta sẽ setup biến môi trường cho tool để có thể dễ dàng sử dụng hơn
- Vào Setting (Computer)
2. Chọn tab Advanced và click Environment Variables
3. Trong phần System variables, chọn Path và click Edit
4. Chúng ta sẽ thêm đường dẫn của folder có chứa file PASopa.exe.
Sau khi đã hoàn tất setup biến môi trường, chúng ta sẽ sử dụng tool để pack/unpack Canvas App
Mở Cmd, di chuyển đến đường dẫn có chứa file Canvas App (*.msapp)
Chạy command sau để convert file .msapp thành dạng source code
PASopa.exe -unpack <Tên file> (Ví dụ: BootstrapUI.msapp)Sau khi hoàn tất, folder chứa source code sẽ được tạo. Chúng ta có thể tìm hiểu cấu trúc của phần source code trong phần link đã giới thiệu ở đầu bài viết
Dưới đây là minh họa phần source code sau khi đã unpack. Source code của các screen trong Canvas App sẽ nằm trong sub-folder Src
Sau đó chúng ta sẽ sửa code và đóng gói lại thành file .msapp
Sau khi đã có file .msapp, chúng ta sẽ quay lại Powerapp portal và mở app ở dạng Edit. Chọn File -> Open -> Browse -> chọn file đã được tạo ở bước trên (updatedApp.msapp)
Kiểm tra phần code từ VS Code đã được apply hay chưa
Lưu ý khi sử dụng tool và chỉnh sửa source code:
Vì control name trong Canvas App phải là unique (tính trong tất cả các screen) nên nếu chúng ta thêm control bằng code thì phải đảm bảo control name không được trùng
