Lab Microsoft 365 – Module 10 Create a Power App From Scratch

• Phần này bạn sẽ tạo app sử dụng dữ liệu từ file Excel được lưu trữ trong Microsoft OneDrive for Business. File Excel này liệt kê kho mẫu ván sàn của công ty kèm theo hình ảnh và giá cả.
• Trước khi thực hiện bài lab bạn download file excel và lưu vào OneDrive for Business của bạn.

1. Vào trình duyệt truy cập trang https://make.powerapps.com bằng têncủabạn@customdomain.
2. Menu trái chọn + Create và chọn Other data sources.
3. Ấn New Connection chọn OneDrive for Business đăng nhập vào têncủabạn@customdomain.

3. Chọn OneDrive for Business, Chọn file FlooringEstimates.xlsx, và chọn table FlooringEstimates, ấn Connect. (Power Apps sẽ tạo App từ file excel của bạn.)

6. Cửa sổ bên trái quan sát các thông tin sau:

• Browse screen: cửa sổ mặc định khi chạy chương trình, tại đây bạn có thể tìm kiếm, sắp xếp, refresh, hay tạo mới.
• Details screen: cửa sổ xem chi tiết 1 sản phẩm, tại đây bạo có thể chỉnh sửa hay xóa sản phẩm.
• Edit/create screen: cửa sổ tạo mới hay chỉnh sửa sản phẩm

7. Ấn nút Run ở gốc trên bên phải, kiểm tra tất cả các trường hợp: tạo, sửa, xóa sản phẩm, kiểm tra lại dữ liệu trên file Excel.

8. Vào menu File, chọn Save as. đặt tên App là First App ấn Save, ấn Publish.

9. Cài Microsoft Power Apps trên điện thoại di động, đăng nhập vào têncủabạn@customdomain, và thực thi app trên điện thoại. kiểm tra lại dữ liệu trên file Excel.

Task 1. Tạo Label và Input Text

1. Vào trình duyệt truy cập trang https://make.powerapps.com bằng têncủabạn@customdomain.
2. Tại màn hình Power Apps, menu trái chọn Home, chọn Canvas App From Blank.
3. Cửa sổ Canvas App From Blank, trong phần App name: gõ vào Billing, chọn option Tablet, ấn Create.
4. Vào menu Insert, chọn Label, trong phần Text nhập vào Số Phòng, chỉnh font size phù hợp. Copy label số phòng thành các label số giờ, Giá tiền một giờ, Thành tiền, Phần trăm giảm giá, Số tiền giảm, Còn lại

5. Vào menu Insert, chọn Input, chọn Text Input, bên trái chọn inputtext1 rename thành sophongtxt, chỉnh font size phù hợp. Tương tự tạo các inputtext và đổi tên thành sogiotxt, giatienmotgiotxt, thanhtientxt, phantramtxt, giagiamtxt, conlaitxt.

Task 2. Thực Hiện Phép Tính

6. Chọn input text thanhtientxt, trong phần Default Fx nhập vào ‘sogiotxt’*giatienmotgiotxt

7. Vào menu Insert, chọn Input, chọn slider, cửa sổ bên Properties phải chọn Default=15, Max=100, Min:0

8. Chọn input text phantramtxt, trong phần Default Fx nhập vào Slider1.Value*.01

9. Chọn input text giagiamtxt, trong phần Default Fx nhập vào thanhtientxt*phantramgiamtxt

10. Chọn input text conlaitxt, trong phần Default Fx nhập vào thanhtientxt-giamgiatxt

11. Ấn Run ở gốc trên bên phải, kiểm tra kết quả.

Task 3. Sử dụng Toggle

12. Vào menu Insert, chọn Input, chọnToggle1, cửa sổ bên Properties phải chọn Default = OFF

13. Thực hiện các bước sau để Visible các thành phần sau:

• Chọn Slider1, trong phần Visible fx nhập vào If(Toggle1.Value=true,true,false)
• Chọn Slider1, trong phần Default fx nhập vào If(Toggle1.Value=true,15,0)
• Chọn label phần trăm giảm giá, trong phần Visible fx nhập vào If(Toggle1.Value=true,true,false)
• Chọn label Giá giảm, trong phần Visible fx nhập vào If(Toggle1.Value=true,true,false)
• Chọn label Còn lại, trong phần Visible fx nhập vào If(Toggle1.Value=true,true,false)
• Chọn phantramtxt, trong phần Visible fx nhập vào If(Toggle1.Value=true,true,false)
• Chọn giagiamtxt, trong phần Visible fx nhập vào If(Toggle1.Value=true,true,false)
• Chọn conlaitxt, trong phần Visible fx nhập vào If(Toggle1.Value=true,true,false

14. Ấn Run ở gốc trên bên phải, xem kết quả, đóng App

Task 4. Tạo Nút Save

15. Vào menu Insert, chọn button, cửa sổ bên Properties phải trong phần text nhập vào Save.

16. Chọn button Save, trong phần OnSelect Fx nhập vào Collect(Billing,{sophong: sophongtxt.Text, Sogio: sogiotxt.Text, Giatienmotgio: giatienmotgiotxt.Text, thanhtien: thanhtientxt.Text, Phantramgiam: phantramgiamtxt.Text, SoTiengiam: sotiengiamtxt.Text, conlai: conlaitxt.Text})

17. Ấn Run ở gốc trên bên phải, nhập các giá trị và ấn Save, đóng App.

18. Trên thanh công cụ vào icon …, chọn Collections, quan sát thấy kết quả đã được lưu.

19. Tiếp tục ấn Run ở gốc trên bên phải, nhập các giá trị và ấn Save, đóng App.

20. Vào Menu View, chọn Collections, quan sát kết quả

Task 5. Sử Dụng Gallery

21. Vào menu Insert, chọn Gallery, và chọn Vertical.

22. Cửa sổ Gallery Properties bên phải, trong phần layout chọn Title, Subtitle and body

23. Trong phần Fields ấn Edit, sắp xếp lại thứ tự các field

24. Ấn Run ở gốc trên bên phải, nhập các giá trị và ấn Save, quan sát kết quả, đóng App

Task 6. Tạo Nút Clear

25. Vào menu Insert, chọn button, cửa sổ bên Properties phải trong phần text nhập vào Clear All.

26. Chọn button Clear all, trong phần OnSelect Fx nhập vào Clear(Billing)

27. Ấn Run ở gốc trên bên phải, nhập các giá trị và ấn Clear All, quan sát kết quả.

28. Nhập lại các giá trị và ấn Save, quan sát kết quả, đóng App.

29. Chọn một giá trị trong Gallery, vào menu Insert, chọn Icon và chọn icon Trash.

30. Chọn icon Recycle bin, trong phần OnSelect Fx nhập vào Remove(Billing,ThisItem)

31. Ấn Run ở gốc trên bên phải, nhập các giá trị và ấn icon Trash, quan sát kết quả.

32. Nhập lại các giá trị và ấn Save, quan sát kết quả, đóng App.

Task 7. Duplicate Screen và Switch Screen

33. Cửa sổ bên trái, chọn icon … Screen1 chọn Duplicate Screen.

34. Tại Screen1, vào menu Insert, chọn button, cửa sổ bên Properties phải trong phần text nhập vào Edit

35. Chọn button Edit, trong phần OnSelect Fx nhập vào Navigate(Screen1_1)

36. Tại Screen1_1, vào menu Insert, chọn button, cửa sổ bên Properties phải trong phần text nhập vào Add New.

37. Chọn button Add new, trong phần OnSelect Fx nhập vào Navigate(Screen1).

Task 8. Gán Giá Trị Từ Gallery Sang Input Text

38. Tại Screen1_1, Chọn input sophongtxt_1, trong phần Default Fx nhập vào Gallery1_1.Selected.sophong

39. Tương tự Chọn input sogiotxt_1, trong phần Default Fx nhập vào Gallery1_1.Selected.sogio, Tương tự cho các input còn lại

40. Xóa Toggle1_1 và Slider1_1

41. Ấn Run ở gốc trên bên phải,kiểm tra kết quả và đóng app.

Task 9. Tạo Nút Save Khi Edit

42. Tại Screen1_1, Chọn button Save, trong phần Onselect Fx nhập vào: Patch(Billing,Gallery1_1.Selected,{sophong: sophongtxt_1.Text, Sogio: sogiotxt_1.Text, Giatienmotgio: giatienmotgiotxt_1.Text, thanhtien: thanhtientxt_1.Text, Phantramgiam: phantramgiamtxt_1.Text, SoTiengiam: sotiengiamtxt_1.Text, conlai: conlaitxt_1.Text})

43. Ấn Run ở gốc trên bên phải,thực hiện chỉnh sửa, ấn Save, kiểm tra kết quả và đóng app.

Task 1. Thiết Kế Form

1. Vào trình duyệt truy cập trang https://make.powerapps.com bằng têncủabạn@customdomain.
2. Tại màn hình Power Apps, menu trái chọn Home, chọn Canvas App From Blank.
3. Cửa sổ Canvas App From Blank, trong phần App name: gõ vào App3, chọn option Phone, ấn Create.
4. Vào menu Insert, chọn Label, trong phần Text nhập vào Home, chỉnh font size, và màu phù hợp.
5. Vào menu Insert, chọn Icon, chọn + Add, chỉnh font size, và màu phù hợp.
6. Sắp xếp label home và icon + add như hình vẽ.
7. Cửa sổ bên trái, chọn icon … Screen1 chọn Rename đổi thành Screen_home.
8. Cửa sổ bên trái, chọn icon … Screen_home chọn Duplicate Screen, và rename thành Screen_Edit.
9. Cửa sổ bên trái, chọn icon … Screen_home chọn Duplicate Screen, và rename thành Screen_AddNew.

Task 2. Tạo Excel File

1. Tạo File Excel với các trường: Tên Sản Phẩm, Số Lượng, Đơn Giá, Thành Tiền, tạo table1 gồm các trường đã tạo.
2. Lưu file excel lưu vào Onedrive for Business

Task 3. Power Apps Kết Nối Excel

1. Trở lại Power Apps, cửa sổ bên trái chọn icon Data, chọn Onedrive for Business, chọn Onedrive for Business của bạn, chọn file excel bạn đã tạo ở task 2, chọn table1, ấn Connect.

Task 4. Thiết Form Add New

1. Màn hình trái chọn Screen_AddNew, vào menu Insert chọn Forms, chọn Edit.
2. Cửa sổ Properties bên phải, trong phần Data source chọn Table1. trong phần Fields chọn Edit Fields, chọn add tất cả field và sắp xếp lại theo ý của bạn.
3. Chọn Icon + Add và đổi thành Icon Check, và Label thành Add New như hình bên dưới.

4. Chọn Icon check, trong phần Onselect Fx nhập vào SubmitForm(Form1);Navigate(Screen_home)

5. Chọn input text Thành Tiền, trong phần Default Fx nhập vào DataCardValue1*DataCardValue2

Task 5. Thiết kế Form Home

1. Màn hình trái chọn Screen_Home, vào menu Insert chọn Gallery, chọn Vertical.
2. Cửa sổ Properties bên phải, trong phần Data source chọn Table1, trong phần layout chọn Title, Subtitle and body trong phần Fields chọn Edit sắp xếp lại theo ý của bạn.
3. Chọn Icon + Add, trong phần Onselect Fx nhập vào Navigate(Screen_addnew);NewForm(Form1)

Task 6. Thiết kế Form Edit

1. Màn hình trái chọn Screen_Edit, vào menu Insert chọn Forms, chọn Edit.
2. Cửa sổ Properties bên phải, trong phần Data source chọn Table1. trong phần Fields chọn Edit Fields, chọn add tất cả field và sắp xếp lại theo ý của bạn.
3. Màn hình trái chọn Screen_Home, Chọn Gallery2, trong phần OnSelect Fx nhập vào Navigate(Screen_edit); EditForm(Form2)
4. Màn hình trái chọn Screen_Edit, Chọn form2, trong phần Item Fx nhập vào Gallery2.Selected (chọn Item từ Form home)
5. Tại Screen_Edit, chọn Icon + Add và đổi thành Icon Save, và Label thành Edit như hình bên dưới.
6. Chọn Icon Save trong phần OnSelect Fx nhập vào SubmitForm(Form2);Navigate(Screen_home)
7. Vào menu Insert chọn Icon, chọn Trash, sắp xếp icon trash gần Icon Save như hình
8. Chọn Icon Trask trong phần OnSelect Fx nhập vào Remove(Table1,Gallery2.Selected);Navigate(Screen_home)
9. Màn hình trái chọn Screen_Home, gốc trên bên phải ấn Run, kiểm tra các chức năng tạo, sửa, xóa trên Apps, mỗi trường hợp mở file excel để kiểm tra kết quả.
10. Save App. Kiểm tra App trên thiết bị di động.