Skip to Content

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.

 

/wp-content/uploads/2014/12/po1_1004497.png

 

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

 

 

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

/wp-content/uploads/2014/12/po2_1004467.png
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.
/wp-content/uploads/2014/12/po3_1004477.png

 

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.

 

/wp-content/uploads/2014/12/po4_1004478.png

 

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.

/wp-content/uploads/2014/12/po5_1004479.png

 

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

/wp-content/uploads/2014/12/po6_1004486.png

 

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

    1. Hans-Juergen Richstein

      Hi Keshav,

      this is a known issue of the preview mode and is already “under construction”. It will be fixed in one of the upcoming versions of WebIDE.

      The sizing works correctly on a real phone.

      Regards, Hans-Juergen

      (0) 

Leave a Reply