📘 BÀI GIẢNG

Phục vụ bộ phận mua sắm – kế toán
Nền tảng: SharePoint List + Power Apps (Canvas app)

0) Mục tiêu và sản phẩm cuối buổi

Sau khi làm xong, học viên có 1 app gồm 3 chức năng chính:

Danh sách nhà cung cấp (gallery) có tìm kiếm + lọc theo nhóm dịch vụ
Xem chi tiết nhà cung cấp (detail screen)
Thêm/Sửa nhà cung cấp (form screen)

1) Chuẩn bị trước khi làm

Có Microsoft 365: SharePoint + Power Apps
Có quyền tạo List trong SharePoint site lớp học/công ty

Giải thích: SharePoint List là nơi lưu dữ liệu (giống database). Power Apps là giao diện để người dùng thao tác.

PHẦN A — TẠO SHAREPOINT LIST (CƠ SỞ DỮ LIỆU)

A1) Tạo List mới

Vào SharePoint site (Team site)
Chọn New → List
Chọn Blank list
Đặt tên: NhaCungCap
Bấm Create

✅ Kết quả đúng: bạn thấy danh sách có cột mặc định Title.

A2) Đổi cột Title thành “TenNCC”

Trong List NhaCungCap, bấm vào tiêu đề cột Title
Chọn Column settings → Rename
Đổi tên thành: TenNCC

Giải thích: cột Title luôn tồn tại, ta tận dụng nó làm “Tên nhà cung cấp” để khỏi tạo cột mới.

A3) Tạo các cột còn lại (đúng kiểu dữ liệu)

Làm lần lượt từng cột theo hướng dẫn (mỗi cột xong mới tạo cột tiếp theo):

1) Cột NguoiLienHe

Add column → Single line of text
Name: NguoiLienHe

✅ Dùng để lưu “Người liên hệ chính”.

2) Cột DienThoai

Add column → Single line of text
Name: DienThoai

✅ Dùng text để không bị mất số 0 đầu (090…).

3) Cột Email

Add column → Single line of text
Name: Email

✅ Lưu email liên hệ.

4) Cột NhomDichVu (Choice)

Add column → Choice
Name: NhomDichVu
Choices (mỗi dòng 1 lựa chọn):
- Văn phòng phẩm
- Thiết bị IT
- Dịch vụ sửa chữa
- Vận chuyển
- Phần mềm

✅ Dùng để lọc nhanh theo nhóm dịch vụ.

5) Cột GhiChu

Add column → Multiple lines of text
Name: GhiChu

✅ Ghi chú: điều kiện thanh toán, giao hàng, ưu đãi…

PHẦN B — NHẬP DỮ LIỆU MẪU (≥ 15 DÒNG) ĐỂ THỰC HÀNH

B1) Bảng dữ liệu mẫu (copy-paste)

👉 Copy bảng dưới vào Excel để import.

TenNCC	NguoiLienHe	DienThoai	Email	NhomDichVu	GhiChu
Công ty Minh Phát	Anh Hùng	0901111111	hung@minhphat.vn	Văn phòng phẩm	Giao nhanh
IT Tech Việt	Chị Lan	0902222222	lan@ittech.vn	Thiết bị IT	Bảo hành tốt
Sửa chữa 24h	Anh Nam	0903333333	nam@suachua.vn	Dịch vụ sửa chữa	Hỗ trợ cuối tuần
Vận tải Thành Công	Anh Tuấn	0904444444	tuan@vantai.vn	Vận chuyển	Giá ổn định
SoftPro	Chị Mai	0905555555	mai@softpro.vn	Phần mềm	Hỗ trợ online
Văn phòng phẩm An Phú	Anh Sơn	0906666666	son@anphu.vn	Văn phòng phẩm	Giao trong ngày
DigiWorld	Chị Hạnh	0907777777	hanh@digi.vn	Thiết bị IT	Giá tốt
FixIT	Anh Dũng	0908888888	dung@fixit.vn	Dịch vụ sửa chữa	Có hợp đồng
FastShip	Anh Long	0909999999	long@fastship.vn	Vận chuyển	Giao nhanh
CloudSoft	Chị Trang	0910000000	trang@cloud.vn	Phần mềm	Bản quyền
Văn phòng phẩm Sao Mai	Anh Hải	0911111111	hai@saomai.vn	Văn phòng phẩm	Giá rẻ
TechZone	Chị Vy	0912222222	vy@techzone.vn	Thiết bị IT	Chính hãng
RepairPro	Anh Phúc	0913333333	phuc@repair.vn	Dịch vụ sửa chữa	Bảo hành dài
ExpressMove	Anh Bình	0914444444	binh@express.vn	Vận chuyển	Chuyên công ty
SmartSoft	Chị Linh	0915555555	linh@smartsoft.vn	Phần mềm	Hỗ trợ 24/7

B2) Import dữ liệu vào SharePoint (cách dễ làm trên lớp)

Mở Excel → tạo bảng với đúng tiêu đề cột như trên
Dán 15 dòng dữ liệu
Lưu file: NhaCungCap_Mau.xlsx
Vào SharePoint List NhaCungCap
Chọn New → List item (nếu lớp ít người) hoặc Import from Excel (tùy giao diện)
Nếu có nút Import from Excel:
- Upload file Excel
- Map cột: TenNCC, NguoiLienHe, DienThoai, Email, NhomDichVu, GhiChu
Kiểm tra list đã có đủ dữ liệu

✅ Kết quả đúng: SharePoint list có ≥ 15 items.

Nếu tenant của bạn không hiện “Import from Excel”, bạn nói mình, mình sẽ hướng dẫn phương án thay thế đúng giao diện bạn đang dùng.

PHẦN C — TẠO POWER APPS (CANVAS APP)

C1) Tạo app

Vào Power Apps
Chọn Create → Canvas app from blank
Đặt tên: App_NhaCungCap
Chọn Tablet
Bấm Create

✅ Giải thích: Tablet dễ bố trí bộ lọc + danh sách + form khi dạy.

C2) Kết nối SharePoint list

Trong Power Apps Studio, chọn tab Data (biểu tượng database)
Add data
Chọn SharePoint
Chọn site chứa list
Tick chọn list NhaCungCap
Bấm Connect

✅ Kết quả đúng: Data panel thấy NhaCungCap.

PHẦN D — MÀN HÌNH 1: DANH SÁCH + TÌM KIẾM + LỌC

D1) Tạo màn hình danh sách

Chọn Screen1 → đổi tên thành scrDanhSach
Thêm tiêu đề:
- Insert → Label
- Text: QUẢN LÝ NHÀ CUNG CẤP

D2) Tạo ô tìm kiếm theo tên nhà cung cấp

Insert → Text input
Đổi tên control: txtSearch
HintText: Nhập tên nhà cung cấp để tìm...

✅ Giải thích: người dùng gõ vào đây để tìm nhanh.

D3) Tạo dropdown lọc theo nhóm dịch vụ

Insert → Dropdown
Đổi tên: ddNhom
Đặt Items của dropdown:

["Tất cả","Văn phòng phẩm","Thiết bị IT","Dịch vụ sửa chữa","Vận chuyển","Phần mềm"]

✅ Giải thích: dùng danh sách cố định để học viên dễ làm (tránh lỗi Distinct).

D4) Tạo Gallery hiển thị danh sách

Insert → Vertical gallery
Đổi tên: galNCC
Đặt Items cho gallery (có tìm kiếm + lọc):

With(
    {src: Search(NhaCungCap, txtSearch.Text, "TenNCC")},
    If(
        ddNhom.Selected.Value = "Tất cả",
        src,
        Filter(src, NhomDichVu.Value = ddNhom.Selected.Value)
    )
)

✅ Giải thích:

Search(...) tìm theo TenNCC
With(...) giúp code gọn
If(...) nếu “Tất cả” thì không lọc, ngược lại lọc theo nhóm

D5) Hiển thị đúng các trường trong gallery

Trong galNCC, chọn các label:

Title: ThisItem.TenNCC
Subtitle: ThisItem.NhomDichVu.Value
Body: ThisItem.NguoiLienHe & " - " & ThisItem.DienThoai

✅ Giải thích: nhìn 1 dòng là biết NCC + nhóm + liên hệ.

D6) Nút “Thêm nhà cung cấp”

Insert → Button
Text: + Thêm nhà cung cấp
OnSelect:

NewForm(frmNCC);
Navigate(scrForm, ScreenTransition.Fade)

(frmNCC và scrForm sẽ tạo ở phần sau)

PHẦN E — MÀN HÌNH 2: CHI TIẾT NHÀ CUNG CẤP

E1) Tạo màn hình chi tiết

Insert → New screen → Blank
Đổi tên: scrChiTiet

E2) Điều hướng từ gallery sang chi tiết

Chọn galNCC → OnSelect:

Navigate(scrChiTiet, ScreenTransition.Fade)

✅ Giải thích: bấm vào một NCC để xem chi tiết.

E3) Tạo Display form

Insert → Display form
Đổi tên: frmChiTiet
DataSource: NhaCungCap
Item:

galNCC.Selected

Edit fields → chọn:

TenNCC
NguoiLienHe
DienThoai
Email
NhomDichVu
GhiChu

E4) Nút “Sửa”

Insert → Button, Text: Sửa

OnSelect:

EditForm(frmNCC);
Navigate(scrForm, ScreenTransition.Fade)

E5) Nút “Quay lại”

Insert → Button, Text: Quay lại

OnSelect:

Back()

PHẦN F — MÀN HÌNH 3: THÊM / SỬA NHÀ CUNG CẤP (EDIT FORM)

F1) Tạo màn hình form

Insert → New screen → Blank
Đổi tên: scrForm

F2) Tạo Edit form

Insert → Edit form
Đổi tên: frmNCC
DataSource: NhaCungCap
Edit fields: chọn tất cả trường:

TenNCC
NguoiLienHe
DienThoai
Email
NhomDichVu
GhiChu

✅ Giải thích: Form dùng chung cho “Thêm” và “Sửa”.

F3) Nút “Lưu”

Insert → Button, Text: Lưu

OnSelect:

SubmitForm(frmNCC);
Notify("Đã lưu nhà cung cấp!", NotificationType.Success);
Navigate(scrDanhSach, ScreenTransition.Fade)

✅ Giải thích: lưu xong quay về danh sách.

F4) Nút “Hủy”

Insert → Button, Text: Hủy

OnSelect:

ResetForm(frmNCC);
Back()

PHẦN G — CHẠY THỬ & KIỂM THỬ SAU KHI HOÀN THÀNH (BẮT BUỘC)

Test 1: Tìm kiếm theo tên

Gõ vào ô tìm kiếm: Tech

✅ Kết quả đúng: hiện IT Tech Việt, TechZone (nếu có)

Test 2: Lọc theo nhóm dịch vụ

Chọn dropdown: Thiết bị IT

✅ Kết quả đúng: chỉ hiện NCC thuộc “Thiết bị IT”

Test 3: Thêm nhà cung cấp mới

Bấm + Thêm nhà cung cấp
Nhập:
- TenNCC: ABC Office
- NguoiLienHe: Chị Thảo
- DienThoai: 0988123456
- Email: thao@abcoffice.vn
- NhomDichVu: Văn phòng phẩm
- GhiChu: Giao trong ngày
Bấm Lưu

✅ Kết quả đúng:

Về danh sách thấy ABC Office
SharePoint list có thêm 1 item mới

Test 4: Sửa thông tin nhà cung cấp

Chọn một NCC trong danh sách → vào chi tiết
Bấm Sửa
Đổi GhiChu (ví dụ: “Chiết khấu 5%”)
Bấm Lưu

✅ Kết quả đúng:

GhiChu thay đổi trong app
SharePoint cập nhật đúng

Checklist lỗi thường gặp (để học viên tự xử lý)

Không thấy dữ liệu: kiểm tra DataSource đã connect đúng list
Dropdown lọc không chạy: kiểm tra NhomDichVu.Value
Search không ra: kiểm tra cột “TenNCC” đúng tên nội bộ (đã rename Title chưa)

PHẦN H — BÀI TẬP TRÊN LỚP

Thêm 2 NCC mới thuộc 2 nhóm dịch vụ khác nhau
Tạo label thống kê: “Tổng số nhà cung cấp đang hiển thị”
Gợi ý:

CountRows(galNCC.AllItems)

(Nâng cao) Tạo bộ lọc chỉ hiện NCC có chữ “giao” trong ghi chú
Gợi ý:

Filter(NhaCungCap, "giao" in Lower(GhiChu))