Recruit 08: Nâng cấp agent với Adaptive Card và Power Fx

Nhiệm vụ: thay trải nghiệm văn bản tĩnh bằng Adaptive Card giàu hình ảnh và hành động. Adaptive Card là một đối tượng JSON định nghĩa bố cục, nội dung và nút bấm, có thể nhúng vào Teams, Outlook và agent. Trong lab này, chúng ta thêm một Adaptive Card vào Topic Request device để người dùng chọn thiết bị, dùng JSON và Power Fx hiển thị dữ liệu động. Bài hướng dẫn từng bước, kèm ảnh thật, theo Agent Academy — Recruit 08.

Trong lab Adaptive Card này, bạn sẽ làm được gì?

• Hiểu Adaptive Card là gì và cách nâng tầm tương tác trong Copilot Studio.
• Thêm node Ask with adaptive card vào một Topic.
• Thiết kế card bằng Adaptive Card Designer (kéo thả, preview).
• Dùng JSON payload và công thức Power Fx cho nội dung động.
• Cập nhật instructions để agent gọi Topic và test card.

Chuẩn bị trước khi bắt đầu

Trước khi thực hành, hãy đảm bảo bạn đã có:

• Đã hoàn thành Recruit 07 và có biến Global VarDevices lưu danh sách thiết bị.
• Agent Contoso Helpdesk Agent với Topic Available devices.
• Khoảng 20–25 phút để hoàn thành lab.

Hướng dẫn từng bước

Làm lần lượt theo từng bước dưới đây. Mỗi bước có ảnh minh hoạ từ giao diện thật để bạn đối chiếu.

Bước 1: Tạo Topic Request device

Trong agent, bấm tab Topics rồi chọn + Add a topic from blank. Đặt tên Topic là Request device và nhập mô tả trigger: Topic này giúp người dùng yêu cầu một thiết bị khi họ trả lời ‘có’ với câu hỏi muốn nhận thiết bị.

Bước 2: Thêm node Ask with adaptive card

Bấm dấu + và thêm node Ask with adaptive card. Node này sẽ hiển thị một card tương tác để người dùng chọn thiết bị muốn yêu cầu. Chọn node rồi bấm Edit adaptive card để mở trình thiết kế và chỉnh JSON.

Bước 3: Khám phá Adaptive Card Designer

Đây là Adaptive Card Designer — nơi bạn dựng card và xem kết quả theo thời gian thực. Thử kéo thả các phần tử như TextBlock và FactSet vào vùng canvas; cấu trúc card và ô card payload editor sẽ tự cập nhật. Bạn có thể chỉnh trực tiếp JSON hoặc thuộc tính từng phần tử.

Mẹo: Adaptive Card tự thích ứng giao diện từng kênh (dark mode, font) nên bạn không phải lo về layout.

Bước 4: Xem trước card ở nhiều độ rộng

Bấm Preview để xem card hiển thị ra sao ở các độ rộng màn hình khác nhau — giúp đảm bảo card responsive và thân thiện trên cả desktop lẫn di động. Thoát Preview bằng nút x và bấm Undo để xoá các phần tử vừa kéo thả thử.

Bước 5: Dán JSON payload cho card

Bấm vào Card payload editor, chọn tất cả (Ctrl+A) và xoá, rồi dán JSON mẫu của card Request device. Card Preview sẽ hiển thị phần text và một danh sách thiết bị. Đây là bản nền (placeholder) trước khi ta chuyển sang công thức. Bấm Save rồi Close để thoát Designer.

Bước 6: Chuyển card sang công thức Power Fx

Để hiển thị dữ liệu động, ta dùng Power Fx duyệt qua các item trong biến Global Global.VarDevices.value (lấy từ Get items ở Recruit 07). Chọn card trong node, bấm biểu tượng chevron và chọn Formula, mở rộng ô công thức, xoá nội dung cũ rồi dán công thức Request device. Công thức dùng hàm ForAll để hiển thị Model làm tiêu đề lựa chọn và ID làm giá trị, kèm If(IsBlank()) để card luôn render được. Bấm Close và Save Topic.

Mẹo: Power Fx mang logic kiểu Excel vào card: bạn có thể chèn giá trị động, định dạng và ẩn/hiện theo điều kiện.

Bước 7: Cập nhật instructions và test

Sang tab Overview, bấm Edit ở instructions và thêm dòng: nếu người dùng trả lời ‘có’ với câu hỏi yêu cầu thiết bị thì kích hoạt [Request device], nếu ‘không’ thì [Goodbye]. Thay từng placeholder bằng cách gõ /Req và /Goodbye rồi chọn đúng Topic, sau đó Save. Mở Test, nhập “I need a laptop”, rồi “yes please” — agent sẽ chuyển sang Topic Request device và hiển thị Adaptive Card.

Lưu ý quan trọng

• Adaptive Card vừa trình bày dữ liệu đẹp vừa thu thập input để dùng tiếp trong luồng hội thoại.
• Chia nhỏ thành các Topic ‘bite-sized’ giúp agent gọn gàng và dễ điều hướng người dùng.
• Bật Track between topics trong Activity map khi test để thấy agent chuyển từ Topic này sang Topic khác.

Áp dụng cho người dùng Việt Nam

Với người dùng Việt Nam, Adaptive Card giúp agent trông chuyên nghiệp trong Teams: thay vì trả lời toàn chữ, agent hiện form chọn thiết bị gọn gàng, nút bấm rõ ràng. Đây là cách nâng trải nghiệm mà không cần kỹ năng thiết kế UI, lại tận dụng được dữ liệu SharePoint sẵn có.

Bài tiếp theo

Sau khi hoàn thành lab này, hãy tiếp tục với Recruit 09: Tự động hoá với Agent Flows.

Kết luận

Bạn vừa thêm một Adaptive Card dùng Power Fx để hiển thị dữ liệu động và biết cách chuyển hướng giữa các Topic. Hội thoại của agent giờ vừa đẹp vừa thu thập dữ liệu hiệu quả. Bài kế tiếp sẽ dùng dữ liệu đó để kích hoạt tự động hoá qua Agent Flows.

Bài viết thuộc series Hands-on Labs theo Agent Academy — Recruit 08: Enhance with Adaptive Cards. Theo dõi Office365Vietnam.info để cập nhật các bài lab mới nhất về Copilot Studio và AI agent.