Detailed description: Reference App – Approve Purchase Order

Overview

The Approve Purchase Orders App is a typical example of the approval process. It uses the Split Screen pattern and shows a list of purchase orders and the corresponding details. Users can search for certain purchase orders and either accept or reject them. Once the purchase order has been approved or rejected, it disappears from the list.

Note: You can find the source code for the UI in your WebIDE environment. Please follow this step by step guide.

Technical Documentation

There is a detailed technical documentation available for the Approve Purchase Order App. The check out this link.

Features

List of purchase orders

The master list displays the purchase orders the user can process in a multi-line form with specific formatting.

For the user’s convenience, the number of purchase orders awaiting processing as well as the icon to activate the multi approval function is displayed above the master list. On start the first item is selected and the details are displayed on the right. The master list header includes the search field. You can type any search criteria and choose Enter or use the magnifying glass icon to perform the search.

Purchase orders details
Purchase order details displays all necessary information about an individual purchase order the user has selected from the master list.On top of the form view the screen includes purchase order header data such as delivery details. On the lower part of the screen, the table shows all line items in the purchase order. For the user’s convenience, the number of line items is visible in the table header. All data is read-only
Approve/reject Purchase Order
After selecting a purchase order and checking the details, the user can either accept or reject it.A dialog opens and allows the user to explain this decision.

Multi approval/rejection of Purchase Orders

If the multi approval functionality is activated by a click on the respective icon on top of the master list a checkbox is displayed in front of each Purchase order. A summary for all the selected POs is displayed in the “details section” on the right side. Here the Gross Amount per PO as well the Gross Amount

for all selected POs is displayed. Also the budget as well the balance of the approver is displayed. With the “Approve all” / “Reject all” – Button the selected POs will be approved/rejected together.

A dialog opens and allows the user to explain this decision. Here also the number of affected POs is displayed in the title of the pop-up.

Once the purchase orders have been approved/rejected, a message toast is displayed and they are removed from the master list.