SAP Customers deal with many business objects in daily business. SAP developed many applications to manage several business objects to use. In many scenarios, customers do define and develop custom business objects (Applications) to speed up or to develop a new business process.
Most of the business objects are in hierarchical structures—a mandatory header, Item, sub-item, and so on. In SAP S/4HANA, one can utilize the power of SAP S/4HANA development artifacts to design and develop applications in simple steps that require basic knowledge of ABAP, Core Data Services, and Fiori Elements using WebIDE. Business object development starts with design. Let’s continue with an example of a business object with header and item relation.
Step 1: Design a database table for header and Item with respective keys and foreign key relation.
Step 2: Define basic CDS views on top of DB tables (Basic views starts with I_*). The basic view should reflect the underlying data model. Define mandatory header annotations like
@VDM.viewtype: #BASIC, @objectmodel.representativekey: 'Material' @accesscontrol.authorizationcheck: #CHECK @objectmodel.usagetype.*, @abapcatalog:*
Tip: Make use of SAP Global Field Names (GFN) to refer to the DB field names. SAP GFN's are approved abbreviations to refer to a view field.
Tip: Annotate basic CDS view fields with semantic annotations like Currency key, Currency, Quantity Quantity Unit, Visibility, and so on.
Step 3: Build a relation between header and Item CDS view via association.
Define consumption view, in view of the business process and user interface:
Step 4: Define consumption header(root) CDS view and include view fields from the underlying BASIC header view. Must include the mandatory header annotations
@VDM.viewtype: #CONSUMPTION, @objectmodel.*, @objectmodel.semantickey:*, @abapcatalog.* , @accesscontrol.*
Step 5: Define consumption item CDS view and include fields from underlying BASIC Item view. Must include the mandatory header annotations
@abapcatalog*, @accesscontrol.*, @VDM.viewtype: #CONSUMPTION, @objectmodel.*
Step 6: Associate header and item consumption views with respective key combination.
Consumption views reflect the user interface. Which means, the UI technology ‘Fiori Elements’ will generate the user interface in resemblance to the annotations defined in consumption views.
Fiori elements offer different layouts to develop the user interface. The most popular layout is the list report. List report comes with the pattern of a list page, that displays the header data records in a table format. Upon selecting the record, user will be navigated to an object page, where further details of header data and items can be found. Header data and items are groped by Facets. Further selection of item from related table will navigate to the object page of respective item.
Application to use Fiori elements must define a set of annotations either in CDS views or in local UI project metadata.
Frequently used annotation in list report:
List page: @ui.lineitem, @ui.selectionfield
List page contains a table and associated filters. For an example, a header CDS view has 8 fields and list page must show 5 important fields in table and 2 of them are filterable.
@AbapCatalog.sqlViewName: 'CHEADER'
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: Header view'
@VDM.viewType: #CONSUMPTION
@ObjectModel.createEnabled: true
@ObjectModel.updateEnabled: true
@ObjectModel.deleteEnabled: true
C_Header as select from I_Header
association [1..1] to C_Item as _Item on $projection.ID = _Item.ID
{
@UI.lineItem: [{position: 10 }]
@UI.SelectionField: [{position: 10 }]
Key Field1,
@UI.lineItem: [{position: 20 }]
@UI.SelectionField: [{position: 20 }]
Field2,
@UI.lineItem: [{position: 30 }]
Field3,
@UI.lineItem: [{position: 40 }]
Field4,
@UI.lineItem: [{position: 50 }]
Field5,
@UI.SelectionField: [{position: 30 }]
Field6,
Field7,
Field8,
}
As a result, Field1, Field2, Field3, Field4, Field5 will be positioned in list page table. Fields Field1, Field2, Field6 will be positioned in global filters in respective position order.
Object page:
Object page projects an overview of an entity and relation to associated entity sets. In our example, the general data facet should show all fields of header data and a facet for item data table.
Frequently used annotation in Object Page:
@ui.Identification, @ObjectModel.association.type, @ui.Datapoint
Below example can be followed to display non fields of root node in one facet and another facet to access item records formatted in a table.
{
@ui.dataPoint: { targetValueElement: ‚Field1‘ }
Key Field1,
@UI.identification: [{position: 10 }]
Field2,
@UI.identification: [{position: 20 }]
Field3,
@UI.identification: [{position: 30 }]
Field4,
@UI.identification: [{position: 40 }]
Field5,
@UI.identification: [{position: 50 }]
Field6,
@UI.identification: [{position: 60 }]
Field7,
@UI.identification: [{position: 70 }]
Field8,
@ObjectModel.association.type: [#TO_COMPOSITION_CHILD]
_Item
}
Result:
As a result, fields from 1 to 8 are shown as a form in facet ‘General Data’ and Item table in another facet. Field1 will be positioned in Object page Header.
CDS header annotations like @Objectmodel.create/update/delete enabled will enable create, update, delete operations on respective entity set. Of course, ABAP data provider class must be implemented to handle the request.
In addition, a gateway project should be defined (Tcode: SEGW) to build an interface between UI & Backend. The project should be created via Referenced Data Source in reference to the Consumption Header CDS view. As a result, Data provider class, Model Provider classes, Gateway service will be granted automatically upon project generation. Register the service in gateway client to build an UI project using Web IDE.