Hướng dẫn import Power App YAML vào Power Apps Studio

Cấu trúc file đã tạo

powerapp-sample-requests/
├── App.pa.yaml              # App.OnStart, variables, colors, navigation
├── HomeScreen.pa.yaml       # Dashboard với stats cards + quick actions
├── SalesScreen.pa.yaml      # Form tạo/sửa YC + danh sách của Sales
├── QCScreen.pa.yaml         # Hàng đợi QC + dialog xác nhận
├── LogisticsScreen.pa.yaml  # Xử lý gửi hàng + dialog shipping
└── DetailScreen.pa.yaml     # Chi tiết YC + timeline

Cách import vào Power Apps Studio

Cách 1: Import từng screen (Khuyến nghị)

1. Mở Power Apps Studio tại: https://make.powerapps.com
2. Mở app hiện tại của anh
3. Enable coauthoring: Settings > Updates > Coauthoring = ON

Import App.OnStart:

1. Vào Tree view > Chọn App
2. Trong Formula bar, paste toàn bộ nội dung từ App.pa.yaml vào property OnStart
3. Click Run OnStart (biểu tượng play) để apply

Import từng Screen:

1. Tạo screen mới: Insert > Screen > Blank
2. Đổi tên screen theo file (HomeScreen, SalesScreen, etc.)
3. Trong Tree view, chọn screen mới tạo
4. Copy nội dung từ file .pa.yaml và paste vào các controls

Cách 2: Sử dụng Canvas Authoring MCP

Nếu anh muốn tôi code trực tiếp vào Power Apps Studio:

1. Mở app trong Power Apps Studio
2. Enable coauthoring (như trên)
3. Gửi lại Environment ID + App ID cho tôi
4. Tôi sẽ kết nối và apply code trực tiếp

Cách 3: Import từ file .msapp

Nếu anh muốn import toàn bộ app:

1. Trong Power Apps Studio, click File > Open > Browse
2. Chọn file .msapp đã export
3. Hoặc sử dụng Power Apps CLI:

   pac solution import --path ./solution.zip

Cấu hình cần thiết

1. SharePoint List Connection

Sau khi import, anh cần kết nối lại SharePoint list:

1. Vào Data (panel trái)
2. Xóa connection cũ (nếu có)
3. Thêm connection mới: + Add data > SharePoint
4. Chọn site https://nafoodsvn.sharepoint.com/sites/3PLcost
5. Chọn list SampleRequests

2. Cập nhật Role Detection

Trong App.OnStart, cập nhật email cho đúng:

Set(varRole,
    Switch(varUserEmail,
        "email1@nafoods.com", "Sales",
        "email2@nafoods.com", "QC",
        "email3@nafoods.com", "Logistics",
        "admin@nafoods.com", "Admin",
        "Admin"  // Default
    )
);

3. Responsive Layout Settings

Trong Power Apps Studio:

1. Vào Settings > Display
2. Tắt:
   • Scale to fit = OFF
   • Lock aspect ratio = OFF
   • Lock orientation = OFF
3. Click Apply

4. Modern Controls

Để UI đẹp hơn:

1. Vào Settings > Updates > New
2. Bật Modern controls and themes

Test Checklist

Sau khi import xong, test theo checklist:

• App mở ra màn hình Home
• Sidebar hiển thị trên desktop
• Stats cards hiển thị đúng số liệu
• Nút "Tạo YC Mới" hoạt động (Sales)
• Form tạo YC hiển thị đúng
• Save button lưu vào SharePoint
• QC screen hiển thị hàng đợi
• QC có thể bắt đầu xử lý
• QC có thể xác nhận mẫu ready
• Logistics screen hiển thị chờ gửi
• Dialog gửi hàng hoạt động
• Tracking button mở link đúng
• Detail screen hiển thị đúng info
• Timeline hiển thị đúng progress
• Responsive: resize browser thấy layout thay đổi

Troubleshooting

Vấn đề	Giải pháp
SharePoint connection error	Kiểm tra site URL và list name
Delegation warning	Giới hạn 500 rows, hoặc dùng Dataverse
Modern controls không hiện	Enable trong Settings > Updates
Responsive không hoạt động	Tắt Scale to fit trong Settings
Role detection sai	Kiểm tra email trong App.OnStart

Hỗ trợ

Nếu cần hỗ trợ thêm:

1. Gửi screenshot lỗi
2. Mô tả bước thực hiện
3. Kiểm tra console browser (F12)