Persona:

Story:

ABC Company sells computers and its accessories. They also have a return policy within 30 days of selling any

products, but at the time of returning that product sales person of ABC company, needs approval from his/her Branch

Manager in case returned amount is more than 50,000 INR.

Whenever a customer came with his/her products in showroom to return the product, first of all sales person checks

the condition of the product, whenever all terms and condition gets fulfilled for return, then the sales person creates a

Return Order Claims (which is custom document in SAP) with reference to the billing document and also attaches the

scan copy of billing document/invoice with the ROC (Return Order Claim), so that it can be checked/verified during

approval and also for future audit purposes. If the returned amount exceeded 50,000 INR, it requires approval from

branch manager. The approval workflow gets triggered the moment ROC gets created in the system. If the return

amount is less than 50,000 INR, automatically return order gets created at the time of ROC creation, no approval

required for that case.

This approval has incorporated using Fiori master details approval applications. At the time of approval, a return order

gets created with reference to ROC number automatically in the background. Then only sales person can continue with

subsequent sales processes (i.e. return delivery, post goods receipt and credit memo creation) for that document. So

the return process is not possible without the approval of branch manager, if amount is more than 50,000 INR.

• Address customer and employee satisfaction issues promptly

• Adhere to high ethical standards, and comply with all regulations/applicable

laws

• Network to improve the presence and reputation of the branch and company

• Stay abreast of competing markets and provide reports on market movement

and penetration are proactive, involved in the community and with their

customers, and don’t wait for business to walk through the door.

• Customers

• Team Leads of Sales Persons

• Branch Accountants

• Other Brach Mangers

• Zonal Manager

Improve decision making during

approval process so that it

improves the efficiency and

effectiveness of ABC Company.

Branch Manager for

Kolkata branch in ABC Company

Mr. Amit Seal

• Direct all operational aspects including distribution operations, customer service, human resources,

administration and sales

• Assess local market conditions and identify current and

prospective sales opportunities

• Develop forecasts, financial objectives and business plans

• Bring out the best of branch’s personnel by providing training, coaching, development and motivation

• Locate areas of improvement and propose corrective actions that meet challenges and leverage growth opportunities.

42 Years old: Married: Master of Business

Administration: 17 Years of Work Experience: Manages Kolkata branch of ABC Company with 40

stuffs under him: Lots of travelling: Good

Communication skills

• Meet goals and metrics

• Manage budget and allocate funds appropriately

• Share knowledge with other branches and headquarters on

effective practices, competitive intelligence, business opportunities

and needs

• I needed real time insight of sales process

• Get things done quickly since I am on the move all the time,

dealing with million things.

• I need to analyze all required details (like Customer return

history and product return history) at the time of any decision making.

2

User Journey:

Current User Experience Journey Duration of the Journey: 20 mins

POV:

User Needs a way to Surprisingly/Because/But/So that

Amit Seal, Branch

Manager

Quickly approve or reject ROC Because he is on the move all the time, dealing with

million things.

Amit Seal, Branch

Manager

Access return history of customer

and product both during decision

making.

So that he can analyze all required details at the

time of any decision making.

Mock Up: Please check the mock up in following link:

https://standard.experiencesplash.com:443/api/projects/98141821db36de5a0babf118/prototype/snapshot/latest/inde

x.html#/1458118160420_S0

SAP Web Ide App Prototype:

Developing the App in SAP Web IDE:

1. Object Attribute & Object Status in Header View: These will allow to add additional details in master list in

header view:

2. Object Attribute & Object Status in Details View: These will allow to add additional details in details view

object header section:

Mindset

Actions

Touch Points

One more return from

customer of more

than 50,000 INR!

Why customer is

returning?

Need to check original

invoice, for details of

all products sold to

customer!

What is the condition of

returned items?

Is the customer

returning all products

or few of them only?

What is the history of the

customer, is he returning

very frequently

Are these few common

products getting returned

by multiple customers?

Should I reject the

request?

Ok, I will approve this.

Check the Return

Order Claim (ROC) number

Check list of ROCs and total amount for that

customer

Check corresponding

invoice details. Check all returned

products details

Approve the return

Return Order Claim

(ROC) number

Invoice

Number Customer Return History

History of return

products

Sales Person Mobile Device Returned

Amount

Check return history

of the product.

3

3. Icon Tab Bar, Icon Filter & SAP Icons in Details View: Icon tab bar is used to show multiple tabs in details view,

different SAP Icons selected for four different icon tab filters, also icon color can be different for different tabs:

4. Simple Form, Label, Text & Object Number for Header Tab in Details View: These UI elements used for

displaying structure level data, “ObjectNumber” UI element used for displaying amount or quantity fields where

you can add unit in same UI element. Date format also used here to show proper date.

5. Table with Row Selection & Navigation Property in Item Tab of Details View: In the details view xml file table

has defined with row pressing event named “onItemPressed”. Also column popin properties used so that table

gets changed in mobile view with small screen size:

This on press event has handled in details view controller with navigation property, here we are passing material

number of selected line from the item table:

4

The corresponding router related information has modified in “manifest.json” file in “routes” and “target” section,

we also define the data needs to be passed during the call using routes, say for example in this case we are passing

material number (property name: Matnr):

6. Navigation Back from Material History View: In the view xml file page tag view navigation has activated also an

event has defined.

After that in view controller corresponding event has handled so that it can navigate back to previous view:

7. Column Chart in VizFrame for Material History View: This is new UI5 view created for displaying history, in

the view xml file’s content section first VizFrame UI element defined:

After that data binding, measure and dimension definition done in corresponding view controller:

8. Hyperlink in Table Cell in Attachment Tab: In the attachment table a column Link UI element used so that

when approver click on the file, corresponding location of that file (available in OData property) will open:

5

9. Table Cell Coloring Conditionally in Customer History Tab: It can be achieved using state property of object

number, here we have set the value of state based on returned amount:

10. Fragment to Display Popup, Text Area & Dropdown Select: Here two fragments have used for two popups,

approve and reject. Both the fragment views and their contents are shown in SAP Web IDE layout editor:

11. Buttons: Here two buttons defined in footer toolbar of detail view xml file (Approve and Reject), one is of type

accept and another is of type Reject:

Also corresponding on “press” events of those two buttons have handled in view controller, here we are calling

corresponding fragment for popup:

6

12. Message Toast & Message Box: Here message toast used to display after approve and reject:

In case of rejection, if approver does not select Rejection Reason from the dropdown we are showing message

using message box:

Testing the App with Mock Data in SAP Web IDE:

At first configuration created to run the app using mock data:

After running the app with mock data, following screen will appear. By default first record from the header set will be

selected. In details section, there are four tab and by default header tab will be selected:

Button

Icon Tab Bar

& Icons

Object Attribute

Object Status

Simple Form,

Label, Text,

Object Number

7

Following screen will appear when Items tab is selected, approver can check return history of all materials pressing the

navigation button in item line:

After pressing navigation button from second line item, a new view will open with return history of second material (i.e.

Printer 364647) for last 12 months. Data will be displayed in VizFrame Column Chart. For going back to item details view,

use “Back” navigation button.

In the Attachments tab approver can access all documents and images attached with the ROC claim no, if user clicks on the

file name it will open the link where actually file is stored:

In the last tab, approver can check return history of customer. In this table, if the returned amount is more than 50,000

INR (i.e. required Branch Manager Approval), then that amount will be marked as red, otherwise the amount is marked as

green:

Table with

Navigation Property

Navigation

Back Button

VizFrame

Column Chart

Hyperlink

property with

table cell

8

At the end when approver press “Approve” button, a final popup will appear for optional comments from approver along

with Ok & Cancel buttons:

After pressing Ok button, it will show message using Message Toast:

In case approver, press the “Reject” button, along with an optional comment a drop down will appear with some Rejection

Reason:

Cell Coloring

Conditionally in

Table

Fragment to

Display Popup

Text Area to

write comments

during approval

Buttons in Popup

Message Toast

Select for

dropdown purpose

9

This Rejection Reason is mandatory, in case approver tries to reject without providing any Rejection Reason, it will throw

a message and stop the rejection process:

Also all three tables are responsive and table popin properties have used, so that table gets changes in mobile device.

When we change the device from SAP Web IDE we can check the behavior:

Message Box for

message display