The presentation "Microsoft Power Pages for Developers" focuses on enabling developers to enhance Power Page websites. It covers the utilization of Power Platform Developer tools, Power Platform CLI, and Web Templates. Key components include the Liquid framework for dynamic content and Code Components for creating model-driven app fields and Power Page forms. It emphasizes on open-source solutions, navigating large websites, and manipulating data from Microsoft Dataverse. The guide aims to provide developers with the skills to customize and extend Power Page capabilities effectively. "Microsoft Power Pages สำหรับนักพัฒนา" มุ่งเน้นให้นักพัฒนาสามารถเพิ่มศักยภาพของเว็บไซต์ Power Page ได้ ครอบคลุมการใช้เครื่องมือ Power Platform Developer, Power Platform CLI และ Web Templates ประกอบด้วยส่วนประกอบหลักอย่างเฟรมเวิร์ก Liquid สำหรับเนื้อหาที่เปลี่ยนแปลงได้ และ Code Components สำหรับสร้างฟิลด์ในแอปที่ขับเคลื่อนด้วยโมเดลและแบบฟอร์ม Power Page โดยเน้นที่โซลูชันแบบโอเพนซอร์ส และการจัดการข้อมูลจาก Microsoft Dataverse เพื่อให้นักพัฒนามีทักษะในการปรับแต่งและขยายความสามารถของ Power Page อย่างมีประสิทธิภาพ.

1. Teerasej Jiraphatchandej | Microsoft Certi
fi
ed Trainer
Microsoft Power Pages
for Developer

2. All right reserved. Amaround Co., Ltd. www.next
fl
ow.in.th Tel +66 83 071 3373
Teerasej Jiraphatchandej
“พล”
Microsoft MVP

3. Class experience
• 9:30 - 17:00
• 2 Breaks: 10:30, 14:00
• Lunch time: ???

4. Day 1

5. Agenda
Day 1
• Power Platform Developer tools
• Power Platform CLI
• Power Page
• Web Template
• Liquid framework
• Code Component

6. Power Platform
CLI

7. Power Platform CLI
Command line interface for developer

8. Power Platform CLI
Come with Power Platfom’s Visual Studio Code Extension

9. Power Platform CLI
Features
• Easy Authentication and Site Management
• It enables developers to download and upload website content directly from
the Dataverse environment
• Support for Dynamic Content via Liquid framework
• supports solution-related commands

10. Let’s use it!

11. Web Template

12. Web Template
• Create custom
• Page layouts
• Headers
• Footers
• Can be use as a component
• Web Form
• Entity forms
• …

13. Web Template
Web Template
Page Template
Code Component
Inner Web Template

14. Liquid framework

15. What is on Power Pages?
Web Page
(HTML)
…
Authentication/Authorization
Data
Navigation
Logic

16. What is on Power Pages?
Web Page
(HTML)
…
Authentication/Authorization
Data
Navigation
Logic
Liquid

17. Liquid framework
Features
• Open-source
• Add dynamic content to webpages
• Create custom web template in Power Pages
• Manipulate data from Microsoft Dataverse and Context

18. Liquid structure

19. Liquid structure
• Tags: condition, if..else, loop
• Object: display Liquid object’s value
• Filter: Modify output of Liquid’s object
• Operator: Logical & Comparison operation

20. Liquid syntax
tags
{% %}
{% if user %}
{% endif %}

21. Liquid structure
object
{{ }}
{{ user.name }}
{{ page.title }}

22. Liquid structure
Filter
{{ object | args}}
{{ products.results.entities | size }}

23. Liquid structure
Operation
{% if product.nf_stock > 0 %}
{% endif %}

24. Let’s use it!

25. Hybrid navigation

26. Custom navigation

27. Hybrid Navigation
Why do we need it?
• Large and complex website with many pages and subpages.
• provide di
ff
erent navigation options for di
ff
erent pages.
• customize the appearance and behavior of the navigation

28. Built-in Power Page navigation
• renders the top-level pages of the site map as a horizontal menu bar

29. Hybrid Navigation
Using Liquid’s object
Page
<Liquid Object>
Parent Page
Child Page
Child Page
Child Page
Children Page

30. Let’s use it!

31. The Code
Component

32. Code Component
Features
• Create with Power Apps component framework
• Can be used as
• A model-driven apps’
fi
elds
• Power page’s form
• Restricted
fi
eld types and format

33. Code Component
Architecture
Web Template
Power Page
Portal
Dataverse Table
Manifest

34. Let’s use it!

35. Day 2

36. Agenda
Day 2
• Code Component
• Packaging
• Debugging
• React Component
• Code Component in Power Platform
• Publishing

37. React component

38. React component
• Open-source
• Add dynamic content to webpages
• Create custom web template in Power Pages
• Manipulate data from Microsoft Dataverse and Context

39. Packaging

40. Debug

41. Code component
in Action

42. Using code component
In Power Page
• Open-source
• Add dynamic content to webpages
• Create custom web template in Power Pages
• Manipulate data from Microsoft Dataverse and Context

43. Using code component
In Model driven application

44. Using code component
In liquid template

45. Publishing code
component

46. Publishing code component

47. Using code component in Power Page