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.
There is a detailed technical documentation available for the Approve Purchase Order App. The check out this link.
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.
|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.
|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.