Power Apps Tutorial: Ứng Dụng Ghi Nhận Chi Phí

Giới thiệu: Ứng Dụng Ghi Nhận Chi Phí

Ứng dụng Ghi nhận chi phí được Nhân viên bán hàng tại một công ty sử dụng để ghi lại chi phí đi lại của họ. Mỗi mục nhập chi phí đi lại yêu cầu Nhân viên bán hàng chọn một danh mục từ dropdown (Chuyến bay, Khách sạn, Gas, Bữa ăn) cũng như đơn vị tiền tệ (Đô la Mỹ, Đô la Canada, Đô la Euro).

Thiết lập SharePoint List cho báo cáo chi phí

Tạo một SharePoint List mới có tên là  Expense Reports với các cột sau:

• ExpenseDate (single-line text)
• Category (single-line text)
• Amount (number)
• Currency (single-line text)

Trong ứng dụng của mình, chúng ta sẽ tạo Dropdown cho các cột Category (Danh Mục) và Currency (Tiền tệ). Lưu ý rằng chúng đều là kiểu dữ liệu văn bản một dòng (single-line text) trái ngược với loại dữ liệu dạng lựa chọn (choices). Loại dữ liệu lựa chọn thường được sử dụng với Combobox vì nó trả về một bản ghi (record). Còn Dropdown xử lý các loại dữ liệu đơn giản chuỗi ký tự (text), số (number), ngày (date) và giá trị có/không (true/false).
Ảnh chụp màn hình bên dưới cho thấy danh sách  Expense Reports sẽ trông như thế nào sau khi một số chi phí đã được nhập vào.

Tạo ứng dụng Canvas mới trong Power Apps Studio

Mở Power Apps Studio và tạo một ứng dụng mới. Bây giờ hãy tạo một tiêu đề. Tạo một nhãn mới (label) và đặt nó ở trên cùng.

Điền nhãn với các thuộc tính sau để đạt được giao diện giống như ảnh chụp màn hình ở trên.

Text: "Expense Report"
Font: 'Segoe UI'.Font
FontWeight: FontWeight.Semibold
PaddingLeft: 30
Size: 20

Thêm một Edit Form để thu thập dữ liệu chi phí

Nhân viên bán hàng nhập từng chi phí đi lại vào một biểu mẫu để ghi lại ngày thực hiện giao dịch (Expense Date), danh mục (Category), số tiền (Amount) và đơn vị tiền tệ (Currency). Trước khi thêm Edit Form, chúng ta phải kết nối SharePoint List vào ứng dụng. Chuyển đến Menu Data, chọn Add Data , sau đó thêm SharePoint List Expense Reports.

Chèn một Edit Form lên màn hình và đặt nó ngay bên dưới tiêu đề. Chọn Expense Reports làm nguồn dữ liệu.

Sắp xếp các trường trong biểu mẫu theo thứ tự: Ngày chi (Expense Date), Danh mục (Category), Số tiền (Amount), Tiền tệ (Currency).

Sau đó, thay đổi thuộc tính  DefaultMode thành New để khi bấm gửi thì một bản ghi mới sẽ được ra.

FormMode.New

Tạo SharePoint List cho các giá trị của Dropdown

Khi chúng ta tạo dropdown cho các trường Danh mục và Tiền tệ, chúng ta cần một cách để cung cấp danh sách các giá trị cho chúng. Chúng ta có thể hard-code các giá trị nhưng mỗi khi các giá trị đó thay đổi, cần phải chỉnh sửa trong code và cập nhật lại ứng dụng. Cách tốt hơn để làm điều đó là tạo một danh sách các giá trị đó trên SharePoint để lưu trữ tất cả các giá trị cho dropdown của ứng dụng.

Tạo SharePoint List mới có tên là Dropdown Values với các cột sau:

• DDType (single-line text)
• DDValue (single-line text)

Nhập danh sách bên dưới cho SharePoint List Dropdown Values bạn vừa mới tạo:

DDType	DDValue
Expense Category	Flight
Expense Category	Hotel
Expense Category	Gas
Expense Category	Meals
Currency	US Dollars
Currency	Canadian Dollars
Currency	Euro Dollars

Chèn Dropdown cho danh mục chi phí

Trường danh mục xuất hiện trong Edit Form với kiểu nhập mặc định là văn bản (text input). Chúng ta phải vào Edit Fields và đổi thành dropdown. Sau khi đổi, bên cạnh thẻ Danh mục sẽ xuất hiện báo lỗi. Chúng ta sẽ giải quyết vấn đề này sau, còn bây giờ hãy bỏ qua nó.

Kết nối SharePoint List  Dropdown Values vào ứng dụng.

Tiếp theo, chúng ta sẽ bỏ Dropdown Values vào dropdown Category bằng đoạn mã bên dưới vào thuộc tính Items.

Filter('Dropdown Values', DDType="Expense Category").DDValue

Lúc này chúng ta giải quyết báo lỗi màu đỏ. Nó xuất hiện vì giá trị Update của thẻ Category tham chiếu trường nhập văn bản (Text Input) mà chúng ta đã đổi.

Thay vào đó, hãy thay đổi thuộc tính Updates của thẻ Category để tham chiếu dropdown mới được tạo.

drp_Category.Selected.DDValue

Chúng ta cũng cần chỉnh sửa thêm hai thuộc tính nữa của thẻ Category để Form hoạt động bình thường.

Default: Parent.Default
DisplayMode: Parent.DisplayMode

Thêm một giá trị trống vào danh mục thả xuống

Bây giờ, chúng ta sẽ cập nhật mã của Dropdown để thêm một giá trị trống ở đầu danh sách.

Sử dụng mã này trong thuộc tính Items của dropdown. Một cách khác là sử dụng hàm Collect để tải các giá trị vào collection nhưng cách này tốt hơn vì chúng ta không cần lưu trữ tạm thời các giá trị đó.

Ungroup(
    Table(
        {myMenuOptions: Table({DDValue: Blank()})},
        {myMenuOptions: Filter('Dropdown Values', DDType="Expense Category").DDValue}
    ),
    "myMenuOptions"
)

Thực hiện Dropdown tiền tệ

Hãy lặp lại các bước tương tự mà chúng ta đã thực hiện để tạo dropdown cho thẻ Category để làm trường Tiền tệ. 

Tải các giá trị cho Dropdown Currency với danh sách các giá trị. Và thêm giá trị trống vào danh sách.

Ungroup(
    Table(
        {myMenuOptions: Table({DDValue: Blank()})},
        {myMenuOptions: Filter('Dropdown Values', DDType="Currency").DDValue}
    ),
    "myMenuOptions"
)

Thay đổi thuộc tính Update của thẻ Currency để trỏ đến dropdown.

drp_Currency.Selected.DDValue

Sau đó, cấu hình lại trong thuộc tính Default và DisplayMode của thẻ Tiền tệ.

Default: Parent.Default
DisplayMode: Parent.DisplayMode

Gửi ghi nhận chi phí

Sau khi điền vào Form trên ứng dụng, nhân viên bán hàng sẽ bấm vào nút gửi (Submit) để lưu dữ liệu đã nhập vào SharePoint List. Chúng ta chèn thêm một nút mới với nội dung là Submit.

Và cấu hình thuộc tính OnSelect để gửi dữ liệu.

SubmitForm(frm_ExpenseReport)

Chúng ta muốn nút biến mất sau khi biểu mẫu được gửi để ngăn việc gửi trùng lặp. Để làm vậy chúng ta cấu hình thuộc tính Visible của nút để nút không hiện khi Form ở chế độ xem .

frm_ExpenseReport.DisplayMode<>DisplayMode.View

Sau khi gửi thành công, chúng ta muốn người dùng xem lại nội dung đã gởi. Để làm được như vậy chúng ta lưu dữ liệu được ghi cuối cùng vào một biến (Variable) và chuyển Form thành chế độ xem.

Chúng ta cấu hình thuộc tính OnSuccess của Form để ghi dữ liệu cuối cùng vào biến.

Set(gblExpenseReportCurrent, frm_ExpenseReport.LastSubmit);
ViewForm(frm_ExpenseReport);

Sau đó, chỉnh lại thuộc tính Item của Form thành biến vừa được tạo.

gblExpenseReportCurrent

Kiểm tra ứng dụng báo cáo chi phí

Đã được thực hiện! Hãy dùng thử ứng dụng Báo cáo chi phí đã hoàn thành.