In this blog, I will show you how to create a CRM Service Order Fiori application within just a couple of minutes. You don’t need to write even one line of JavaScript code to get this responsive application.

Main function of this Fiori application

(1) There is a list which shows overview of Service orders in CRM system. You can search by Service Order and order description in search field.

(2) By clicking the setting icon, you can make more table columns visible in the table:

Example: Additional two columns are exposed.

Example: Sort by Posting date in ascending order

Example: Group by Order Status:

(3) Select any table row, you can navigate to Service Order detail page:

You can click corresponding tab to reach each detail page area:

Keep in mind, you DO NOT NEED to write any JavaScript code to make the above functionalities work. Please note that service order change and save are not supported in this application yet.

【Update on 2016-04-10】: Update function is available now. Please refer to this blog for detail: Enable CRM Service Order application with edit functionality.

Prerequisite of this solution

(1) SAP Web IDE 1.17 (includes OData Annotation Modeler as an available plug-in)

(2) SAP Netweaver 7.5 SP01

(3) You need to have some basic knowledge on CDS view. Here is the documentation of CDS view in SAP help

(4) You need to have some basic knowledge on UI5 Smart template. This is documentation in SAP help: Developing Apps with Smart Templates

Implementation steps

The overall development process would be:

(1) Most of the effort could be the CDS view implementation. Those views are responsible to return necessary data to UI frontend.

(2) The corresponding OData service is automatically generated when you activated your CDS view.

(3) Then you can use WebIDE Smart template generation wizard to generate the Fiori application on top of the automatically generated OData service.

The following entities must be created in ABAP development studio.

You can just paste the source code of each entity into ABAP development studio and activate them one by one.

Z_C_Status_Text

For example, create a new CDS view in ABAP development studio and paste the following source code,

then click activate button:

Z_I_Prod_Status

Z_I_Item_Detail

Z_C_Order_Item

Zorder_Sys_Status

Z_c_partner

ztf_BP_DETAIL

zcl_amdp_bp_detail

For CDS table function and AMDP implementation, please read this blog My CDS view self study tutorial – Part 6 consume table function in CDS view for more detail.

Z_i_Order_View

Z_C_Service_Order_View

Once you have activated all the CDS view entities, follow the steps described in this blog Step by Step to create CDS view through SmartTemplate + WebIDE, and you will get the working Service order application immediately.

Further reading

If you have a look at the automatically generated project in WebIDE, you will find that now there is no application specific view or controllers. Only Component.js exists with a few dummy code below. The UI5 runtime takes over everything for you to make the application work.

It means your trouble shooting will become more struggled in case you meet with isuse, since now the whole scenarios works as a black box for you. As a result it is of great importance for developers to understand what occurs under the hood.

CDS view self study

The following posts are written by me during my self-study on CDS view:

Part1 – how to test odata service generated by CDS view

Part2 – what objects are automatically generate after you activate one CDS view

Part3 – how is view source in Eclipse converted to ABAP view in the backend

Part4 – how does annotation @OData.publish work

Part5 – how to create CDS view which supports navigation in OData service

Part6 – consume table function in CDS view

Part7 – unveil the secret of @ObjectModel.readOnly

Part8 – my summary of different approaches for annotation declaration and generation

Part9 – cube view and query view

Part10 – How does CDS view key user extensibility work in S4/HANA

Part11 – CDS view test double framework

Part12 – CDS view source code count tool

Part13 – CDS view authorization

Part14 – CDS view performance analysis using PlanViz in HANA studio